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

6.2.1. エレメント

6.2.1.1. はじめに

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

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

6.2.1.1.2. 本項に未記載の属性について

本項で記載していない次の様な属性も各タグライブラリに設定可能です。
通常のエレメントに対する属性を設定してください。
  • class
  • value
  • style
  • maxlength
  • readonly

6.2.1.1.3. 属性「formated」について

属性「formated」は、データベースに登録されている項目値とは別の値を表示したい場合に使用します。
例①)金額の項目値(カンマ編集)
  • 未フォーマットの項目値:999999999
  • フォーマット済の項目値:999,999,999
入力時(modeが”0”)は項目値の編集・登録を行う必要があるため「未フォーマットの項目値」を使用し、
参照時(modeが”1”)は項目値の編集・登録を行う必要がないため「フォーマット済の項目値」を使用したい場合、
属性「formated」に“view”を設定し、次の様な実装を行います。
  • formatPlainValueメソッドで金額の項目値に「999999999」を設定
  • formatFormatedValueメソッドで金額の項目値に「999,999,999」を設定
例②)数値の項目値(スケール編集)
  • 未フォーマットの項目値:999.0000000000
  • フォーマット済の項目値:999
数値(18,10)の項目の場合、データベースによっては小数部の値が「0」で補完される場合があります。
入力時(modeが”0”)、参照時(modeが”1”)ともに「0」を除去した値を使用したい場合、
属性「formated」に“both”を設定し、次の様な実装を行います。
  • formatPlainValueメソッドで数値の項目値に「999.0000000000」を設定
  • formatFormatedValueメソッドで数値の項目値に「999」を設定

コラム

実際の未フォーマット/フォーマット済の項目値は、次のConvertorクラスの処理により設定可能です。
ガジェット(経費旅費)の場合は、Action(基底)クラスで実装していますので、サンプルソースを参照してください。
  • ConvertForJsonSource#formatPlainValue
    未フォーマットの項目値を返却
  • ConvertForJsonSource#formatFormatedValue
    フォーマット済の項目値を返却

6.2.1.1.4. ガジェット上での属性「name」について

ガジェット内のエレメントに指定した「name」属性に設定された値は、タグライブラリの展開時に「name」属性に設定しますが、
ガジェットの初期化処理で「name」属性に設定された値はガジェットやブロックを考慮した値に再設定します。
タグライブラリの展開時に「name」属性に設定された値は、「data-kaiden-org-name」属性に保持します。

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

6.2.1.2.1. サーフィス <k:surface>

  • 概要
    サーフィス(ラベル)用のタグライブラリです。

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

    属性名 説明 必須
    name
    「name」属性を設定します。
     
    surfaceKey
    ラベル表示用のサーフィスキーを設定します。
    サーフィスキーを設定することで、プロパティファイルから文字列を取得します。
    サーフィス定義に存在しないキーの場合は、設定された内容をそのまま出力します。
    formated
    フォーマットされた項目値の表示方法を設定します。
    “input”:modeが”0”の場合にフォーマットされた項目値を表示します。
    “view” :modeが”1”の場合にフォーマットされた項目値を表示します。
    “both” :modeにかかわらずフォーマットされた項目値を表示します。
     
    requiredMark
    必須マークの表示有無を設定します。
    “true”:必須マークを表示します。
    “false”:必須マークを表示しません。
    ※省略時は“false”が設定されたものとします。
     

6.2.1.2.2. テキストボックス <k:text>

  • 概要
    テキストボックス用のタグライブラリです。

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

    属性名 説明 必須
    name
    「name」属性を設定します。
    mode
    表示モードを設定します。
    “0”:<input type=”text”>
    “1”:<label>
    formated
    フォーマットされた項目値の表示方法を設定します。
    “input”:modeが”0”の場合にフォーマットされた項目値を表示します。
    “view” :modeが”1”の場合にフォーマットされた項目値を表示します。
    “both” :modeにかかわらずフォーマットされた項目値を表示します。
     
    imeMode
    IMEモードを設定します。(※IMEモードの対応ブラウザのみ本属性の値が有効です。)
    “on”:フォーカス時にIMEを「active」に設定します。
    “off”:フォーカス時にIMEを「inactive」に設定します。
    “disabled”:フォーカス時にIMEを「disabled」に設定します。
     
    surfaceKey
    項目名用のサーフィスキーを設定します。(エラーメッセージなどで使用します。)
    サーフィスキーを設定することで、プロパティファイルから文字列を取得します。
    サーフィス定義に存在しないキーの場合は、設定された内容をそのまま出力します。
     

6.2.1.2.3. テキストボックス(数値) <k:numericText>

  • 概要
    テキストボックス(数値)用のタグライブラリです。
    本タグライブラリでは、IMEモードを「disabled」に設定します。(※IMEモードの対応ブラウザのみ)
    また、数値入力用に文字配置を右寄せに設定します。

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

    属性名 説明 必須
    name
    「name」属性を設定します。
    mode
    表示モードを設定します。
    “0”:<input type=”text”>
    “1”:<label>
    formated
    フォーマットされた項目値の表示方法を設定します。
    “input”:modeが”0”の場合にフォーマットされた項目値を表示します。
    “view” :modeが”1”の場合にフォーマットされた項目値を表示します。
    “both” :modeにかかわらずフォーマットされた項目値を表示します。
     
    surfaceKey
    項目名用のサーフィスキーを設定します。(エラーメッセージなどで使用します。)
    サーフィスキーを設定することで、プロパティファイルから文字列を取得します。
    サーフィス定義に存在しないキーの場合は、設定された内容をそのまま出力します。
     

6.2.1.2.4. テキストボックス(コード) <k:codeText>

  • 概要
    テキストボックス(コード)用のタグライブラリです。
    本タグライブラリでは、IMEモードを「disabled」に設定します。(※IMEモードの対応ブラウザのみ)

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

    属性名 説明 必須
    name
    「name」属性を設定します。
    mode
    表示モードを設定します。
    “0”:<input type=”text”>
    “1”:<label>
    surfaceKey
    項目名用のサーフィスキーを設定します。(エラーメッセージなどで使用します。)
    サーフィスキーを設定することで、プロパティファイルから文字列を取得します。
    サーフィス定義に存在しないキーの場合は、設定された内容をそのまま出力します。
     

6.2.1.2.5. テキストボックス(Hidden) <k:hidden>

  • 概要
    テキストボックス(Hidden)用のタグライブラリです。

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

    属性名 説明 必須
    name
    「name」属性を設定します。
    mode
    表示モードを設定します。
    “0”:<input type=”hidden”>
    “1”:<label>
    surfaceKey
    項目名用のサーフィスキーを設定します。(エラーメッセージなどで使用します。)
    サーフィスキーを設定することで、プロパティファイルから文字列を取得します。
    サーフィス定義に存在しないキーの場合は、設定された内容をそのまま出力します。
     

6.2.1.2.6. テキストボックス(日付) <k:date>

  • 概要
    テキストボックス(日付)用のタグライブラリです。
    テキストボックスの横にカレンダーアイコンが表示され、カレンダーと連動できるテキストボックスです。
    本タグライブラリでは、IMEモードを「disabled」に設定します。(※IMEモードの対応ブラウザのみ)

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

    属性名 説明 必須
    name
    「name」属性を設定します。
    mode
    表示モードを設定します。
    “0”:<input type=”text”>
    “1”:<label>
    formated
    フォーマットされた項目値の表示方法を設定します。
    “input”:modeが”0”の場合にフォーマットされた項目値を表示します。
    “view” :modeが”1”の場合にフォーマットされた項目値を表示します。
    “both” :modeにかかわらずフォーマットされた項目値を表示します。
     
    surfaceKey
    項目名用のサーフィスキーを設定します。(エラーメッセージなどで使用します。)
    サーフィスキーを設定することで、プロパティファイルから文字列を取得します。
    サーフィス定義に存在しないキーの場合は、設定された内容をそのまま出力します。
     

6.2.1.2.7. テキストボックス(時間) <k:time>

  • 概要
    テキストボックス(時間)用のタグライブラリです。
    1桁、または2桁の数値が入力された場合は、入力値をH、mmには00を補完して「H:mm」形式に変換します。
    3桁から5桁の数値が入力された場合は、最後の2桁以外をHに変換、最後の2桁をmmに変換して「H:mm」形式に変換します。
    また、↑キー、↓キーで、時間を最小入力単位(分)に設定された値分、増減できます。

    例①)入力値「9」→「9:00」
    例②)入力値「911」→「9:11」

    注意

    テキストボックス(時間)は、入力した値によって”0”および”:”を自動補完するイベントをliveで発行しています。
    テキストボックス(時間)のイベント処理を編集する場合は、必ず liveイベント を使用してください。
  • 属性
    本タグライブラリには次の属性が設定可能です。

    属性名 説明 必須
    name
    「name」属性を設定します。
    mode
    表示モードを設定します。
    “0”:<input type=”text”>
    “1”:<label>
    surfaceKey
    項目名用のサーフィスキーを設定します。(エラーメッセージなどで使用します。)
    サーフィスキーを設定することで、プロパティファイルから文字列を取得します。
    サーフィス定義に存在しないキーの場合は、設定された内容をそのまま出力します。
     
    maxHour
    時間の最大値を設定します。
    設定値は「data-kaiden-max-hour」属性に設定します。
    ※省略時は「data-kaiden-max-hour」属性を設定しません。
     
    timeFormat
    時刻表現を指定します。
    “H24”:24時までを表現します。
    “H99”:24時以降も表現します。(午前2時は「26時」と表現します。)
    設定値は「data-kaiden-timeFormat」属性に設定します。
    ※省略時は「BaseSettings.xml」から取得した時刻表現(timeFormat)を使用します。
     
    minutesUnit
    時刻の最小入力単位(分)を設定します
    設定値は「data-kaiden-minutes-unit」属性に設定します。
    ※省略時は「data-kaiden-minutes-unit」属性を設定しません。
     

6.2.1.2.8. テキストボックス(国際化対応) <k:text-locales>

  • 概要
    テキストボックス(国際化対応)用のタグライブラリです。
    本タグライブラリで、テキストボックスをintra-mart Accel Platformが使用するロケール数分表示します。
    intra-mart Accel Platformが使用するロケールが、日本語・英語・中国語3つの場合、次の様なテキストボックスを表示します。

    ../../../_images/text-locales.png

    システムロケールが一つの場合は、テキストボックス <k:text>と同じように表示します。
    ログインユーザのロケールに対応したテキストボックスを先頭に表示し、その他のロケールはIDの昇順で表示します。

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

    属性名 説明 必須
    name
    「name」属性を設定します。
    mode
    表示モードを設定します。
    “0”:<input type=”text”>
    “1”:<label>
    formated
    フォーマットされた項目値の表示方法を設定します。
    “input”:modeが”0”の場合にフォーマットされた項目値を表示します。
    “view” :modeが”1”の場合にフォーマットされた項目値を表示します。
    “both” :modeにかかわらずフォーマットされた項目値を表示します。
     
    imeMode
    IMEモードを設定します。(※IMEモードの対応ブラウザのみ本属性の値が有効です。)
    “on”:フォーカス時にIMEを「active」に設定します。
    “off”:フォーカス時にIMEを「inactive」に設定します。
    “disabled”:フォーカス時にIMEを「disabled」に設定します。
     
    surfaceKey
    項目名用のサーフィスキーを設定します。(エラーメッセージなどで使用します。)
    サーフィスキーを設定することで、プロパティファイルから文字列を取得します。
    サーフィス定義に存在しないキーの場合は、設定された内容をそのまま出力します。
     

6.2.1.2.9. テキストボックス(パスワード) <k:password>

  • 概要
    テキストボックス(パスワード)用のタグライブラリです。

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

    属性名 説明 必須
    name
    「name」属性を設定します。
    mode
    表示モードを設定します。
    “0”:<input type=”password”>
    “1”:<label>
    surfaceKey
    項目名用のサーフィスキーを設定します。(エラーメッセージなどで使用します。)
    サーフィスキーを設定することで、プロパティファイルから文字列を取得します。
    サーフィス定義に存在しないキーの場合は、設定された内容をそのまま出力します。
     

6.2.1.2.10. テキストエリア <k:textarea>

  • 概要
    テキストエリア用のタグライブラリです。

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

    属性名 説明 必須
    name
    「name」属性を設定します。
    mode
    表示モードを設定します。
    “0”:<textarea>
    “1”:<label>
    imeMode
    IMEモードを設定します。(※IMEモードの対応ブラウザのみ本属性の値が有効です。)
    “on”:フォーカス時にIMEを「active」に設定します。
    “off”:フォーカス時にIMEを「inactive」に設定します。
    “disabled”:フォーカス時にIMEを「disabled」に設定します。
     
    surfaceKey
    項目名用のサーフィスキーを設定します。(エラーメッセージなどで使用します。)
    サーフィスキーを設定することで、プロパティファイルから文字列を取得します。
    サーフィス定義に存在しないキーの場合は、設定された内容をそのまま出力します。
     

6.2.1.2.11. テキストエリア(国際化対応) <k:textarea-locales>

  • 概要
    テキストエリア(国際化対応)用のタグライブラリです。
    本タグライブラリで、テキストエリアをintra-mart Accel Platformが使用するロケール数分表示します。
    intra-mart Accel Platformが使用するロケールが、日本語・英語・中国語3つの場合、次の様なテキストエリアを表示します。

    ../../../_images/textarea-locales.png

    システムロケールが一つの場合は、テキストエリア <k:textarea>と同じように表示します。
    ログインユーザのロケールに対応したテキストエリアを先頭に表示し、その他のロケールはIDの昇順で表示します。

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

    属性名 説明 必須
    name
    「name」属性を設定します。
    mode
    表示モードを設定します。
    “0”:<textarea>
    “1”:<label>
    imeMode
    IMEモードを設定します。(※IMEモードの対応ブラウザのみ本属性の値が有効です。)
    “on”:フォーカス時にIMEを「active」に設定します。
    “off”:フォーカス時にIMEを「inactive」に設定します。
    “disabled”:フォーカス時にIMEを「disabled」に設定します。
     
    surfaceKey
    項目名用のサーフィスキーを設定します。(エラーメッセージなどで使用します。)
    サーフィスキーを設定することで、プロパティファイルから文字列を取得します。
    サーフィス定義に存在しないキーの場合は、設定された内容をそのまま出力します。
     

6.2.1.2.12. ドロップダウンリスト <k:select>

  • 概要
    ドロップダウンリスト用のタグライブラリです。

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

    属性名 説明 必須
    name
    「name」属性を設定します。
    mode
    表示モードを設定します。
    “0”:<select>
    “1”:<label>
    surfaceKey
    項目名用のサーフィスキーを設定します。(エラーメッセージなどで使用します。)
    サーフィスキーを設定することで、プロパティファイルから文字列を取得します。
    サーフィス定義に存在しないキーの場合は、設定された内容をそのまま出力します。
     
    viewModeName
    「mode」属性値が“1“の場合の「name」属性を設定します。
     
    dataName
    「option」タグを生成するためのデータ名を設定します。
    リストデータタグなどで生成したデータを指定する場合は、
    リストデータの「name」属性の値を設定します。
     
    includeDisabled
    無効(論理削除)データの「option」タグを生成有無を設定します。
    “true”:データ中の「deleteFlag」が「1」のデータも「option」タグを生成します。
    “false”:データ中の「deleteFlag」が「1」のデータは「option」タグを生成しません。
     
    selectChain
    値の変更イベントで、連動する項目を設定します。
    ※設定方法:selectChain={%コード%:’%キー%’, %コード%:’%キー%’, ...}
    値の変更イベントで、設定したコードを「name」属性に持つ項目の「value」属性に、
    データ中の設定したキーに紐づく値を設定します。
     

6.2.1.2.13. ドロップダウンリスト(シンプル) <k:simpleDropdownMenu>

  • 概要
    ドロップダウンリスト(シンプル)用のタグライブラリです。
    <ul>、<li>の組み合わせにより、一階層のみのシンプルなドロップダウンメニューを表示します。
    メニュークリックなどのイベント処理はありませんので、$(“#id”).on(“click”, function(){...});などでイベント処理を実装してください。

  • 使用例

    <k:simpleDropdownMenu>
      <li><k:a href="javascript:void(0)" mode="0" text="メニュー"/>
        <ul>
          <li><k:a href="javascript:void(0)" mode="0" text="メニュー1" /></li>
          <li><k:a href="javascript:void(0)" mode="0" text="メニュー2" /></li>
          <li><k:a href="javascript:void(0)" mode="0" text="メニュー3" /></li>
          <li><k:a href="javascript:void(0)" mode="0" text="メニュー4" /></li>
        </ul>
      </li>
    </k:simpleDropdownMenu>
    
  • 属性
    本タグライブラリには次の属性が設定可能です。

    属性名 説明 必須
    dropWidth
    横幅を指定します。
     

6.2.1.2.14. チェックボックス <k:checkbox>

  • 概要
    チェックボックス用のタグライブラリです。

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

    属性名 説明 必須
    name
    「name」属性を設定します。
    mode
    表示モードを設定します。
    “0”:<input type=”text”>
    “1”:<label>
    label
    ラベル用のサーフィスキーを設定します。
    本属性に値を設定した場合は、次の様に出力します。
    <label><input type=”checkbox” />本属性値</label>
     
    surfaceKey
    項目名用のサーフィスキーを設定します。(エラーメッセージなどで使用します。)
    サーフィスキーを設定することで、プロパティファイルから文字列を取得します。
    サーフィス定義に存在しないキーの場合は、設定された内容をそのまま出力します。
     

6.2.1.2.15. アンカー <k:a>

  • 概要
    アンカー用のタグライブラリです。

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

    属性名 説明 必須
    mode
    表示モードを設定します。
    “0”:<a>
    “1”:非表示(何も出力しません)
    text
    リンク名用のサーフィスキーを設定します。
    サーフィスキーを設定することで、プロパティファイルから文字列を取得します。
    サーフィス定義に存在しないキーの場合は、設定された内容をそのまま出力します。
     

6.2.1.2.16. ボタン <k:button>

  • 概要
    ボタン用のタグライブラリです。

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

    属性名 説明 必須
    name
    「name」属性を設定します。
    mode
    表示モードを設定します。
    “0”:<input type=”button”>
    “1”:非表示(何も出力しません)
    value
    ボタン名用のサーフィスキーを設定します。
    サーフィスキーを設定することで、プロパティファイルから文字列を取得します。
    サーフィス定義に存在しないキーの場合は、設定された内容をそのまま出力します。
     

6.2.1.2.17. ラジオボタン <k:radio>

  • 概要
    ラジオボタン用のタグライブラリです。

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

    属性名 説明 必須
    name
    「name」属性を設定します。
    mode
    表示モードを設定します。
    “0”:<input type=”radio”>
    “1”:<label>
    label
    ラベル用のサーフィスキーを設定します。
    本属性に値を設定した場合は、次の様に出力します。
    <label><input type=”radio” />属性値</label>
     
    surfaceKey
    項目名用のサーフィスキーを設定します。(エラーメッセージなどで使用します。)
    サーフィスキーを設定することで、プロパティファイルから文字列を取得します。
    サーフィス定義に存在しないキーの場合は、設定された内容をそのまま出力します。