Dojoフォーム要素とデコレーターdijit表示ヘルパーに基き、 クラスのZend_Dojo_Formファミリーは、 あなたのフォームの範囲内でネイティブにDijitsを利用する能力を提供します。 フォームでDojoフォーム要素を利用するために3つの選択肢があります:
Example #1 既存のフォームでDojoを使用可能にする "ちょっと待って" とあなたは言います; "私は、自分自身のカスタム・フォーム・クラスでZend_Formをすでに拡張しています! どのようにしたら、Dojoを使用できますか?" 初めに、 Zend_Formの拡張から Zend_Dojo_Formの拡張への 最も簡単で単純な変更は Zend_Form_SubFormのインスタンス化を行う箇所を全て Zend_Dojo_Form_SubFormのインスタンス化を行うように 更新することです。 2つ目の方法はカスタムフォームの init()メソッドの中で Zend_Dojo::enableForm()を呼び出すことです; フォームの定義を完了させるときは、 Dojoを使用可能にするためにサブフォーム全てを通じて繰り返します:
dijitに特有のフォームデコレーターと要素の使い方は まるで他全てのフォーム・デコレーターまたは要素の使い方のようです。 Dijit に特有のフォーム・デコレーター大部分のフォーム要素は Dijit 要素デコレーター (要素から dijit パラメータをとって来ます) を使うことができ、 要素で特定されたビュー・ヘルパーに、 これらと他のメタデータを渡せます。 しかしながら、フォームやサブ・フォーム及び表示グループをデコレートするために、 いろいろなレイアウト dijits に該当するデコレーターのセットがあります。 dijitデコレーターの全てで、 デコレートされた与えられた要素の dijitParams プロパティを探して、 $params 配列として使用される dijit ビュー・ヘルパーに押し付けます; それから、情報の重複が起こらないように、これらは他のどの特性からも分離されます。 Dijit 要素デコレーターちょうど View ヘルパ・デコレーターのように、 レンダリングのときにビュー・ヘルパーとして使用される要素で、 Dijit 要素は helper プロパティを予期します。 Dijit パラメータは一般的に直接要素から引き出されますが、 dijitParams キー(そのキーの値は、任意の連想配列でしょう)による、 オプションとして渡されるかもしれません。 各々の要素がユニークな ID (要素の getId() メソッドから取得されるように) を持つことは、重要です。 繰り返しが dojo() ビュー・ヘルパーの範囲内で検出されるならば、 デコレーターは通知の引き金を引いて、 識別子に uniqid() からの戻りを追加することによってユニークな ID を作成します。 標準的な使用法では、 単純に最初にデコレーター・チェーンにこのデコレーターを 追加オプションなしで、結びつけます。 Example #2 Dijit 要素デコレーターの使用法
Dijit フォーム・デコレーターDijit フォーム・デコレーターは、 フォーム・デコレーターと非常に似ています; 実際、それが 同じビュー・ヘルパー名 ('form') を利用するので、実際、基本的に入れ替えて使うことができます。 設定のために dijit.form.Form は少しも dijit パラメータを必要としないので、 プログラムされた dijit の生成が確実に機能できるように、 DOM ID が渡される dijit フォーム・ビュー・ヘルパーが必要とすることが主な違いです。 識別子としてフォーム名を渡すことによって、デコレーターはこれを確実にします。 DijitContainer ベースのデコレーターDijitContainer デコレーターは、実は、 いろいろな他のデコレーターが由来する抽象クラスです。 タイトル・サポートの追加で、それは Dijit要素 の同じ機能を提供します。 多くのレイアウト dijit はタイトルを要求するか、利用できます; 利用できるのであれば、 DijitContainer は要素の説明プロパティを利用して、 渡されるならば、 'legend' もしくは 'title' デコレーター・オプションのどちらかを利用することもできます。 対応する翻訳による翻訳アダプターが存在するならば、タイトルは翻訳されます。 以下は、 DijitContainer から継承するデコレーターの一覧です:
Example #3 Dijit コンテナ・デコレーター使用法
Dijit固有のフォーム要素注意:このドキュメントでは、英語版のリビジョン 21357,21358 の更新内容をスキップしています。 ビュー・ヘルパーが提供される各々のフォームdijitには、 対応するZend_Form要素があります。 dijitパラメータを操作するための以下のメソッドがそれらすべてにあります:
Dijitパラメータは、dijitParams public プロパティに保存されます。 このように、あなたは単にこのプロパティを要素の上に置くことによって、 既存のフォーム要素をdijit使用可能にすることができます; あなたは、単にパラメータを操作するのを容易にするために、 上記のアクセッサを持っていません。 その上、dijit固有の要素は以下に該当するデコレーターの独特な一覧を実装します: 実質的に、Dijit要素が、標準的なViewHelperデコレーターの代わりに使われます。 最後に、ベースDijit要素により、 確実にDojoビュー・ヘルパー・パスがビューの上に置かれることになります。 Dijit要素、DijitMultiの変化はMulti abstract フォーム要素の機能を提供します。 そして、開発者が 'multiOptions' を指定できるようにします。 - 一般的に select の option またはラジオ のoptionです。 以下のdijit要素は、標準的なZend Framework配布において出荷されます。 ボタン標準的なボタン要素に 由来していないので、 同じ機能を実装して、ドロップインの代わりとして使うことができます。 以下の機能が公開されます:
さらに、デコレーターのDijitElement及び DtDdWrapperだけがボタン要素のために使われます。 Example #4 ボタンdijit要素の使用例
チェックボックス標準的なチェックボックス要素 に由来していないので、 それは同じ機能を実装します。 これは、以下のメソッドが公開されることを意味します
Example #5 チェックボックスdijit要素の使用例
コンボボックス及びフィルタリング選択コンボボックス dijitビュー・ヘルパー・文書 にみられるように、コンボボックスは選択とテキスト入力の混合です。 そして、自動補完及び、提示された選択肢の代わりを指定できるようにします。 フィルタリング選択は同じことですが、任意の入力を許しません。
コンボボックスとフィルタリング選択フォーム要素は、 dojo.dataデータ・ストア(使用された場合)を指定することだけでなく、 選ばれた選択肢を調べて、セットするためにアクセッサとミューテーターを提供します。 それらはDijitMultiから拡張します。 そして、それは setMultiOptions()及び setMultiOption()メソッドによって 選ばれた選択肢を指定できます。 さらに、以下のメソッドを利用できます:
dojo.dataストアが要素で登録されなければ、 登録された選択肢の配列のキーを検証するInArrayバリデーターを この要素はデフォルトで登録します。 setRegisterInArrayValidator(false)を呼び出すことでも、 registerInArrayValidator設定キーにFALSE値を渡すことでも、 このふるまいを抑制できます。 Example #6 コンボボックスdijit要素を選択肢入力として使う Example #7 コンボボックスdijit要素をデータ・ストアと一緒に使う 前述の例はComboBoxの代わりに FilteringSelectを使用します。 通貨テキストボックス通貨テキストボックスは、主に通貨入力をサポートするためにあります。 通貨はローカライズされるかもしれず、小数も非小数もサポートできます。 内部的には、通貨テキストボックスは 数値テキストボックスや バリデーションテキストボックスおよび テキストボックスに由来します; それらのクラスのメソッドが全て利用可能です。 さらに、下記の制約メソッドを使用できます:
Example #8 通貨テキストボックスdijit要素の使用例
日付テキストボックス日付テキストボックスは、 カレンダー・ドロップダウンで日付(クライアント側日付確認とフォーマッティングだけでなく) を選ぶために提供します。 内部的に、日付テキストボックスは バリデーションテキストボックス およびテキストボックス に由来します; それらのクラスのメソッドが全て利用可能です。さらに、 個別の制約を設定するために下記のメソッドを使用できます:
Example #9 日付テキストボックスdijit要素の使用例
エディタエディタはリッチなHTML内容を作成して、 編集するために利用できるWYSIWYGエディタを提供します。 dijit.Editorはプラグイン可能で、 必要に応じてカスタム・プラグインで拡張されるかもしれません; 詳しくは» dijit.Editorドキュメントをご覧下さい。 エディタ・フォーム要素は、 下記のいくつかのアクセッサとミューテーターを いろいろなdijitパラメータを操作するために提供します:
Example #10 エディタdijit要素の使用例
水平スライダー水平スライダーは、 ある範囲で数値を選択するためのスライダーUI部品を提供します。 内部的には、それはフォームによって送信されるhidden要素の値をセットします。 水平スライダーは、抽象的なスライダーdijit要素に由来します。 さらに、スライダー罫線と罫線ラベルをセットして設定するための、 いろいろなメソッドがあります。
Example #11 水平スライダーdijit要素の使用例 下記では、-10から10の間の整数を選択する水平スライダーを生成します。 上側には20%、40%、60%そして80%で印をつけられたラベルがあります、 下側には、0、50%そして100%の罫線があります。 値が変わるたびに、値を保存しているhidden要素は更新されます。
数スピナー数スピナーは、数値を入力するためのテキスト要素です; 設定された量によって値を増加させたり、減少させるための要素を含みます。 下記のメソッドが利用できます:
Example #12 数スピナーdijit要素の使用例
数テキストボックス数テキストボックスは、数を入力するためのテキスト要素です; 数スピナーとは異なり、数は手で入力します。 バリデーションと制約は、 数が特定の範囲または形式にとどまることを確実とするために提示できます。 内部的には、数テキストボックスはバリデーションテキストボックス 及びテキストボックスに由来します; それらのクラスのメソッドが全て利用可能です。さらに、 個別の制約を設定するために下記のメソッドを使用できます:
パスワードテキストボックスパスワードテキストボックスは、 パスワード入力のみに結び付けられたバリデーションテキストボックスです; その唯一の目的は、dijitテーマを与えられたテキスト入力を クライアント側バリデーションを提示するパスワードのためにできるようにすることです。 内部的には、パスワードテキストボックスはバリデーションテキストボックス 及びテキストボックス に由来します; それらのクラスのメソッドが全て利用可能です。 Example #14 パスワードテキストボックスの使用例
ラジオボタンラジオボタンは、他のDojo dijitと一貫したルック&フィールを提示するために、 標準的なラジオ入力要素をラップします。 ラジオボタンはDijitMultiから拡張します。 そして、 setMultiOptions()及び setMultiOption()メソッドによって 選ばれた選択肢を指定できます。 デフォルトでこの要素は、 配列に対して登録された選択肢のキーを確認するInArrayバリデーターを登録します。 setRegisterInArrayValidator(false)または registerInArrayValidatorのどちらを呼び出しても、 設定キーにFALSE値を渡すことによってこのふるまいを抑制できます。 シンプルテキストエリアシンプルテキストエリアは、主に標準的なHTMLの textarea のようにふるまいます。 しかし、それは列または行の設定をサポートしません。 その代わり、textarea幅は、標準的なCSS幅を使用して指定されるべきです。 テキストエリアとは異なり、自動的に成長しません。 Example #16 シンプルテキストエリアdijit要素の使用例
スライダーabstract要素スライダーは 水平スライダー 及び 垂直スライダー の両方に由来するabstract要素です。 スライダーを構成するために、いくつかの一般的なメソッドを公開します:
使用例は、各々の具体的な拡張クラスで提供されます。 サブミットボタンSubmitButtonという名前のDijitはありませんが、 どんなjavascriptとの結合も追加で必要とせずに、フォームを送信できるボタンdijitを提供するために、 1つをここに含めます。 それは、まさにボタンdijitのように動作します。 Example #17 サブミットボタンdijit要素の使用例
テキストボックステキストボックスは、 主に他のdijitsに調和したルック&フィールで入力されるテキストを提供するために含まれます。 しかし、以下のメソッドで表されるいくらかのマイナーなフィルタリングとバリデーション機能も含みます:
Example #18 テキストボックスdijit要素の使用例
テキストエリアテキストエリアは、主に標準的なHTMLの textarea のようにふるまいます。 しかし、それは列または行の設定をサポートしません。 その代わり、textareaの幅は、標準的なCSS幅を使用して指定されるべきです; 列は、完全に省略されます。 テキストが追加されるたびに、textareaは垂直に伸びます。 Example #19 テキストエリアdijit要素の使用例
時刻テキストボックス時刻テキストボックスは、 時刻を選ぶためにドロップダウンを提示するテキスト入力です。 ドロップダウンは指定された増分で、時刻の特定のウインドウを示すように構成されるかもしれません。 内部的には、時刻テキストボックスは日付テキストボックス、 バリデーションテキストボックス 及びテキストボックスに由来します; それらのクラスのメソッドが全て利用可能です。さらに、 個別の制約を設定するために下記のメソッドを使用できます:
Example #20 時刻テキストボックスdijit要素の使用例 以下は、時刻に2時を表示する、増分が10分毎の時刻テキストボックスをつくります。
バリデーションテキストボックスバリデーションテキストボックスは、 バリデーションと制約をテキスト入力に加える能力を提供します。 内部的には、テキストボックスに由来します。 dijitパラメータを操作するために、以下のアクセッサとミューテーターを加えます:
Example #21 バリデーションテキストボックスdijit要素の使用例 以下は、 単語文字(すなわち、空白や大部分の句読点は無効です)だけから成る 一つのストリングを必要とするバリデーション・テキストボックスをつくります。
垂直スライダー垂直スライダーは水平スライダー の兄弟分で、あらゆる点でその要素のように動作します。 唯一本当に違うところは、 'top*' 及び 'bottom*' メソッドが 'left*' and 'right*' で置き換えられ、 HorizontalRule 及び HorizontalRuleLabels を使う代わりに、 VerticalRule 及び VerticalRuleLabels が使われることです。 Example #22 垂直スライダーdijit要素の使用例 下記では、-10から10の間の整数を選択する垂直スライダーを生成します。 左側には20%、40%、60%そして80%で印をつけられたラベルがあります、 右側には、0、50%そして100%の罫線があります。 値が変わるたびに、値を保存しているhidden要素は更新されます。
Dojo FormサンプルExample #23 Zend_Dojo_Formの利用 直接使うにせよ、それを拡張するにせよ、 Zend_FormでDojoを利用する最も簡単な方法は、 Zend_Dojo_Formを利用することです。 この例ではZend_Dojo_Formの拡張と、 すべてのdijit要素の使用法を示します。 それは4つのサブ・フォームをつくって、TabContainerを利用するためにフォームを飾ります。 そして、それ自身のタブの中に各々のサブ・フォームを表示します。
Example #24 既存のフォームをDojoを使って変更する Zend_Dojo::enableForm()という静的メソッドを利用して、 既存のフォームをDojoを使って変更することもできます。 最初の例では既存のフォームの例を修飾して見せています。
あるいは、フォームの初期化でわずかな微調整をすることができます:
もちろん、可能ならば、Zend_Dojo_Formを継承したクラスで単純に置き換えられるか、 置き換えたいでしょう。 そのクラスはすでにDojoが有効のZend_Formの選択リストの代わりです。
|