Ajaxフレームワーク ユーザーズガイド

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

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

画面部品の定義では、ユーザデータをモデルとして利用するための機能定義と、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></td>               (1)
   <td>担当者</td>
   <!-- 担当者名入力 テキスト入力フィールド定義 -->
   <td><span rcf:type="TextInput" rcf:id="charge" rcf:value="{conditionModel.charge}"></span></td>                   (2)
  </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:backgroundColor="#ffffff" 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行分のデータ項目)を定義