文章入力
文章を入力するためのDijitウェブフォーム要素のEditorとTextareaを紹介します。
| クラス名 | 必要なモジュール | 説明 |
| Editor | dijit.Editor | リッチなテキストも編集できるテキストエリア |
| Textarea | dijit.form.Textarea | 入力された文章によって長さが伸びるテキストエリア |
文章入力Dijitのサンプルを図6に示します。
これらを利用するサンプルがリスト9です。
//文章を入力するためのDijit
$dojo->requireModule('dijit.Editor');
$form->addElement('Editor','Editor',
array('label'=>'Editor'
)
);
$dojo->requireModule('dijit.form.Textarea');
$form->addElement('Textarea','Textarea',
array('label'=>'Textarea',
'style'=>'width:10em;'//（1）
)
);
Textareaの縦の幅は自動的に調整されるため、指定することはできませんが、リスト9の（1）のように横の幅は指定することができます。
| クラス名 | パラメータ名 | 説明 |
| 共通 | label | ラベル |
| style | テキストエリア内のテキストのスタイル |
スライダー
数値を入力するためのDijitウェブフォーム要素であるスライダーの紹介をします。スライダーは最小値と最大値の間のある数を選ぶためのウェブフォーム要素で、目盛の上をボタンのようなものをスライドさせることで値を選びます。
| クラス名 | 必要なモジュール | 説明 |
| HorizontalSlider | dijit.form.Slider | 水平スライダー |
| VerticalSlider | dijit.form.Slider | 垂直スライダー |
スライダーのサンプルを図7に示します。
スライダーを利用した例がリスト10です。一見して分かるとおり、指定できるパラメータがたくさんありますが、この中でも特に「minimum」「maximum」「discreteValues」の3つのパラメータは必須となっています。
$dojo->requireModule('dijit.form.Slider');
$form->AddElement('VerticalSlider',
'VerticalSlider',
array(
'label' => 'VerticalSlider',
'style' => 'height: 200px; width: 5em;',
'minimum' => -10, //
'maximum' => 10, //必須パラメータ （1）
'discreteValues' => 5, //
'value' => 5,
'intermediateChanges' => true,
'showButtons' => true,
//ここからは目盛などの左右の飾りの指定（2）
'leftDecorationDijit' => 'VerticalRule',
'leftDecorationContainer' => 'leftContainer',
'leftDecorationLabels' => array(
'', '20%', '40%', '60%', '80%', '',
),
'leftDecorationParams' => array(
'count'=>'5',
'style'=>'width:1.2em;font-size:75%;',
)));
また、リスト10の（2）以降はスライダーの両側につける目盛などの飾りの指定を行っています。この例ではスライダーの左側につける飾りの指定を行っていますが、垂直スライダーの場合にはこの他にも右側にも飾りをつけることができます。
| パラメータ名 | 説明 |
| label | ラベル |
| minimum | スライダーの最小値 |
| maximum | スライダーの最大値 |
| discreteValues | スライダーがいくつの異なる値を取れるか |
| value | 初期値 |
| intermediateChanges | スライダーの値を変化させている間（ドラッグしている間）もJavaScriptのonChangeを呼び出すか |
| showButtons | スライダーの端点に、値を上下させるためのボタンを表示するか |
また、左右につける「飾り」についてはそれぞれ、leftDecoration～、rightDecoration～というDijitパラメータで指定します。同様に、HorizontalSliderの場合には、topDecotaion～、bottomDecoration～で上下につける飾りについて指定します。
テキスト選択
ComboBoxとFilteringSelectは与えられたいくつかの選択肢から値を選ぶためのDijitウェブフォーム要素です。FilteringSelectは与えられた値以外から選べないのに対し、ComboBoxはユーザーからの任意の入力も受け付けます。
| クラス名 | 必要なモジュール | 説明 |
| ComboBox | dijit.form.ComboBox | ユーザーからの任意の入力も受け付けるテキスト選択 |
| FilteringSelect | dijit.form.FilteringSelect | 与えられた値以外の値はエラーにするテキスト選択 |
まず、CobmoBoxのサンプルを図8に示します。
このように、ComboBoxではメニューからテキストを選択することもできますし、新しい候補を直接入力することもできます。一方で、FilteringSelectでは、あらかじめメニューにある値以外は無効となります（図9）。
このうち、FilteringSelectを利用した例がリスト11です。
$dojo->requireModule('dijit.form.FilteringSelect');
$form->addElement('FilteringSelect','FilteringSelect',
array('label'=>'FilteringSelect',
'value'=>'alpha',
'autocomplete'=>false,//（1）
'multiOptions'=>array('alpha'=>'A', 'beta'=>'B'),
)
);
リスト11の（1）でautocompleteをfalseにしていますが、ここの値がtrueの場合、ユーザーが値を入力する際に、その入力に合う候補を表示します。
| パラメータ名 | 説明 |
| label | ラベル |
| value | 初期値 |
| autocomplete | ユーザーが入力している最中に、候補を表示するか |
| multiOptions | 選択肢、選択時の値と表示される内容が格納された配列 |
| storeId | （ストアを利用する場合指定）ストアの名前 |
| storeType | （ストアを利用する場合指定）ストアの種類 |
| storeParams | （ストアを利用する場合指定）ストアに渡すパラメータの配列、ストアに「dojo.data.ItemFileReadStore」を利用する場合にはデータの置かれているURLを与える |
| dijitParams | （ストアを利用する場合指定）その他のDijitのパラメータ、 ストアに「dojo.data.ItemFileReadStore」を利用する場合は利用するデータ鍵を指定する |
