“5.11.6 ユーザデータの定義(マッシュアップ開発例)”でユーザデータを定義した画面フォームに、Ajaxページエディタを利用して、画面部品の定義を記述します。
Ajaxページエディタの操作方法については、“付録F 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行分のデータ項目)を定義