4.3.3. クライアントサイド¶
本項では、ガジェット(経費旅費)クライアントサイドのプログラミング方法について解説します。
4.3.3.1. 申請書ガジェットの設定内容取得¶
申請書ガジェットでは、サーフェースの内容や「申請書マスタメンテナンス」で設定された内容をスクリプトレット(EL式)にて取り出せます。「jp.co.slcs.kaiden2.extension_imw.foundation.imw_page.AbstractImwPageDto」をappDtoという名前で取り出せます。詳細は『intra-mart Accel Kaiden! JavaDoc』を参照してください。
コーディング例<c:set var="gadgetClass">expenseInfo</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/expenseInfoV01</c:set> <c:set var="gadgetBlockId">expenseInfoTable</c:set> <!-- 設定内容の取り出し --> <c:set var="gadget" value="${appDto.gadgets[gadgetId]}" /> <c:set var="block" value="${gadget.blocks[gadgetBlockId]}" /> <!--サーフィスの取り出し --> <%-- タイトル --%> <c:set var="surfaceChapterTitle">${gadget.surfaces["chapterTitle"]}</c:set> <%-- テキスト --%> <c:set var="surfaceTutorialText">${gadget.surfaces["summary1"]}</c:set> <!-- 入力区分 / 必須区分の取り出し --> <%-- テキスト --%> <c:set var="modeTutorialText">${nomal.fields["summary1"].inputType}</c:set> <c:set var="reqTutorialText" >${nomal.fields["summary1"].requiredFlag}</c:set>
4.3.3.2. スマートフォン用のJSP作成¶
PC版のJSPではjavascript(jQuery)などを利用して、データの表示などを行っていましたが、スマートフォン版のJSPでは、javascriptは利用せずに、JSPのみで作成しています。※一部jQueryモバイルの機能を利用しています。コラム
データの表示がないJSPでも「ファイル名 + “_sp.jsp”」を用意しておく必要があります。
4.3.3.2.1. データの取得と画面表示¶
以下のようにEL式(function)の「kimw:load4View」にて、通常ajaxにてデータを取得しているところを、スクリプトレット(EL式)にてデータを取得できます。
コーディング例<%@ taglib prefix="kimw" uri="http://kaiden.slcs.co.jp/taglib/imw" %> <c:set var="gadgetClass">ガジェットクラス</c:set> <c:set var="gadgetVariation">ガジェットバリエーション</c:set> <c:set var="gadgetInstance">${param.gadget_instance}</c:set> <c:set var="gadgetId">${gadgetClass}_${gadgetVariation}_${gadgetInstance}</c:set> <c:set var="componentName">コンポーネント名</c:set> <c:set var="imwSystemMatterId">${param.imwSystemMatterId}</c:set> <c:set var="imwUserDataId">${param.userDataId}</c:set> <c:set var="searchCriteriaCompany">${param.searchCriteriaCompany}</c:set> <%-- ガジェットデータの読み込み --%> <c:set var="gadgetResponse" value="${kimw:load4View(componentName, imwSystemMatterId, imwUserDataId, gadgetId, searchCriteriaCompany)}"></c:set> <%-- ガジェットデータを画面に表示 --%> <c:forEach items="${gadgetResponse.data[TMテーブルID]}" var="detailData"> <c:out value="${detailData.item1}"> <c:out value="${detailData.item2}"> <c:out value="${detailData.item3}"> </c:forEach>コラム
コンポーネント名は、ajax通信するActionクラスの名前を指定します。指定された名前でDIコンテナから取り出して処理します。