リストビルダー

2つのリストボックス(<select multiple>)間での要素移動を可能とするUI部品。 基本的には、一方のリストボックスの要素から、任意個の要素を選択する目的で使用する。

リストビルダーは、次の3つの要素によって構成される。

1. 選択元リストボックス
2. 各種ボタンを配置するコントロール部
3. 選択先リストボックス

マークアップ仕様

コントロール部に相当する <div> 要素にマーカCSS nablarch_ListBuilder を指定する。 また、選択元リストボックス および 選択先リストボックス のID属性を、 同じCSSに以下のように指定する。

<div class="nablarch_ListBuilder
            -from (選択元リストボックスのID属性)
            -to   (選択先リストボックスのID属性)">
</div>

実装例 (HTML) 以下はHTMLの記述例である。 コントロール部の内容は、テンプレートファイル(/js/nablarch/ui/ListBuilder.txt) の内容が 出力されるので各画面で記述する必要はない。

<!-- 選択元リスト -->
<select
  id       = "permissionUnit_from"
  multiple = "true"
  size     = "10">
</select>

<!-- コントロール部分 -->
<div class="nablarch_ListBuilder
            -from permissionUnit_from
            -to   permissionUnit_to">
</div>

<!-- 選択先リスト -->
<select
  id       = "permissionUnit_to"
  multiple = "true"
  size     = "10">
</select>

実装例 (JSP) 以下はJSPの記述例である。

リストビルダーの選択状態は、初期ロード時とサブミット処理時に送信元リストボックスに反映されるので、 サーバ側から見たリストビルダーの扱いは、通常のリストボックスと全く同じものとなる。 このため、JSPを記述する場合は、選択元リストを通常どおり <n:select> などを使用して出力し、 選択先リストについては空の <select> タグを記述しておけばよい。

<%-- 選択元リスト --%>
<n:select
  id       = "permissionUnit_from"
  name     = "W11AC02.systemAccount.permissionUnit"
  multiple = "true"
  size     = "10"
  listName = "allPermissionUnit"
  elementLabelProperty = "permissionUnitName"
  elementValueProperty = "permissionUnitId"
  elementLabelPattern  = "$LABEL$"
/>
<%-- コントロール部分--%>
<div class="nablarch_ListBuilder
           -from permissionUnit_from
           -to   permissionUnit_to">
</div>
<%-- 選択先リスト --%>
<select
  id       = "permissionUnit_to"
  multiple = "true"
  size     = "10">
</select>