Vue.js／WebAPI版

----------------------------------------以上略----------------------------------------
    <div class="row layout-container">
      <div class="col-md-3 d-none d-md-block">
        <div class="row">
          <div class="col-12">
            <div class="list-group list-group-flush">
              <router-link
                :to="{ name: 'top' }"
                class="list-group-item list-group-item-action fw-bold border-top"
              >
                {{ $t('samples.ec01.layout.defaultLayout.home') }}
              </router-link>
              <template v-for="category in categoryList" :key="category.oid">
                <router-link
                  :to="{ name: 'category', query: { categoryId: category.oid } }"
                  class="list-group-item list-group-item-action"
                >
                  {{ category.name }}
                </router-link>
              </template>
            </div>
          </div>
        </div>
      </div>
      <router-view></router-view> (1)
    </div>
----------------------------------------以下略----------------------------------------

src.main.java
    ┗ samples.ec01
        ┣ bean
        ┗ annotation (1)
            ┃   ┣ Kana.java
            ┃   ┗ ......        　
            ┣ ui
            ┣ validator (2)
            ┃   ┣ group (3)
            ┃   ┃   ┗ JapaneseChecks.java
            ┃   ┣ KanaValidator.java
            ┃   ┗ ......
            ┣━ UserBean.java (4)
            ┗ ......

......
@WebApi(
        name = "samples/ec01/inquiry/doInquiry",
        displayName = "お問合せ登録WebApi",
        accepts = RequestType.REST_JSON,
        restJson = @RestJson(parameterName = "param"),
        methods = MethodType.POST,
        privileged = true,
        tokenCheck = @WebApiTokenCheck(
                executeCheck = true,
                consume = true,
                exceptionRollback = true),
        results = { RegistInquiryCommand.RESULT_MAPPING_RESULT })
@CommandClass(
        name = "samples/ec01/inquiry/RegistInquiryCommand",
        displayName = "お問合せ登録コマンド")
public class RegistInquiryCommand implements Command {

    private final BeanParamMapper mapper = new BeanParamMapper().withValidation()
            .whitelistPropertyNameRegex("^(mail|content|familyName(Kana)?|firstName(Kana)?)$"); (1)
    public static final String RESULT_INQUIRY_BEAN = "inquiryBean";
    public static final String RESULT_MAPPING_RESULT = "result";


    @Override
    public String execute(RequestContext request) {
        // 入力チェック
        InquiryBean inquiryBean = new InquiryBean();
        request.setAttribute(RESULT_INQUIRY_BEAN, inquiryBean);
        try {
            // 日本語専用"name_kana"取得フォーム
            if (Consts.LANGUAGE_JA.equals(TemplateUtil.getLanguage()) || TemplateUtil.getLanguage() == null) {
                mapper.populate(inquiryBean, request.getParamMap(), Default.class, JapaneseChecks.class); (2)
            } else {
                mapper.populate(inquiryBean, request.getParamMap(), Default.class); (3)
            }
        } catch (MappingException e) {
            request.setAttribute(RESULT_MAPPING_RESULT, e.getResult()); (4)
            return Constants.CMD_EXEC_ERROR;
        }

        Inquiry inquiry = inquiryBean.toEntity();
        // 問い合わせステータス
        // 1 : 未対応
        // 2 : 対応中
        // 3 : 対応完了
        // 4 : 終了
        SelectValue inquiryStatus = new SelectValue(InquiryStatus.NOT_DEAL.getValue());
        inquiry.setInquiryStatus(inquiryStatus);
        // 請求の登録
        EntityDaoHelper.insert(inquiry);

        return Constants.CMD_EXEC_SUCCESS;
    }
}

{"status":"ERROR","result":{"errors":[{"propertyPath":"mail","errorMessages":["値を入力してください。"]},{"propertyPath":"familyNameKana","errorMessages":["値を入力してください。"]},{"propertyPath":"firstNameKana","errorMessages":["値を入力してください。"]},{"propertyPath":"content","errorMessages":["値を入力してください。"]},{"propertyPath":"familyName","errorMessages":["値を入力してください。"]},{"propertyPath":"firstName","errorMessages":["値を入力してください。"]}]}}

----------------------------------------以上略----------------------------------------
    <form class="custom-form mt-3">
        <div class="form-group row">
        ......
              <div class="col-12 col-md-6 mt-3">
                <div>
                  <label for="familyNameKana" class="col-form-label label-hidden">
                    {{ $t('samples.ec01.inquiry.regist.familyNameKana') }}
                  </label>
                  <input
                    v-model="inquiryBean.familyNameKana"
                    type="text"
                    class="form-control border rounded input-hint-visible"
                    name="familyNameKana"
                    :placeholder="$t('samples.ec01.inquiry.regist.familyNameKana')"
                  />
                  <small class="form-text text-danger">
                    <template v-for="message in errorsMap.familyNameKana" :key="message">
                      {{ message }}<br /> (1)
                    </template>
                  </small>
                </div>
              </div>
        ......
    </form>
----------------------------------------以下略----------------------------------------

14:26:53.626 [http-nio-8080-exec-6] DEBUG 25 873   o.i.mtp.impl.auth.AuthContextHolder - check WebApiPermission [webApiName=samples/ec01/inquiry/doInquiry, parameter=org.iplass.mtp.webapi.permission.RequestContextWebApiParameter@1b1910ae] = true (privilegedExecution)
14:26:53.626 [http-nio-8080-exec-6] DEBUG 25 873 samples/ec01/inquiry/RegistInquiryCommand  o.i.m.i.transaction.LocalTransaction - create new Transaction:org.iplass.mtp.impl.transaction.LocalTransaction@791691ea with readOnly=false, stacked:null
14:26:53.626 [http-nio-8080-exec-6] DEBUG 25 873 samples/ec01/inquiry/RegistInquiryCommand  o.iplass.mtp.transaction.Transaction - rollback transaction cause org.iplass.mtp.web.actionmapping.TokenValidationException: 不正な画面遷移が発生しました(一連の登録処理中にブラウザの戻るボタン等を押下してしまいますと正常に処理を継続できない場合があります)。:org.iplass.mtp.impl.transaction.LocalTransaction@791691ea
org.iplass.mtp.web.actionmapping.TokenValidationException: 不正な画面遷移が発生しました(一連の登録処理中にブラウザの戻るボタン等を押下してしまいますと正常に処理を継続できない場合があります)。
    at org.iplass.mtp.impl.webapi.interceptors.TokenInterceptor.tokenError(TokenInterceptor.java:96)
    at org.iplass.mtp.impl.webapi.interceptors.TokenInterceptor.intercept(TokenInterceptor.java:76)
    at org.iplass.mtp.impl.command.InvocationImpl.proceedCommand(InvocationImpl.java:115)
    at org.iplass.mtp.impl.command.interceptors.TransactionInterceptor.lambda$intercept$0(TransactionInterceptor.java:34)
    at org.iplass.mtp.transaction.TransactionManager.doTransaction(TransactionManager.java:114)
    at org.iplass.mtp.transaction.Transaction.with(Transaction.java:303)
    at org.iplass.mtp.impl.command.interceptors.TransactionInterceptor.intercept(TransactionInterceptor.java:33)
    at org.iplass.mtp.impl.command.InvocationImpl.proceedCommand(InvocationImpl.java:115)
----------------------------------------以下略----------------------------------------

{"status":"FAILURE","exceptionType":"org.iplass.mtp.web.actionmapping.TokenValidationException","exceptionMessage":"不正な画面遷移が発生しました(一連の登録処理中にブラウザの戻るボタン等を押下してしまいますと正常に処理を継続できない場合があります)。"}

----------------------------------------以上略----------------------------------------
    fullTextSearch() {
      if (this.productName === '') {
        this.helpMessage = this.$t('samples.ec01.search.nokeyword')
        return false
      }
      var url = this.apiFulltextSearch()
      var data = { productName: this.productName, categoryOid: this.categoryOid }
      this.$http
        .post(url, data) (1)
        .then((response) => {
          var commandResult = response.data
          if (commandResult.status == 'SUCCESS') {
            if (commandResult.defaultResult != null && commandResult.defaultResult.length > 0) {
              this.fullSearchResult = this.transformSearchResults(commandResult.defaultResult) (2)
              this.helpMessage = ''
            } else {
              this.helpMessage =
                this.$t('samples.ec01.search.keyword') +
                this.productName +
                ', ' +
                this.$t('samples.ec01.search.noResult')
              this.fullSearchResult = []
            }
          } else {
            console.log(response)
          }
        })
        .catch((error) => { (3)
          var errorResult = error.response.data
          if (errorResult.exceptionType != null) {
            alert(
              this.$t('samples.ec01.search.jsError') +
                errorResult.exceptionType +
                '\n' +
                errorResult.exceptionMessage
            )
            return
          }
        })
    },
    dropdownSelect(category) {
      if (typeof category === 'string') {
        // "all" を選択した場合
        this.selectedCategory = { oid: 'all', name: this.$t('samples.ec01.product.category.all') }
      } else {
        // カテゴリを選択した場合
        this.selectedCategory = category
      }
    },
    transformSearchResults(entities) { (4)
      return entities.map((entity) => ({
        oid: entity.oid,
        name: entity.name,
        price: isNaN(entity.price) ? '' : entity.price,
        imageUrl: this.imgUrl(entity.productImg),
        detailUrl: `#/product/detail?productId=${entity.oid}`
      }))
    }
  }
----------------------------------------以下略----------------------------------------

----------------------------------------以上略----------------------------------------
            <div class="card col-12 bg-light">
              <div class="card-body">
                <div class="row mt-3 border-bottom">
                  <div class="col-12 col-md-4">
                    <span class="text-muted fw-bold">
                      {{ $t('samples.ec01.member.regist.userId') }}
                    </span>
                  </div>
                  <div class="col-12 col-md-8">{{ localUserBean.userId }}</div> (1)
                </div>
                <div class="row mt-3 border-bottom">
                  <div class="col-12 col-md-4">
                    <span class="text-muted fw-bold">
                      {{ $t('samples.ec01.member.registConfirm.fullName') }}
                    </span>
                  </div>
                  <div class="col-12 col-md-3">
                    <span class="text-muted fw-bold">
                      {{ $t('samples.ec01.member.regist.familyName') }}
                    </span>
                    &nbsp;{{ localUserBean.familyName }} (1)
                  </div>
                  <div class="col-12 col-md-3">
                    <span class="text-muted fw-bold">
                      {{ $t('samples.ec01.member.regist.firstName') }}
                    </span>
                    &nbsp;{{ localUserBean.firstName }} (1)
                  </div>
                </div>
                <div v-if="locale == 'ja' || locale === undefined" class="row mt-3 border-bottom">
                  <div class="col-12 col-md-4">
                    <span class="text-muted fw-bold">
                      {{ $t('samples.ec01.member.registConfirm.fullNameKana') }}
                    </span>
                  </div>
                  <div class="col-12 col-md-3">
                    <span class="text-muted fw-bold">
                      {{ $t('samples.ec01.member.regist.familyNameKana') }}
                    </span>
                    &nbsp;{{ localUserBean.familyNameKana }} (1)
                  </div>
                  <div class="col-12 col-md-3">
                    <span class="text-muted fw-bold">
                      {{ $t('samples.ec01.member.regist.firstNameKana') }}
                    </span>
                    &nbsp;{{ localUserBean.firstNameKana }} (1)
                  </div>
                </div>
                <div class="row mt-3 border-bottom">
                  <div class="col-12 col-md-4">
                    <span class="text-muted fw-bold">
                      {{ $t('samples.ec01.member.regist.mail') }}
                    </span>
                  </div>
                  <div class="col-12 col-md-8">{{ localUserBean.mail }}</div> (1)
                </div>
              </div>
            </div>
----------------------------------------以下略----------------------------------------

  beforeRouteUpdate(to, from, next) { (1)
    // 不正な画面遷移が発生したと判断
    if (['regist'].indexOf(from.name) == -1 || to.params.userBean === undefined) {
      next(new Error('samples.ec01.exception.invalidTransition'))
    } else {
      next()
    }
  }

----------------------------------------以上略----------------------------------------
// Axiosの設定
app.config.globalProperties.$http = axios.create({
  headers: { 'X-Requested-With': 'XMLHttpRequest' }　(1)
})
----------------------------------------以下略----------------------------------------

metaDataList
    ┣ contextPath (name=/entity) (1)
    ┣ contextPath (name=/property/select) (1)
    ┣ contextPath (name=/template)　※　帳票出力機能と管理トップ画面 (1)
    ┣ contextPath (name=/view/calendar) (1)
    ┣ contextPath (name=/view/generic) (1)
    ┣ contextPath (name=/view/menu/item) (1)
    ┣ contextPath (name=/view/menu/tree) (1)
    ┣ contextPath (name=/view/top) (1)
    ┣ contextPath (name=/view/treeview) (1)
    ┣ contextPath (name=/view/filter) (1)
    ┗ contextPath (name=/template)　(2)

----------------------------------------以上略----------------------------------------
<contextPath name="/template">
    <!-- Backoffice pages start -->
    <metaDataEntry>
        <metaData xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xsi:type="metaJspTemplate">
            <name>samples/ec01/backoffice/stock/stockUpdate</name>
            <displayName>在庫一括更新画面</displayName>
            <path>/jsp/samples/ec01/backOffice/stock/stockUpdate.jsp</path>
            <layoutId>/action/gem/layout/defaultLayout</layoutId>
            <contentType>text/html; charset=utf-8</contentType>
        </metaData>
    </metaDataEntry>
    <!-- Backoffice pages end -->
</contextPath>
----------------------------------------以下略----------------------------------------

{
    "en": {
        "samples": {
            "ec01": {
                "all": {
                    "breadcrumb": {
                        "home": "Home" (1)
                    },
                    "pagination": {
                        "next": "Next",
                        "prev": "Prev"
                    },
                    "yen": "Yen"
                },
            ......
            }
        }
    },
    "ja": {
        "samples": {
            "ec01": {
                "all": {
                    "breadcrumb": {
                        "home": "ホーム" (1)
                    },
                    "pagination": {
                        "next": "次へ",
                        "prev": "前へ"
                    },
                    "yen": "円"
                },
            ......
            }
        }
    }
}

<template>
<div class="col-sm-12 col-md-9">
    <div class="row">
      <div class="col-12">
        <div class="border-top"></div>
        <nav class="breadcrumb all-breadcrumb">
          <router-link class="breadcrumb-item text-primary" :to="{ name: 'top' }">
            {{ $t('samples.ec01.all.breadcrumb.home') }} (1)
          </router-link>
          <span :id="categoryId" class="breadcrumb-item active">{{ categoryNameLocale }}</span>
        </nav>
      </div>
    </div>
    ......
</template>

samples.ec01.bean.validation.Tel.invalidChar    = 「数字」および「-」のみ利用可能です。(1)
samples.ec01.bean.validation.UserId.invalidChar = 「英数字」および「-」(ハイフン)「@」「_」「.」(ピリオド)のみ利用可能です。
samples.ec01.bean.validation.UserId.outOfLength = ユーザーIDは{min}文字以上{max}文字以下です (2)
samples.ec01.bean.validation.isBlank            = 値を入力してください。
samples.ec01.bean.validation.notKana            = 全角カタカナを入力してください。
......

samples.ec01.bean.validation.Tel.invalidChar    = Please enter alphanumeric characters or "-"(hypen) . (1)
samples.ec01.bean.validation.UserId.invalidChar = Please enter alphanumeric characters or "-"(hypen), "@", "_"(underscore), "."(dot) .
samples.ec01.bean.validation.UserId.outOfLength = User ID must be in range between {min} and {max} characters. (2)
samples.ec01.bean.validation.isBlank            = Please enter value.
samples.ec01.bean.validation.notKana            = Please enter Katakana.
......