Dijitウェブフォーム要素
Dojo Toolkitにはウェブフォームの要素として使えるDijitがあり、Zend_Dojoからはそれらのうち18個を生成するためのメソッドが準備されています。これらにはSpinnerのように通常のHTMLでは実現できないようなものや、NumberTextBoxのように入力のチェックをしてくれるものなどがあります。これらを利用したサンプルはhttp://localhost/index/formで表示されます。
なお、今回はDijitウェブフォーム要素をDijitウェブフォーム内で使う方法を中心に説明しますが、Dijitのウェブフォーム要素は単体でページ内の部品として使うこともできます。この場合にはZend_Dojoビューヘルパのメソッドを利用して作成することになります。その場合の引数は、すべてのメソッドで共通となります。
引数 | 説明 |
$id | オブジェクトのID |
$value | オブジェクトの初期値 |
$params | Dijitオブジェクトとしてのパラメータの配列 |
$attribs | それ以外のタグ属性の配列 |
(返り値) | このオブジェクトをHTMLに変換したもの |
例えば前編のサンプルでも利用したComboBoxですが、これをもう少し詳しく見てみます(リスト5)。
$combobox = $view->combobox(//クラス名 'combobox',//オブジェクトのID (1) 'alpha', //オブジェクトの初期値 (2) array('store' => 'cboxStore', 'storeType' => 'dojo.data.ItemFileReadStore', 'storeParams' => array( 'url' => $url, ), //Dijit関係のパラメータ(3) 'searchAttr' => 'name' ), //それ以外の属性 (4) );
ここで(1)がこのComboBoxのID、(2)はComboBoxの初期値となっています。(3)で与えられた配列にはこのComboBoxのDijitとしてパラメータが配列で与えられています。(4)ですが、それ以外の属性についてはこの場合は必要なかったので省略されています。(3)(4)については、省略された場合には空の配列(array()
)が標準の値となります。
Dijit対応のウェブフォームの作成
ここまでは、Dijitウェブフォーム要素を単体で利用する方法についての説明でした。次に、ここまでのDijitウェブフォーム要素とZend_Formを連携させる方法(つまり、Dijitを使うことを前提にしたウェブフォームを作成する方法)について説明します。これには2つ方法があります。
- 専用のクラス、
Zend_Dojo_Form
を使う - 通常のZend_Formのインスタンスを作成し、
Zend_Dojo
クラスの静的メソッドenableForm
でZend_Dojoに対応させる
ちなみに、Zend_Dojoに必要なデコレータなどの設定を手動で行う方法もあります。これは(1)の方法が内部でやっていることと同じで、あまりメリットがないので考えないことにします。
これらの方法をリスト6に示します。
$this->view->dojo()->requireModule('dijit.form.Form'); //Zend_Dojoに対応した専用クラスを使う(1) $form = new Zend_Dojo_Form; //通常のZend_FormをDojo対応に設定する(2) //$form = new Zend_Form; //Zend_Dojo::enableForm($form);
Zend_Dojo_Form
クラスはZend_Form
クラスをそのまま置き換えられるように設計されているため、通常はどちらの方法を使っても問題はありません。ただし、既にZend_Formと互換のある別のカスタムクラスを利用している場合には(1)の方法は使えませんので(2)の方法を使う必要があります。
このように作成したウェブフォームのインスタンスのaddElement
メソッドを利用してDijitウェブフォーム要素を作成することができます。
$form->addElement('Button', //クラス名 'okButton', //オブジェクトのID array('label' => 'ボタン'), //Dijitパラメータ //(ここのValueでオブジェクトの初期値を指定することができます) );
それでは、Dijitの各ウェブフォーム要素の紹介をします。
ボタン
まずはボタン関係のDijitウェブフォーム要素4つの紹介をします。これらのDijitウェブフォーム要素はデザインが洒落ていますが、機能としては通常のHTMLのものと同じです。
クラス名 | 必要なモジュール | 説明 |
Button | dijit.form.Button | 通常のHTMLのボタン |
SubmitButton | dijit.form.Button | 送信ボタン(これはDijitの機能ではなく、Zend_Dojoの機能) |
CheckBox | dijit.form.CheckBox | 選択されている・いないの二つの状態を持つボタン |
RadioButton | dijit.form.CheckBox | 複数の選択肢から排他的に一つを選ぶためのボタン |
これらのボタンDijitのサンプルを図5に示します。
これらのうち、CheckBoxとRadioButtonを利用する例がリスト8です。
$dojo->requireModule('dijit.form.CheckBox'); $form->addElement('CheckBox', 'ifreadbook', array('label'=>'CheckBox', 'checkedValue' => 'read',//(1) 'uncheckedValue' => 'unread',//(2) 'checked' => true,//(3) ) ); $form->addElement('RadioButton', 'RadioButton', array('label'=>'RadioButton', 'multiOptions'=>array('alpha'=>'A', 'beta'=>'B'),//(3) 'value'=>'beta', ) );
リスト8の(1)はこのCheckBoxがチェックされていた場合の、(2)はされていなかった場合に送信される値となっています。また(3)の「multiOptions」はこのRadioButtonの各選択肢の値と表示の配列で、この場合はalphaとbetaが選択肢の値、AとBが表示される選択肢となります。
クラス名 | パラメータ名 | 説明 |
共通 | label | ラベル |
CheckBox | chekedValue | ボタンがチェックされているときの値 |
uncheckedValue | ボタンがチェックされていないときの値 | |
checked | 初期状態でチェックされているか(true, false) | |
RadioButton | multiOptions | 各オプションについての、選択時の値と表示される内容が格納された配列 |