3.3.2.1.2.9. JSPの作成¶

/WEB-INF/view/kaiden2/tutorial/gadget/gadgetTutorial/gadgetTutorialV01.jsp作成します。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<%@ taglib prefix="im" uri="http://www.intra-mart.co.jp/taglib/im-tenant" %>
<%@ taglib prefix="k" uri="http://kaiden.slcs.co.jp/taglib/ui" %>

<!-- チュートリアルガジェット -->
<c:set var="gadgetClass">tutorial</c:set> 
<c:set var="gadgetVariation">v01</c:set>
<c:set var="gadgetInstance">${param.gadget_instance}</c:set>
<c:set var="gadgetId">${gadgetClass}_${gadgetVariation}_${gadgetInstance}</c:set>
<c:set var="accessUrl">kaiden/gadget/gadgetTutorialV01</c:set>
<c:set var="gadgetBlockId">tutorialTable</c:set>

<c:set var="gadget" value="${appDto.gadgets[gadgetId]}" />
<c:set var="nomal" value="${gadget.blocks[gadgetBlockId]}" />

<%-- サーフェス --%>
<%-- タイトル --%>
<c:set var="surfaceChapterTitle">${gadget.surfaces["chapterTitle"]}</c:set>
<%-- テキスト --%>
<c:set var="surfaceTutorialText">${gadget.surfaces["tutorialText"]}</c:set>
<%-- 金額 --%>
<c:set var="surfaceTutorialAmount">${gadget.surfaces["tutorialAmount"]}</c:set>

<%-- 入力区分 / 必須区分 --%>
<%-- テキスト --%>
<c:set var="modeTutorialText">${nomal.fields["tutorialText"].inputType}</c:set>
<c:set var="reqTutorialText" >${nomal.fields["tutorialText"].requiredFlag}</c:set>
<%-- 金額 --%>
<c:set var="modeTutorialAmount">${nomal.fields["tutorialAmount"].inputType}</c:set>
<c:set var="reqTutorialAmount" >${nomal.fields["tutorialAmount"].requiredFlag}</c:set>


<%-- バリデーション --%>
<%-- テキスト --%>
<c:set var="validTutorialText_def">{k_maxLength:['250']}</c:set>
<c:set var="validTutorialText_apply">{${"true" == reqTutorialText ? "k_required:['']" : ""}}</c:set>
<c:set var="validTutorialText_tempsave"></c:set>
<c:set var="validTutorialText_reapply">{${"true" == reqTutorialText ? "k_required:['']" : ""}}</c:set>
<%-- 金額 --%>
<c:set var="validTutorialAmount_def">{k_currencyAmnt:['', 'searchCriteriaCompany'], k_numericMin:['0']}</c:set>
<c:set var="validTutorialAmount_apply">{${"true" == reqTutorialAmount ? "k_required:['']" : ""}}</c:set>
<c:set var="validTutorialAmount_tempsave"></c:set>
<c:set var="validTutorialAmount_reapply">{${"true" == reqTutorialAmount ? "k_required:['']" : ""}}</c:set>

<k:gadgetContainer gadgetClass="${gadgetClass}"
                   gadgetVariation="${gadgetVariation}"
                   gadgetInstance="${gadgetInstance}"
                   gadgetTitle="${surfaceChapterTitle}"
                   gadgetId="${gadgetId}"
                   style="width:850px;overflow:hidden;">  
  <k:blockContainer id="caution" style="display:block;">
  </k:blockContainer> 
  <form id="gadget_form" onsubmit="return false;">
    <k:blockContainer id="${gadgetBlockId}">
    <table class="imui-form" style="table-layout:fixed">
      <colgroup>
        <col style="width:150px;" />
        <col />
      </colgroup>
      <tr>
        <th><k:surface surfaceKey="${surfaceTutorialText}"  mode="0" requiredMark="${reqTutorialText}"/></th>
        <td>
          <k:text name="tutorialText"
                  style="width:675px;"
                  surfaceKey="${surfaceTutorialText}"
                  mode ="${modeTutorialText}"
                  validationDefault="${validTutorialText_def}"
                  validationApply="${validTutorialText_apply}"
                  validationTempsave="${validTutorialText_tempsave}"
                  validationReapply="${validTutorialText_reapply}"
                  maxlength="250"
                  />
        </td>
      </tr>
      <tr>
        <th><k:surface surfaceKey="${surfaceTutorialAmount}" mode="0" requiredMark="${reqTutorialAmount}"/></th>
        <td>
          <k:numericText name="tutorialAmount"
                  style="width:100px;"
                  class="kaiden-ui-numericText-label-nowrap"
                  surfaceKey="${surfaceTutorialAmount}"
                  mode ="${modeTutorialAmount}"
                  validationDefault="${validTutorialAmount_def}"
                  validationApply="${validTutorialAmount_apply}"
                  validationTempsave="${validTutorialAmount_tempsave}"
                  validationReapply="${validTutorialAmount_reapply}"
                  formated="view"
                  />
        </td>
      </tr>
    </table>
    </k:blockContainer>
  </form>
</k:gadgetContainer>
<script type="text/javascript">
  jQuery(function($){
  
    var eventMan = KAIDEN.getGadget("${gadgetId}").eventManager
      , blockAccessor = KAIDEN.getGadget("${gadgetId}").blockAccessors["${gadgetBlockId}"];
    
    /***********************************
     * 内部イベント 
     ***********************************/
    
    /** 入力項目のクリア */
    KAIDEN.getGadget("${gadgetId}").variable.clearData = function() {
      blockAccessor("tutorialText").setValue("");
      blockAccessor("tutorialAmount").setValue("");
    };
    
    /***********************************
     * 受信イベント（push) 
     ***********************************/
    
    //loadData データ読み込み  イベントリスナの登録
    eventMan.registPushListener("loadData", function(/**Object*/arg) {
      KAIDEN.getGadget("${gadgetId}").variable.clearData();
      return KAIDEN.ImwModerator.genericLoadDataEvent("${gadgetId}", "${accessUrl}", arg);
    });
    
    //loadData4Copy 申請書コピー  イベントリスナの登録
    eventMan.registPushListener("loadData4Copy", function(/**Object*/arg) {
      blockAccessor("tutorialText").setValue("");
      blockAccessor("tutorialAmount").setValue("");
      return KAIDEN.ImwModerator.genericLoadData4CopyEvent("${gadgetId}", "${accessUrl}", arg, {"${gadgetBlockId}":{"tutorialAmount":true}});
    });
    
    //loadData4Settle 事前申請書取り込み  イベントリスナの登録
    eventMan.registPushListener("loadData4Settle", function(/**Object*/arg) {
      blockAccessor("tutorialText").setValue("");
      blockAccessor("tutorialAmount").setValue("");
      return KAIDEN.ImwModerator.genericLoadData4SettleEvent("${gadgetId}", "${accessUrl}", arg, {"${gadgetBlockId}":{"tutorialAmount":true}});
    });
  });
</script>

コラム

スマートフォン画面を作成する場合、スマートフォン用にJSPを作成する必要があります。

詳細は「スマートフォン用のJSP作成 」を参照ください。