intra-mart Accel Kaiden! プログラミングガイド第12版 2020-04-01

目次 ≪ 4.3.2.9. JSPの作成 4.3.4. サーバサイド ≫

4.3.3. クライアントサイド¶

本項では、ガジェット（経費旅費）クライアントサイドのプログラミング方法について解説します。

申請書ガジェットの設定内容取得
スマートフォン用のJSP作成
- データの取得と画面表示

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コンテナから取り出して処理します。

目次 ≪ 4.3.2.9. JSPの作成 4.3.4. サーバサイド ≫