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

5.10.7 画面部品の定義(マッシュアップ開発例)

“ユーザデータの定義(マッシュアップ開発例)”でユーザデータを定義した画面フォームに、Ajaxページエディタを利用して、画面部品の定義を記述します。
Ajaxページエディタの操作方法については、“Ajaxページエディタ”を参照してください。

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

■認証部の機能定義とUI部品定義

機能定義の記述内容

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

UI部品定義の記述内容

<div rcf:id="authinfoContainer" rcf:type="ViewStack" rcf:width="700px" rcf:height="50px"
 style="left: 0px; top: 5px; position: absolute" rcf:selectedIndex="0">
  <!-- ログイン認証前 -->
  <div rcf:id="beforeauthContainer" rcf:type="ViewContainer" rcf:label="ログイン認証前"
   rcf:width="620px" rcf:height="30px" style="left: 5px; top: 10px; position: absolute">
    <!-- 認証部のUI部品定義とモデルバインディング -->
    <div id="before_div"
     style="visibility: hidden; width: 620px; height: 30px; left: 0px; top: 0px; position: absolute">
      
      <div rcf:id="label_userid" rcf:type="Text" rcf:value="ユーザID"
       style="left: 5px; top: 8px; position: absolute"></div>
      <!-- userid入力 テキスト入力フィールド定義 -->
      <div rcf:id="userid" rcf:type="TextInput" rcf:width="155px" rcf:height="20px"
       style="left: 80px; top: 5px; position: absolute" rcf:value="{authinfoModel.userid}"></div>  (1) 
      <div rcf:id="label_password" rcf:type="Text" rcf:value="パスワード"
       style="left: 260px; top: 8px; position: absolute"></div>
      <!-- password入力 テキスト入力フィールド定義 -->
      <div rcf:id="password" rcf:type="TextInput" rcf:width="155px" rcf:height="20px"
       style="left: 340px; top: 5px; position: absolute" rcf:value="{authinfoModel.password}"      (2)
       rcf:password="true"></div>
      <!-- ログインボタン定義 -->
      <div rcf:id="loginButton" rcf:type="Button" rcf:label="ログイン"
       rcf:width="80px" rcf:height="24px" style="left: 515px; top: 5px; position: absolute"></div>
      
    </div><!-- id="before_div" -->
  </div>

  <!-- ログイン認証後 -->
  <div rcf:id="afterauthContainer" rcf:type="ViewContainer" rcf:label="ログイン認証後"
   rcf:width="620px" rcf:height="30px" style="left: 5px; top: 10px; position: absolute">
    <!-- 認証部のUI部品定義とモデルバインディング -->
    <div id="after_div"
     style="visibility: hidden; width: 620px; height: 30px; left: 0px; top: 0px; position: absolute">
     
      <!-- userid テキストフィールド定義 -->
      <div rcf:id="userid_Text" rcf:type="Text" rcf:value="        "
       style="left: 5px; top: 8px; position: absolute"></div>
      <div rcf:id="label_message" rcf:type="Text" rcf:value=" さん、こんにちは。認証されました。"
       style="left: 50px; top: 8px; position: absolute"></div>
      <!-- ログアウトボタン定義 -->
      <div rcf:id="logoutButton" rcf:type="Button" rcf:label="ログアウト"
       rcf:width="80px" rcf:height="24px" style="left: 515px; top: 5px; position: absolute"></div>
      
    </div><!-- id="after_div" -->
  </div>

</div>

1) モデルオブジェクトauthinfoModelのuseridプロパティをTextInputの値にバインディング
2) モデルオブジェクトauthinfoModelのpasswordプロパティをTextInputの値にバインディング

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

機能定義の記述内容

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

UI部品定義の記述内容

<!-- 一覧部のUI部品定義とモデルバインディング -->
<div rcf:id="list_Title" rcf:type="Text" rcf:value="公開カレンダ（認証不要）"
 style="left: 10px; top: 70px; position: absolute" rcf:fontWeight="bold"></div>

<div rcf:id="list" rcf:type="TableView" rcf:width="610px" rcf:height="200px"
 style="left: 10px; top: 95px; position: absolute" rcf:data="{listModel.list}"                   (1)
 rcf:showRowHeader="true" rcf:multipleSelect="false" rcf:showDummyColumn="false">
    <div rcf:type="ViewColumn" rcf:name="date" rcf:label="日付" rcf:columnWidth="120"></div>        (2)
    <div rcf:type="ViewColumn" rcf:name="timerange" rcf:label="時間帯" rcf:columnWidth="120"></div> (2)
    <div rcf:type="ViewColumn" rcf:name="subject" rcf:label="予定" rcf:columnWidth="220"></div>     (2)
    <div rcf:type="ViewColumn" rcf:name="secret" rcf:label="Private" rcf:columnWidth="90"></div>    (2)
</div>

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