| Ajaxフレームワーク UI部品リファレンス |
|
目次
索引
|
| 第1章 UI部品の概要 | > 1.3 UI部品の使い方 |
AjaxフレームワークではMVCモデルを採用しており、画面部品(V)とモデル(M)を分離しています。モデルを定義する場合、サーバ側に1回の送信で送る必要があるデータを、まとめて1個のモデルとして定義することをお勧めします。
以下に、従来のHTMLで記述した場合と、Ajaxフレームワークで記述した場合の例を示します。
従来のHTMLでは、<FORM>タグで囲むことにより、サーバ側に送信するデータの単位を示していました。
Ajaxフレームワークでは、モデルを定義し、各フォーム部品にバインディング式を記述することによって、JavaScriptのオブジェクトと画面部品の入力データが同期します。このJavaScriptのオブジェクトを、従来のHTMLでの記述と同様にサーバ側に送信するデータ単位にしておくことで、サーバへの送信時におけるデータ取得や加工の手間を削減することができます。
モデルオブジェクトとバインディングされるフォーム部品のプロパティは、以下のとおりです。
|
部品名 |
プロパティ名 |
説明 |
|---|---|---|
|
TextInput |
value |
入力されたテキスト(String) |
|
CheckBox |
checked |
選択状態(Boolean) |
|
RadioButton |
checked |
選択状態(Boolean) |
|
TextArea |
value |
入力されたテキスト(String) |
|
Select |
selectedValue |
単一選択により選択された項目(String) |
|
selectedValues |
複数選択により選択された項目(Stringの配列) |
|
|
ComboBox |
value |
入力されたテキスト(String) |
|
DateInput |
date |
入力された日時データ(Date) |
|
NumberInput |
number |
入力された数値データ(Number) |
|
MaskedTextInput |
value |
入力されたテキスト(String) |
|
MaskedDateInput |
date |
入力された日時データ(Date) |
|
SelectList |
selectedIndex |
単一選択により選択された項目のインデックス(Number) |
|
selectedIndexes |
複数選択により選択された項目のインデックス(Numberの配列) |
|
|
CheckList |
selectedIndex |
単一選択により選択された項目のインデックス(Number) |
|
selectedIndexes |
複数選択により選択された項目のインデックス(Numberの配列) |
|
|
CheckBoxGroup |
selectedValues |
選択されたCheckBoxの値(Stringの配列) |
|
RadioButtonGroup |
selectedValue |
選択されたRadioButtonの値(String) |
|
目次
索引
|