intra-mart Accel Kaiden! プログラミングガイド 第20版 2023-12-22

5.2.3. その他

5.2.3.1. はじめに

5.2.3.1.1. 本タグライブラリを使用する際の設定について

本タグライブラリを使用するJSPのページで、次の様な taglib ディレクティブを指定する必要があります。
<%@ taglib prefix=”k” uri=”http://kaiden.slcs.co.jp/taglib/v2/ui” %>

5.2.3.2. intra-mart Accel Kaiden! 基盤モジュール

5.2.3.2.1. ガジェット <k:gadgetContainer>

  • 概要
    ガジェット用のタグライブラリです。
    本タグライブラリで囲んだ内容がガジェットとして扱われます。
    ガジェット内の要素「ブロック <k:blockContainer>」「TMTable <k:tmtable>」については、各項目を参照してください。

  • 使用例
    <c:set var="gadgetClass">sampleGadget</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>
    
    <k:gadgetContainer gadgetClass="${gadgetClass}"
                       gadgetVariation="${gadgetVariation}"
                       gadgetInstance="${gadgetInstance}"
                       gadgetTitle="サンプル"
                       gadgetId="${gadgetId}"
                       style="width:850px;overflow:hidden;">
        <%-- ガジェットの内包要素 --%>
    </k:gadgetContainer>
    

    コラム

    ガジェットの幅(width)は他のガジェットと合わせるため、極力「850px」としてください。
  • 属性
    本タグライブラリには次の属性が設定可能です。

    属性名 説明 必須
    gadgetClass
    ガジェットクラスを設定します。
    gadgetVariation
    ガジェットバリエーションを設定します。
    gadgetInstance
    ガジェットインスタンスを設定します。
    「gadgetInstance」は申請書マスタメンテナンスで申請書を作成した際に生成します。
    リクエストパラメータから「${param.gadget_instance}」の様に取得可能です。
    gadgetId
    ガジェットIDを設定します。
    ガジェットクラス、ガジェットバリエーション、ガジェットインスタンスの3つをアンダースコア(_)でつなげたものをガジェットIDといい、このガジェットIDがガジェットを一意に示す値です。
    gadgetTitle
    ガジェットタイトル用のサーフィスキーを設定します。
    サーフィスキーを設定することで、プロパティファイルから文字列を取得します。
    サーフィス定義に存在しないキーの場合は、設定された内容をそのまま出力します。
     
    hideGadgetTitle
    タイトルの非表示有無を設定します。
    “true”:ガジェットのタイトルを表示しません。
    “false”:ガジェットのタイトルを表示します。
    ※省略時は“false”が設定されたものとします。
    本設定の有無に関わらず、エラーダイアログ内のタイトルは表示します。
     
    noScriptForDebug
    ガジェット初期化用javascriptの出力有無を設定します。
    “true”:ガジェット初期化用javascriptを出力しません。
    “false”:ガジェット初期化用javascriptを出力します。
    ※省略時は“false”が設定されたものとします。
    本設定は開発時に使用するもので、機能リリース時は省略してください。
     

    注意

    「gadgetClass」、「gadgetVariation」はガジェットマスタデータと同じ値を設定してください。

5.2.3.2.2. ブロック <k:blockContainer>

  • 概要
    ブロック用のタグライブラリです。
    ガジェット内で単票形式で表現する場合に使用するタグライブラリです。

コラム

<k:blockContainer>はHTML出力時には<div>に変換されますので、<div>の属性を指定できます。
  • 使用例
    ../../../_images/blockContainer.png
    <k:blockContainer id="sampleBlock">
      <table class="imui-form">
        <tr>
          <th><k:surface surfaceKey="支出目的"  mode="0" requiredMark="true"/></th>
          <td><k:text name="summary1" mode ="0" /></td>
        </tr>
        <tr>
          <th><k:surface surfaceKey="備考" mode="0" /></th>
          <td><k:text name="summary2" mode ="0" /></td>
        </tr>
      </table>
    </k:blockContainer>
    
  • 属性
    本タグライブラリには次の属性が設定可能です。

    属性名 説明 必須
    id
    「id」属性を設定します。

5.2.3.2.3. TMTable <k:tmtable>

  • 概要
    TMTable用のタグライブラリです。
    ガジェット内で帳票形式で表現する場合に使用するタグライブラリです。

コラム

<k:tmtable>はHTML出力時には<table>に変換されますので、<table>の属性を指定できます。
<tbody>内の内容が動的に行追加/行削除される対象です。
TMTable操作パネル <k:tmtableOperationPanel>にて、9つの操作パネルを追加でき、この操作パネルによって行追加/行削除などの操作が行えます。
  • 使用例
    ../../../_images/tmtable.png
    <k:tmtable id="sampleTmtable" class="imui-form">
      <thead>
        <tr>
          <td>
            <k:tmtableOperationPanel position="header" allowAdd="true" allowDel="true" />
          </td>
          <th><k:surface surfaceKey="入力欄1" requiredMark="true"/></th>
          <th><k:surface surfaceKey="入力欄2" requiredMark="true"/></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <k:tmtableOperationPanel position="detail" allowAdd="true" allowDel="true" />
          </td>
          <td><k:text name="inputArea1" mode="0"/></td>
          <td><k:text name="inputArea2" mode="0"/></td>
        </tr>
      </tbody>
    </k:tmtable>
    
  • 属性
    本タグライブラリには次の属性が設定可能です。

    属性名 説明 必須
    id
    「id」属性を設定します。
    rowNumberTarget
    行番号を表示する項目の「name」属性を設定します。
    本属性に「TMTable操作パネル <k:tmtableOperationPanel>」のnameを設定することで、行番号を表示します。
     

5.2.3.2.4. TMTable操作パネル <k:tmtableOperationPanel>

  • 概要
    TMTable操作パネル用のタグライブラリです。

  • 使用例
    <k:tmtable id="sampleTmtable" class="imui-form" rowNumberTarget="rowNumber">
      <thead>
        <tr>
          <td style="vertical-align:middle;">
            <k:tmtableOperationPanel
              position="header"
              allowAdd="true"
              allowDel="true"
            />
          </td>
          <%-- 他のヘッダー要素 --%>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <k:tmtableOperationPanel
              position="detail"
              allowAdd="true"
              allowDel="true"
              name="rowNumber"
            />
          </td>
          <%-- 他の明細要素 --%>
        </tr>
      </tbody>
    </k:tmtable>
    
  • 属性
    本タグライブラリには次の属性が設定可能です。

    属性名 説明 必須
    position
    操作パネル配置先を設定します。
    “header”:「上に挿入」や「行削除」が使用不可に変化します。
    “detail”:操作パネルのすべてが使用可能です。
    allowAdd
    行追加可否を設定します。
    “true”:行追加を有効にします。
    “false”:行追加を無効にします。
    allowDel
    行削除可否を設定します。
    “true”:行削除を有効にします。
    “false”:行削除を無効にします。
    name
    「name」属性を設定します。
    本属性に設定した値を「TMTable <k:tmtable>」のrowNumberTargetに設定することで、行番号を表示します。
     

5.2.3.2.5. ダイアログ <k:dialog>

  • 概要
    ダイアログ用のタグライブラリです。

  • 属性
    本タグライブラリには次の属性が設定可能です。

    属性名 説明 必須
    id
    「id」属性を設定します。
    title
    タイトル表示用のサーフィスキーを設定します。
    サーフィスキーを設定することで、プロパティファイルから文字列を取得します。
    サーフィス定義に存在しないキーの場合は、設定された内容をそのまま出力します。
    modal
    モーダル表示有無を設定します。
    “true”:ダイアログがモーダル表示されます。
    “false”:通常のダイアログ表示です。
     

5.2.3.2.6. フローティングボックス <k:floatingBox>

  • 概要
    フローティングボックス用のタグライブラリです。

  • 使用例
    <k:floatingBox id="dailyInputWindow" modal="true" posHorizonCenter="true" posY="5%">
        <%-- フローティング表示するための内包要素 --%>
    </k:floatingBox>
    
    • フローティングボックスを表示する
      $(“#id”).KaidenFloatingBox(“open”);
    • フローティングボックスを閉じる
      $(“#id”).KaidenFloatingBox(“close”);
    • フローティングボックスの表示時のイベントを指定する
      $(“#id”).on(“open”, function(){...});
    • フローティングボックスの閉じる時のイベントを指定する
      $(“#id”).on(“close”, function(){...});
    • フローティングボックスの開くときにポジション(top/left)を指定
      $(“#id”).KaidenFloatingBox({top:”10px”, left:”10px”}););
  • 属性
    本タグライブラリには次の属性が設定可能です。

    属性名 説明 必須
    id
    「id」属性を設定します。
    フローティング表示時の要素として出力される<div>タグの「id」属性に設定します。
    modal
    モーダル表示モードを設定します。
    “true”:モーダル表示されます。
    “false”:モーダル表示になりません。
     
    draggable
    移動可否を設定します。
    modalに”true”が設定されている場合は、本属性は使用しません。
    “true”:フローティング表示した要素がドラッグ可能です。
    “false”:フローティング表示した要素がドラッグ不可です。
     
    dragHandle
    ドラッグハンドルを設定します。
    modalに”true”が設定されている場合は、本属性は使用しません。
    jQuery.Draggableのオプション「handle」を設定します。
     
    posX
    表示座標(X)を設定します。
     
    posY
    表示座標(Y)を設定します。
     
    posHorizonCenter
    左右中央表示モードを設定します。
    posXに値が設定されている場合は、本属性は使用しません。
    “true”:左右中央に表示します。
    “false”:左右配置位置を指定しません。
     
    posVerticalMiddle
    上下中央表示モードを設定します。
    posYに値が設定されている場合は、本属性は使用しません。
    “true”:上下中央に表示します。
    “false”:上下配置位置を指定しません。
     
    closeButton
    閉じるボタンの表示有無を設定します。
    “true”:閉じるボタンを表示します。
    “false”:閉じるボタンを表示しません。
    ※省略時は“false”が設定されたものとします。
     

5.2.3.2.7. 2段ヘッダリスト <k:fs2List>

  • 概要
    2段ヘッダリスト用のタグライブラリです。
    横スクロール対象とならない固定列と、横スクロール対象となる可変列を定義できます。
    設定は画面設定のXMLファイルで行います。

  • 使用例
    ../../../_images/fs2list.png
    <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
    <fs2ListSettings xmlns="http://kaiden.slcs.co.jp/xmlschema/fs2ListSettings">
      <defaultSetting>
        <!-- 検索画面に表示する最大件数 -->
        <limit>20</limit>
        <!-- 検索画面の行番号サーフェスキー -->
        <rownumberSurfaceKey></rownumberSurfaceKey><!-- 未指定時、デフォルトの「No」を表示 -->
        <!-- 検索一覧画面 選択マークカラム 使用/不使用 -->
        <useSelectedMark>true</useSelectedMark>
        <!-- 検索一覧画面 行番号カラム 使用/不使用 -->
        <useRownumber>true</useRownumber>
        <!-- 検索一覧画面の各カラムの表示縦幅 -->
        <colsHeight>32px</colsHeight>
        <!-- 検索一覧画面の表示縦幅 -->
        <fs2ListScrollHeight>350px</fs2ListScrollHeight>
        <!-- 
          固定列を表示する場合はfixedCols,可変列を表示する場合はvariableColsのタグで要素を作成してください。
            
            fieldKey:フィールドキー
            
            width:表示幅
                 横幅を指定します。
                 0pxを指定すると隠し項目になります。
                 省略時はwidth指定なしになります。
                 
            align:表示位置(left / center / right)
                 left:左寄せ
                 center:中寄せ
                 right:右寄せ
                 省略時はleftが適用されます。
                 
            headerSurfaceKey:ヘッダサーフェスキー
                 省略時は項目名が空欄になります。
                 
            colPosition:表示カラムの位置(1 / 2)
                 1:上段
                 2:下段
                 省略時は1が適用されます。
                 2段階にしない項目は指定不要です。
            
            colspan:水平方向の結合
                 colspan="xx"のxxを指定します。
                 0を指定すると結合しません。
                 省略時は結合しません。 
            
            rowspan:垂直方向の結合
                 colspan="xx"のxxを指定します。
                 0の場合は結合しません。
                 省略時は結合しません。 
                 2まで指定可能で、3以上指定すると2が適用されます。
            
            sortable:ソート可否
                 true:ソート可
                 false:ソート不可
                 2段ある場合の上段項目はtrueを指定しても無効になります。
                 省略できません。
        -->
        
        <!-- 検索画面の固定列カラム設定 -->
        <fixedCols>
          <fixedCol>
            <fieldKey>A</fieldKey>
            <width>100px</width>
            <align></align>
            <headerSurfaceKey></headerSurfaceKey>
            <colPosition></colPosition>
            <colspan></colspan>
            <rowspan>2</rowspan>
            <sortable>false</sortable>
          </fixedCol>
          <fixedCol>
            <fieldKey>B</fieldKey>
            <width>100px</width>
            <align></align>
            <headerSurfaceKey></headerSurfaceKey>
            <colPosition>1</colPosition>
            <colspan>2</colspan>
            <rowspan></rowspan>
            <sortable>false</sortable>
          </fixedCol>
          <fixedCol>
            <fieldKey>C</fieldKey>
            <width>50px</width>
            <align></align>
            <headerSurfaceKey></headerSurfaceKey>
            <colPosition>2</colPosition>
            <colspan></colspan>
            <rowspan></rowspan>
            <sortable>true</sortable>
          </fixedCol>
          <fixedCol>
            <fieldKey>D</fieldKey>
            <width>50px</width>
            <align></align>
            <headerSurfaceKey></headerSurfaceKey>
            <colPosition>2</colPosition>
            <colspan></colspan>
            <rowspan></rowspan>
            <sortable>true</sortable>
          </fixedCol>
        </fixedCols>
        
        <!-- 検索画面の可変列カラム設定 -->
        <variableCols>
          <variableCol>
            <fieldKey>E</fieldKey>
            <width>100px</width>
            <align></align>
            <headerSurfaceKey></headerSurfaceKey>
            <colPosition></colPosition>
            <colspan></colspan>
            <rowspan>2</rowspan>
            <sortable>false</sortable>
          </variableCol>
          <variableCol>
            <fieldKey>F</fieldKey>
            <width>100px</width>
            <align></align>
            <headerSurfaceKey></headerSurfaceKey>
            <colPosition>1</colPosition>
            <colspan>2</colspan>
            <rowspan></rowspan>
            <sortable>false</sortable>
          </variableCol>
          <variableCol>
            <fieldKey>G</fieldKey>
            <width>50px</width>
            <align></align>
            <headerSurfaceKey></headerSurfaceKey>
            <colPosition>2</colPosition>
            <colspan></colspan>
            <rowspan></rowspan>
            <sortable>true</sortable>
          </variableCol>
          <variableCol>
            <fieldKey>H</fieldKey>
            <width>50px</width>
            <align></align>
            <headerSurfaceKey></headerSurfaceKey>
            <colPosition>2</colPosition>
            <colspan></colspan>
            <rowspan></rowspan>
            <sortable>true</sortable>
          </variableCol>
        </variableCols>
        <!-- 検索画面のソート順:2つまで指定可 -->
        <orders>
          <order>
            <fieldKey>A</fieldKey>
            <type>asc</type>
          </order>
          <order>
            <fieldKey>E</fieldKey>
            <type>asc</type>
          </order>
        </orders>
      </defaultSetting>
    </fs2ListSettings>
    
  • 属性
    本タグライブラリには次の属性が設定可能です。

    属性名 説明 必須
    ajaxAccessUrl
    一覧検索を行うajaxAccessUrlを設定します。
    id
    「id」属性を設定します。