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

3.3.1. Gadget

本項では、intra-mart Accel Kaiden!におけるガジェットの仕様を解説します。

3.3.1.1. ガジェットとは?

intra-mart Accel Kaiden!におけるガジェットとは、特定の機能を部品化したものを指します。
intra-mart Accel Kaiden!の多くの画面では、次の様にガジェットを組み合わせて構成しています。

申請書マスタメンテナンスの様に、ユーザが独自に組合せを変更できる機能も用意しています。
  • 申請画面(旅費精算申請)
    申請書マスタメンテナンスの設定により、ガジェットの組合せを変更することができます。
../../../../_images/trexpstl_v01.png
  • 登録/更新画面(マスタメンテナンス)(プロジェクトマスタ)
    ガジェットの組合せはプログラムで固定です。
../../../../_images/master_mainte.png
  • 勤務表画面
    ガジェットの組合せはプログラムで固定です。
../../../../_images/work_report.png
  • 勤務入力画面
    ガジェットの組合せはプログラムで固定です。
../../../../_images/work_report_daily.png
  • 勤務表PDF
    ガジェットの組合せはプログラムで固定です。
../../../../_images/work_report_pdf.png

3.3.1.2. ガジェットの識別子

ガジェットは次の様な識別子で構成されています。
識別子 説明
ガジェットクラス
ガジェットの種別を表します。
ガジェットバリエーション
同一ガジェット種別で画面レイアウト違いを表します。
ガジェットインスタンス
特定のガジェットを同時に複数利用する場合に使用します。
ガジェットクラス、ガジェットバリエーションでガジェットを特定することが可能ですが、
申請書などで、特定のガジェットを同時に複数利用する可能性があるため連番を設けています。
同時複数利用を行わない画面では、原則「0」となり、同時複数利用を行う画面では、「0」からの連番です。
ガジェットID
ガジェットクラス、ガジェットバリエーション、ガジェットインスタンスの3つをアンダースコア(_)で繋げた文字列です。
ガジェットIDがガジェットを一意に示す値として使用します。

3.3.1.3. ガジェットの構造

ガジェットは次の様な構造です。
ガジェットは1つのJSP内に複数のガジェットを定義することが可能です。

ガジェット <k:gadgetContainer>に内包する要素として次の2種類のブロックがあります。

コラム

ガジェット内には一つだけ<form>を配置することができます。
バリデーションを行うためには、バリデーション対象のエレメントが<form>内に配置されている必要があります。

コラム

ガジェット内には最低ひとつのブロック <k:blockContainer>、またはTMTable <k:tmtable>を配置してください。
テキストボックス <k:text>などのエレメントは、必ずブロック <k:blockContainer>、またはTMTable <k:tmtable>内に配置してください。

注意

次の様な構造は実装できませんので、ご注意ください。

3.3.1.4. ガジェットのプログラミング

ガジェットのプログラミングに必要な機能はタグライブラリとして用意しております。
本項では、タグライブラリを使用して簡単なガジェットを作成する方法を解説します。
  • プログラミング例
    次のソースは、一つのテキストボックスを持つガジェットです。
    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
    <%@ taglib prefix="k" uri="http://kaiden.slcs.co.jp/taglib/ui" %>
    
    <c:set var="gadgetClass">sampleGadget</c:set>
    <c:set var="gadgetVariation">v01</c:set>
    <c:set var="gadgetInstance">0</c:set>
    <c:set var="gadgetId">${gadgetClass}_${gadgetVariation}_${gadgetInstance}</c:set>
    
    <k:gadgetContainer
      gadgetClass="${gadgetClass}"
      gadgetVariation="${gadgetVariation}"
      gadgetInstance="${gadgetInstance}"
      gadgetTitle="ガジェットタイトル"
      gadgetId="${gadgetId}">
    
      <k:blockContainer id="inputArea">
        <k:text name="textbox" mode="0" />
      </k:blockContainer>
    </k:gadgetContainer>
    
  • 解説
    <c:set /// >の部分は、ガジェットの識別子をそれぞれ変数に設定しています。
    特にガジェットIDは、JavaScriptのコーディングでは重要な役割を担いますので、
    ”${gadgetId}”のコーディングだけで済むよう変数に設定すること推奨します。

コラム

ガジェットの初期化処理で、ガジェット内のname(id)属性はガジェットやブロックを考慮した値に変更します。
変更前の値は「data-kaiden-org-id」「data-kaiden-org-name」に保持していますが、
変更前の値でアクセスできるようJavaScriptライブラリ(Accessor)を用意していますので、
プログラミングの際に変更後の値を意識する必要はありません。

注意

エレメントのname属性およびid属性は、ガジェット <k:gadgetContainer>内で一意な値を設定してください。

ブロック <k:blockContainer>TMTable <k:tmtable>内で一意であれば問題はありませんが、
メンテナンス性などを考慮し、ガジェット <k:gadgetContainer>内で一意な値を設定するようにしてください。

3.3.1.5. ガジェット間通信とは?

ガジェット間通信とは、ガジェットとガジェットの間でイベントを発行し、処理やデータなどを連携する仕組みです。

ガジェット間通信はGadgetManagerを仲介させてイベントのやり取りを行います。
GadgetManagerを仲介させることで、ガジェット間の依存をなくすメリットがあります。
図の様に、ガジェットAから発行されたイベントは、GadgetManagerを通じガジェットBやガジェットCに連携します。
連携したイベントの処理は受け側のガジェットに委任されます。

たとえば、図の様にガジェットBはイベントを処理する用意があるので、そのままガジェットBでは処理を実行します。
ガジェットCはイベントを処理する用意がないため、発行されたイベントを無視します。(エラーにもなりません)

3.3.1.6. ガジェット間通信のイベント

ガジェット間通信は、次の2種類のイベントがあります。
  • PUSHイベント
    他のガジェットに何かを通知したり、処理を実行させるためのイベントです。
  • PULLイベント
    他のガジェットにデータなどを要求するイベントです。
    イベントを処理する側のガジェットでは、何らかの値を返却する必要があります。

    コラム

    ガジェット間通信のイベントは2種類ありますが、厳密な違いはありません。
    PUSHイベントで値を返却することも可能ですが、メンテナンス性向上の観点から次の様な分類を推奨します。
    • PUSHイベント:返却値なし
    • PULLイベント:返却値あり(処理結果や処理ガジェットが保有するデータを返却)

3.3.1.7. ガジェット間通信のプログラミング

ガジェット間通信のプログラミングは、次の様に行います。
  • イベントの発行
    他のガジェットへイベントを発行する場合は、次の様にプログラミングします。
    // PUSHイベントを発行
    KAIDEN.gadgetMan.execPush("pushイベントキー", "引数", "呼び出し元ガジェットID");
    
    // PULLイベントを発行
    var ret = KAIDEN.gadgetMan.execPull("pullイベントキー", "引数", "呼び出し元ガジェットID");
    

  • イベントの受信
    他のガジェットからのイベントを受信する場合は、次の様にプログラミングします。
    “arg”にはイベント発行時の引数が渡されます。
    // EventManagerの取得
    var eventMan = KAIDEN.getGadget("ガジェットID").eventManager;
    
    // PUSHイベントの受信
    eventMan.registPushListener("pushイベントキー", function(arg) {
      // イベント処理
    });
    
    // PULLイベントの受信
    eventMan.registPullListener("pullイベントキー", function(arg) {
      // イベント処理
      return "戻り値";
    });
    

  • イベントの戻り値
    他のガジェットへ発行したイベントは、戻り値を返却する場合があります。
    返却された戻り値は、複数のガジェットの処理結果を格納するため、配列として返却します。
    返却された戻り値の配列には、イベントの戻り値と処理を行ったガジェットの情報を返却します。
    // PULLイベントを発行
    KAIDEN.gadgetMan.execPush("pushイベントキー", "引数", "呼び出し元ガジェットID");
    
    // PULLイベントを発行
    var ret = KAIDEN.gadgetMan.execPull("pullイベントキー", "引数", "呼び出し元ガジェットID");
    

    コラム

    上記の場合、retには以下の情報が配列で格納されています。
    • result ※処理自体の戻り値が格納されています。
    • gadgetAttr.gadgetId
    • gadgetAttr.gadgetClass
    • gadgetAttr.gadgetVariation
    • gadgetAttr.gadgetInstance