5.9.4 画面部品の定義(開発例)

「5.9.3 ユーザーデータの定義(開発例)」でユーザーデータを定義した画面フォームに、Interstage StudioワークベンチのJSPエディタを利用して、画面部品の定義を記述します。
Interstage Studioワークベンチの操作方法については、「5.7.3 画面フォームの編集」を参照してください。

画面部品の定義では、ユーザーデータをモデルとして利用するための機能定義と、UI部品を使用するための定義を記述します。

条件部の機能定義とUI部品定義

機能定義の記述内容

<!-- 条件部のユーザーデータをモデルとして利用するための機能定義 -->
<div rcf:type="Model" rcf:id="conditionModel" rcf:object="conditionData"></div>

UI部品定義の記述内容

<!-- 条件部のUI部品定義とモデルバインディング -->
<table width="100%">
 <tbody>
  <tr>
   <td>顧客</td>
   <!-- 顧客名入力 テキスト入力フィールド定義 -->
   <td>
    <span rcf:type="TextInput" rcf:id="customer" rcf:value="{conditionModel.customer}"></span>  (1)
   </td>
   <td>担当者</td>
   <!-- 担当者名入力 テキスト入力フィールド定義 -->
   <td>
    <span rcf:type="TextInput" rcf:id="charge" rcf:value="{conditionModel.charge}"></span>      (2)
   </td>
  </tr>
  <tr>
   <td>受注日</td>
   <td colspan="3">
    <!-- 受注日(開始日)入力 日付入力フィールド定義 -->
    <span rcf:type="DateInput" rcf:id="fromDate" rcf:date="{conditionModel.fromDate}"></span>   (3)
    <!-- 受注日(開始日)入力 カレンダ定義 -->
    <div rcf:type="PopupCalendar"
     rcf:id="fromDateCalendar" rcf:selectedDate="{conditionModel.fromDate}"></div>              (4)
    <!-- 受注日(開始日)入力 カレンダ呼出ボタン定義 -->
    <span rcf:type="CalendarButton" rcf:target="fromDateCalendar"></span>                       (5)
     ～
    <!-- 受注日(終了日)入力 日付入力フィールド定義 -->
    <span rcf:type="DateInput" rcf:id="toDate" rcf:date="{conditionModel.toDate}"></span>       (6)
    <!-- 受注日(終了日)入力 カレンダ定義 -->
    <div rcf:type="PopupCalendar"
     rcf:id="toDateCalendar" rcf:selectedDate="{conditionModel.toDate}"></div>                  (4)
    <!-- 受注日(終了日)入力 カレンダ呼出ボタン定義 -->
    <span rcf:type="CalendarButton" rcf:target="toDateCalendar"></span>                         (5)
   </td>
  </tr>
 </tbody>
</table>

1) モデルオブジェクトconditionModelのcustomerプロパティをTextInputの値にバインディング
2) モデルオブジェクトconditionModelのchargeプロパティをTextInputの値にバインディング
3) モデルオブジェクトconditionModelのfromDateプロパティをDateInputの値にバインディング
4) カレンダで選択した日付を反映する入力フィールドを、バインディング式を介して関連付け
5) カレンダボタンで表示するカレンダを関連付け
6) モデルオブジェクトconditionModelのtoDateプロパティをDateInputの値にバインディング

一覧部の機能定義とUI部品定義

機能定義の記述内容

<!-- 一覧部のユーザーデータをモデルとして利用するための機能定義 -->
<div rcf:type="Model" rcf:id="listModel" rcf:object="listData"></div>

UI部品定義の記述内容

<!-- 一覧部のUI部品定義とモデルバインディング -->
<div rcf:id="list" rcf:type="TableView" rcf:data="{listModel.list}"            (1)
  rcf:showRowHeader="true" rcf:width="700px" rcf:height="200px"
  rcf:multipleSelect="false">
    <div rcf:type="ViewColumn" rcf:name="orderNo" rcf:label="受注番号"></div>   (2)
    <div rcf:type="ViewColumn" rcf:name="orderDate" rcf:label="受注日"></div>   (2)
    <div rcf:type="ViewColumn" rcf:name="customer" rcf:label="顧客名"></div>    (2)
    <div rcf:type="ViewColumn" rcf:name="charge" rcf:label="担当者名"></div>    (2)
</div>

1) モデルオブジェクトlistModelのlistプロパティをTableViewの値にバインディング
2) 列情報(1行分のデータ項目)を定義