ZF Zend Framework

Behind the Site

Programmer's Reference Guide

Dojo ビューヘルパー
Zend_Dojo
プログラマ向けリファレンスガイド

Dojoフォーム要素とデコレーター

dijit表示ヘルパーに基き、 クラスのZend_Dojo_Formファミリーは、 あなたのフォームの範囲内でネイティブにDijitsを利用する能力を提供します。

フォームでDojoフォーム要素を利用するために３つの選択肢があります:

  • Zend_Dojo::enableForm()を使います。 これは配置されたフォーム項目全てにデコレーターと要素のためのプラグイン・パスを再帰的に加えます。 その上、それは表示オブジェクトをDojo使用可能にします。 しかしながら、この呼び出しの後に配置したサブフォームはどれでも Zend_Dojo::enableForm()に渡されなければいけないことに注意してください。

  • それぞれDojo特有のフォーム及びサブフォーム実装、 Zend_Dojo_FormとZend_Dojo_Form_SubFormを使います。 これらはZend_Form及びZend_Form_SubFormのドロップインの置き換えとして使うことができ、 適当なデコレーターと要素パスをすべての含み、 Dojo特有のデフォルトのDisplayGroupクラスを設定し、 ビューをDojo使用可能にすることができます。

  • 最後に、最もあきあきしますが、あなた自身で適当なデコレーターと要素パスをセットして、 デフォルトのDisplayGroupクラスをセットし、 ビューをDojo使用可能にすることができます。 Zend_Dojo::enableForm()がすでに行うことなので、 この方法で我慢する理由はほとんどありません。

例1 既存のフォームでDojoを使用可能にする

"ちょっと待って" とあなたは言います; "私は、自分自身のカスタム・フォーム・クラスでZend_Formをすでに拡張しています！ どのようにしたら、Dojoを使用できますか？"

初めに、 Zend_Formの拡張から Zend_Dojo_Formの拡張への 最も簡単で単純な変更は Zend_Form_SubFormのインスタンス化を行う箇所を全て Zend_Dojo_Form_SubFormのインスタンス化を行うように 更新することです。

２つ目の方法はカスタムフォームのinit()メソッドの中で Zend_Dojo::enableForm()を呼び出すことです; フォームの定義を完了させるときは、 Dojoを使用可能にするためにサブフォーム全てを通じて繰り返します:

  1. class My_Form_Custom extends Zend_Form
  2. {
  3.     public function init()
  4.     {
  5.         // フォームでDojoを使用可能にする:
  6.         Zend_Dojo::enableForm($this);
  7.  
  8.         // 引き続きここからフォームの定義
  9.  
  10.         // サブフォーム全てでDojoを使用可能にする:
  11.         foreach ($this->getSubForms() as $subForm) {
  12.             Zend_Dojo::enableForm($subForm);
  13.         }
  14.     }
  15. }

dijitに特有のフォームデコレーターと要素の使い方は まるで他全てのフォーム・デコレーターまたは要素の使い方のようです。

Dijitに特有のフォーム・デコレーター

大部分のフォーム要素はDijit要素デコレーター （要素からdijitパラメータをとって来ます） を使うことができ、 要素で特定されたビュー・ヘルパーに、 これらと他のメタデータを渡すことができます。 しかしながら、フォームやサブ・フォーム及び表示グループをデコレートするために、 いろいろなレイアウトdijitsに該当するデコレーターのセットがあります。

dijitデコレーターの全てで、 デコレートされた与えられた要素のdijitParamsプロパティを探して、 $params配列として使用されるdijitビュー・ヘルパーに押し付けます; それから、情報の重複が起こらないように、これらは他のどの特性からも分離されます。

Dijit要素デコレーター

ちょうどViewヘルパ・デコレーターのように、 レンダリングのときにビュー・ヘルパーとして使用される要素で、 Dijit要素はhelperプロパティを予期します。 Dijitパラメータは一般的に直接要素から引き出されますが、 dijitParamsキー（そのキーの値は、任意の連想配列でしょう）による、 オプションとして渡されるかもしれません。

各々の要素がユニークなID（要素のgetId()メソッドから取得されるように） を持つことは、重要です。 繰り返しがdojo()ビュー・ヘルパーの範囲内で検出されるならば、 デコレーターは通知の引き金を引いて、 識別子にuniqid()からの戻りを追加することによってユニークなIDを作成します。

標準的な使用法では、 単純に最初にデコレーター・チェーンにこのデコレーターを 追加オプションなしで、結びつけます。

例2 Dijit要素デコレーターの使用法

  1. $element->setDecorators(array(
  2.     'DijitElement',
  3.     'Errors',
  4.     'Label',
  5.     'ContentPane',
  6. ));

Dijitフォーム・デコレーター

Dijitフォーム・デコレーターは、 フォーム・デコレーターと非常に似ています; 実際、それが 同じビュー・ヘルパー名 ('form')を利用するので、実際、基本的に入れ替えて使うことができます。

設定のためにdijit.form.Formは少しもdijitパラメータを必要としないので、 プログラムされたdijitの生成が確実に機能できるように、 DOM IDが渡されるdijitフォーム・ビュー・ヘルパーが必要とすることが主な違いです。 識別子としてフォーム名を渡すことによって、デコレーターはこれを確実にします。

DijitContainerベースのデコレーター

DijitContainerデコレーターは、実は、 いろいろな他のデコレーターが由来する抽象クラスです。 タイトル・サポートの追加で、それはDijit要素の同じ機能を提供します。 多くのレイアウトdijitはタイトルを要求するか、利用することができます; 利用できるのであれば、DijitContainerは要素の説明プロパティを利用して、 渡されるならば、 'legend' もしくは 'title' デコレーター・オプションのどちらかを利用することもできます。 対応する翻訳による翻訳アダプターが存在するならば、タイトルは翻訳されます。

以下は、DijitContainerから継承するデコレーターの一覧です:

  • AccordionContainer

  • AccordionPane

  • BorderContainer

  • ContentPane

  • SplitContainer

  • StackContainer

  • TabContainer

例3 Dijitコンテナ・デコレーター使用法

  1. // フォームで TabContainer を使う:
  2. $form->setDecorators(array(
  3.     'FormElements',
  4.     array('TabContainer', array(
  5.         'id'          => 'tabContainer',
  6.         'style'       => 'width: 600px; height: 500px;',
  7.         'dijitParams' => array(
  8.             'tabPosition' => 'top'
  9.         ),
  10.     )),
  11.     'DijitForm',
  12. ));
  13.  
  14. // サブフォームで ContentPane を使う
  15. // (AccordionContainer 以外の全てで使うことができます):
  16. $subForm->setDecorators(array(
  17.     'FormElements',
  18.     array('HtmlTag', array('tag' => 'dl')),
  19.     'ContentPane',
  20. ));

Dijit固有のフォーム要素

ビュー・ヘルパーが提供される各々のフォームdijitには、 対応するZend_Form要素があります。 dijitパラメータを操作するための以下のメソッドがそれらすべてにあります:

  • setDijitParam($key, $value): dijitパラメータを一つセットします。 dijitパラメータがすでに存在すれば、上書きされます。

  • setDijitParams(array $params): 一度にいくつかのdijitパラメータをセットします。 渡されたパラメータにマッチする既存のパラメータは上書きされます。

  • hasDijitParam($key): 与えられたdijitパラメータが定義されたか存在している場合はtrueを返します。 それ以外はfalseを返します。

  • getDijitParam($key): 与えられたdijitパラメータを返します。 利用できない場合は null値を返します。

  • getDijitParams(): dijitパラメータを全て返します。

  • removeDijitParam($key): 与えられたdijitパラメータを除去します。

  • clearDijitParams(): 現行定義されたdijitパラメータを全て消去します。

Dijitパラメータは、dijitParams public プロパティに保存されます。 このように、あなたは単にこのプロパティを要素の上に置くことによって、 既存のフォーム要素をdijit使用可能にすることができます; あなたは、単にパラメータを操作するのを容易にするために、 上記のアクセッサを持っていません。

その上、dijit固有の要素は以下に該当するデコレーターの独特な一覧を実装します:

  1. $element->addDecorator('DijitElement')
  2.         ->addDecorator('Errors')
  3.         ->addDecorator('HtmlTag', array('tag' => 'dd'))
  4.         ->addDecorator('Label', array('tag' => 'dt'));

実質的に、Dijit要素が、標準的なViewHelperデコレーターの代わりに使われます。

最後に、ベースDijit要素により、 確実にDojoビュー・ヘルパー・パスがビューの上に置かれることになります。

Dijit要素、DijitMultiの変化はMulti abstract フォーム要素の機能を提供します。 そして、開発者が 'multiOptions' を指定できるようにします。 - 一般的に select の option またはラジオ のoptionです。

以下のdijit要素は、標準的なZend Framework配布において出荷されます。

ボタン

標準的なボタン要素に 由来していないので、 同じ機能を実装して、ドロップインの代わりとして使うことができます。 以下の機能が公開されます:

  • 名前が提供されないならば、 getLabel()はボタン・ラベルとして要素名を利用します。 さらに、翻訳メッセージにマッチした翻訳アダプターが利用できれば、 それは名前を翻訳します。

  • isChecked()は、 提出される値がラベルにマッチするかどうか決定します; もしマッチするなら、それはtrueを返します。 これは、フォームが提出されたとき、どのボタンが使われたかについて決定することに役立ちます。

さらに、デコレーターのDijitElement及び DtDdWrapperだけがボタン要素のために使われます。

例4 ボタンdijit要素の使用例

  1. $form->addElement(
  2.     'Button',
  3.     'foo',
  4.     array(
  5.         'label' => 'Button Label',
  6.     )
  7. );

チェックボックス

標準的なチェックボックス要素 に由来していないので、 それは同じ機能を実装します。 これは、以下のメソッドが公開されることを意味します

  • setCheckedValue($value): 要素がチェックされたときに使う値を設定します。

  • getCheckedValue(): チェックされたときに要素で使う値を取得します。

  • setUncheckedValue($value): チェックされていないときに要素で使う値を設定します。

  • getUncheckedValue(): チェックされていないときに要素で使う値を取得します。

  • setChecked($flag): 要素をチェック済みにするか否か設定します。

  • isChecked(): 要素が現在チェック済みか判断します。

例5 チェックボックスdijit要素の使用例

  1. $form->addElement(
  2.     'CheckBox',
  3.     'foo',
  4.     array(
  5.         'label'          => 'A check box',
  6.         'checkedValue'   => 'foo',
  7.         'uncheckedValue' => 'bar',
  8.         'checked'        => true,
  9.     )
  10. );

コンボボックス及びフィルタリング選択

コンボボックス dijitビュー・ヘルパー・文書 にみられるように、コンボボックスは選択とテキスト入力の混合です。 そして、自動補完及び、提示された選択肢の代わりを指定できるようにします。 フィルタリング選択は同じことですが、任意の入力を許しません。

注意: ラベル値を返すコンボボックス
 コンボボックスはラベル値を返します。 期待に反するオプション値は返しません。 この理由から、コンボボックスはInArrayバリデーターを自動登録しません。 （FilteringSelectsがそうするけれども）

コンボボックスとフィルタリング選択フォーム要素は、 dojo.dataデータ・ストア（使用された場合）を指定することだけでなく、 選ばれた選択肢を調べて、セットするためにアクセッサとミューテーターを提供します。 それらはDijitMultiから拡張します。 そして、それは setMultiOptions()及び setMultiOption()メソッドによって 選ばれた選択肢を指定できます。 さらに、以下のメソッドを利用できます:

  • getStoreInfo(): 現行で設定されているデータストア情報を全て取得します。 現行で設定されたデータがなければ、空の配列を返します。

  • setStoreId($identifier): ストアの識別変数を設定します。 （通常、Dojoで 'jsId' 属性によって言及されます） これは、有効なjavascript変数の名前でなければなりません。

  • getStoreId(): ストアの識別変数名を取得します。

  • setStoreType($dojoType): 使用するデータストアクラスを設定します; 例えば "dojo.data.ItemFileReadStore"

  • getStoreType(): 使用するdojoデータストアクラスを取得します。

  • setStoreParams(array $params): データ・ストア・オブジェクトを構成するために使われるパラメータをいずれも設定します。 例えば、 dojo.data.ItemFileReadStore データストアでは dojo.dataオブジェクトを返す場所を指す 'url' パラメータを期待します。

  • getStoreParams(): 現行で設定されているデータストアパラメータをいずれも取得します; もしなければ、空の配列を返します。

  • setAutocomplete($flag): ユーザーが要素から離れるとき、選ばれた項目が使われるかどうかを示します。

  • getAutocomplete(): 自動補完フラグの値を取得します。

dojo.dataストアが要素で登録されなければ、 登録された選択肢の配列のキーを検証するInArrayバリデーターを この要素はデフォルトで登録します。 setRegisterInArrayValidator(false)を呼び出すことでも、 registerInArrayValidator設定キーにfalse値を渡すことでも、 このふるまいを抑制できます。

例6 コンボボックスdijit要素を選択肢入力として使う

  1. $form->addElement(
  2.     'ComboBox',
  3.     'foo',
  4.     array(
  5.         'label'        => 'ComboBox (select)',
  6.         'value'        => 'blue',
  7.         'autocomplete' => false,
  8.         'multiOptions' => array(
  9.             'red'    => 'Rouge',
  10.             'blue'   => 'Bleu',
  11.             'white'  => 'Blanc',
  12.             'orange' => 'Orange',
  13.             'black'  => 'Noir',
  14.             'green'  => 'Vert',
  15.         ),
  16.     )
  17. );

例7 コンボボックスdijit要素をデータ・ストアと一緒に使う

  1. $form->addElement(
  2.     'ComboBox',
  3.     'foo',
  4.     array(
  5.         'label'       => 'ComboBox (datastore)',
  6.         'storeId'     => 'stateStore',
  7.         'storeType'   => 'dojo.data.ItemFileReadStore',
  8.         'storeParams' => array(
  9.             'url' => '/js/states.txt',
  10.         ),
  11.         'dijitParams' => array(
  12.             'searchAttr' => 'name',
  13.         ),
  14.     )
  15. );

前述の例はComboBoxの代わりに FilteringSelectを使用します。

通貨テキストボックス

通貨テキストボックスは、主に通貨入力をサポートするためにあります。 通貨はローカライズされるかもしれず、小数も非小数もサポートできます。

内部的には、通貨テキストボックスは 数値テキストボックスや バリデーションテキストボックスおよび テキストボックスに由来します; それらのクラスのメソッドが全て利用可能です。 さらに、下記の制約メソッドを使用できます:

  • setCurrency($currency): 使用する通貨種類を設定します; » ISO-4217 仕様に従うでしょう。

  • getCurrency():現行の通貨種類を取得します。

  • setSymbol($symbol): ３文字からなる» ISO-4217 通貨記号を設定します。

  • getSymbol(): 現行の通貨記号を取得します。

  • setFractional($flag): 通貨で小数を許すかどうか設定します。

  • getFractional(): 小数フラグの状態を取得します。

例8 通貨テキストボックスdijit要素の使用例

  1. $form->addElement(
  2.     'CurrencyTextBox',
  3.     'foo',
  4.     array(
  5.         'label'          => 'Currency:',
  6.         'required'       => true,
  7.         'currency'       => 'USD',
  8.         'invalidMessage' => 'Invalid amount. ' .
  9.                             'Include dollar sign, commas, and cents.',
  10.         'fractional'     => false,
  11.     )
  12. );

日付テキストボックス

日付テキストボックスは、 カレンダー・ドロップダウンで日付（クライアント側日付確認とフォーマッティングだけでなく） を選ぶために提供します。

内部的に、日付テキストボックスは バリデーションテキストボックス およびテキストボックス に由来します; それらのクラスのメソッドが全て利用可能です。さらに、 個別の制約を設定するために下記のメソッドを使用できます:

  • setAmPm($flag)及び getAmPm(): 時刻でAM/PM 文字列を使うかどうか

  • setStrict($flag)及び getStrict(): 入力を確認した時にマッチする厳しい正規表現を使うかどうか。 デフォルトはfalseですが、空白文字やいくつかの省略形を許します。

  • setLocale($locale)及び getLocale(): 指定した要素で使うロケールを設定または取得します。

  • setDatePattern($pattern)及び getDatePattern(): 日付をフォーマットする» unicode 日付形式パターンを提示または取得します。

  • setFormatLength($formatLength)及び getFormatLength(): 使用する形式の長さの種類を提示または取得します; "long"、"short"、"medium"または"full"のどれか一つです。

  • setSelector($selector)及び getSelector(): セレクタのスタイルを提示または取得します; "date" や "time" のどちらかでしょう。

例9 日付テキストボックスdijit要素の使用例

  1. $form->addElement(
  2.     'DateTextBox',
  3.     'foo',
  4.     array(
  5.         'label'          => 'Date:',
  6.         'required'       => true,
  7.         'invalidMessage' => 'Invalid date specified.',
  8.         'formatLength'   => 'long',
  9.     )
  10. );

エディタ

エディタはリッチなHTML内容を作成して、 編集するために利用できるWYSIWYGエディタを提供します。 dijit.Editorはプラグイン可能で、 必要に応じてカスタム・プラグインで拡張されるかもしれません; 詳しくは» dijit.Editorドキュメントをご覧下さい。

エディタ・フォーム要素は、 下記のいくつかのアクセッサとミューテーターを いろいろなdijitパラメータを操作するために提供します:

  • captureEventsは、 編集エリア自体と連携するイベントです。 捕獲したイベントを操作するために以下のアクセッサとミューテーターを利用できます:

    • addCaptureEvent($event)

    • addCaptureEvents(array $events)

    • setCaptureEvents(array $events)

    • getCaptureEvents()

    • hasCaptureEvent($event)

    • removeCaptureEvent($event)

    • clearCaptureEvents()

  • eventsは、 onClickやonKeyUpなどのような標準的なDOMイベントです。 イベントを操作するために以下のアクセッサとミューテーターを利用できます:

    • addEvent($event)

    • addEvents(array $events)

    • setEvents(array $events)

    • getEvents()

    • hasEvent($event)

    • removeEvent($event)

    • clearEvents()

  • pluginsはエディターにツールバーのための追加のツールや、 許可する追加スタイルなどの機能を加えます。 プラグインを操作するために以下のアクセッサとミューテーターを利用できます:

    • addPlugin($plugin)

    • addPlugins(array $plugins)

    • setPlugins(array $plugins)

    • getPlugins()

    • hasPlugin($plugin)

    • removePlugin($plugin)

    • clearPlugins()

  • editActionIntervalは、 アンドゥ操作のためにイベントをまとめるために使われます。 デフォルトでこの値は3秒です。 setEditActionInterval($interval)メソッドが値を設定するために使われるかもしれません。 一方で、 getEditActionInterval()が値を取得します。

  • focusOnLoadは、 ページが読み込まれたとき、 この指定のエディタがフォーカスを受けるかどうか判断するために使われます。 デフォルトでこれはfalseです。 メソッド setFocusOnLoad($flag)が値を設定するために使われるかもしれません。 一方で、 getFocusOnLoad()が値を取得します。

  • heightはエディターの高さを指定します; デフォルトでこれは300pxです。 メソッド setHeight($height)が値を設定するために使われるかもしれません。 一方で、 getHeight()が値を取得します。

  • inheritWidthは、 エディタが親コンテナの幅と単純にデフォルトの100%幅のどちらを使うか決定するために使われます。 デフォルトでこれはfalseです。 (すなわち、画面の幅一杯を満たします) メソッド setInheritWidth($flag)が値を設定するために使われるかもしれません。 一方で、 getInheritWidth()が値を取得します。

  • minHeightはエディターの高さの最小値を設定します; デフォルトでこれは1emです。 メソッド setMinHeight($height)が値を設定するために使われるかもしれません。 一方で、 getMinHeight()が値を取得します。

  • styleSheetsは、 どの追加CSSスタイルシートがエディタの表示に影響を及ぼすために使われるか示します。 デフォルトでは何も登録されず、それはページ・スタイルを継承します。 エディタ・スタイルシートを操作するために以下のアクセッサとミューテーターを利用できます:

    • addStyleSheet($styleSheet)

    • addStyleSheets(array $styleSheets)

    • setStyleSheets(array $styleSheets)

    • getStyleSheets()

    • hasStyleSheet($styleSheet)

    • removeStyleSheet($styleSheet)

    • clearStyleSheets()

例10 エディタdijit要素の使用例

  1. $form->addElement('editor', 'content', array(
  2.     'plugins'            => array('undo', '|', 'bold', 'italic'),
  3.     'editActionInterval' => 2,
  4.     'focusOnLoad'        => true,
  5.     'height'             => '250px',
  6.     'inheritWidth'       => true,
  7.     'styleSheets'        => array('/js/custom/editor.css'),
  8. ));

注意: エディタ Dijit は既定で div を使います
 エディタ dijit は既定で HTML の DIV を使います。 dijit._editor.RichText 資料は、 HTML の TEXTAREA の上にビルドされたそれを持つことが セキュリティに影響するかもしれないことを示します。
言うことには、TEXTAREAに上品に退化できる エディタ・ウィジェットを望む機会があるかもしれません。 そのような場面では、 degrade プロパティを true に設定することによってそうすることができます。

  1. // 初期化にて
  2. $editor = new Zend_Dojo_Form_Element_Editor('foo', array(
  3.     'degrade' => true,
  4. ));
  5.  
  6. // フォームを通じた構築
  7. $form->addElement('editor', 'content', array(
  8.     'degrade' => true,
  9. ));
  10.  
  11. // または初期化後
  12. $editor->degrade = true;

水平スライダー

水平スライダーは、 ある範囲で数値を選択するためのスライダーUI部品を提供します。 内部的には、それはフォームによって送信されるhidden要素の値をセットします。

水平スライダーは、抽象的なスライダーdijit要素に由来します。 さらに、スライダー罫線と罫線ラベルをセットして設定するための、 いろいろなメソッドがあります。

  • setTopDecorationDijit($dijit)及び setBottomDecorationDijit($dijit): スライダーの上側か下側で使うdijitの名前をセットします。 これは、接頭辞 "dijit.form." を含んではいけません。 むしろ final 名だけ - "HorizontalRule" または "HorizontalRuleLabels" のうちの1つ - を含まなければなりません。

  • setTopDecorationContainer($container)及び setBottomDecorationContainer($container): 罫線コンテナ要素のために使用する名前を指定します; 例えば、'topRule' や 'topContainer'など。

  • setTopDecorationLabels(array $labels)及び setBottomDecorationLabels(array $labels): RuleLabels dijit型のうちの1つで使用するラベルをセットします。 これらは、インデックスを付けられた配列でなければなりません; 与えられたラベル位置（例えば始めまたは終わり）をスキップするために、 一つの空の場所を指定します。

  • setTopDecorationParams(array $params)及び setBottomDecorationParams(array $params): 与えられた罫線、 またはRuleLabels dijitを構成するときに使うdijitパラメータです。

  • setTopDecorationAttribs(array $attribs)及び setBottomDecorationAttribs(array $attribs): 与えられた罫線、 またはRuleLabels HTML要素コンテナのために指定するHTML属性です。

  • getTopDecoration()及び getBottomDecoration(): 上記のミューテーターによって提示されたように、 与えられた罫線またはRuleLabels定義のためにすべてのメタデータを取得します。

例11 水平スライダーdijit要素の使用例

下記では、-10から10の間の整数を選択する水平スライダーを生成します。 上側には20%、40%、60%そして80%で印をつけられたラベルがあります、 下側には、0、50%そして100%の罫線があります。 値が変わるたびに、値を保存しているhidden要素は更新されます。

  1. $form->addElement(
  2.     'HorizontalSlider',
  3.     'horizontal',
  4.     array(
  5.         'label'                     => 'HorizontalSlider',
  6.         'value'                     => 5,
  7.         'minimum'                   => -10,
  8.         'maximum'                   => 10,
  9.         'discreteValues'            => 11,
  10.         'intermediateChanges'       => true,
  11.         'showButtons'               => true,
  12.         'topDecorationDijit'        => 'HorizontalRuleLabels',
  13.         'topDecorationContainer'    => 'topContainer',
  14.         'topDecorationLabels'       => array(
  15.                 ' ',
  16.                 '20%',
  17.                 '40%',
  18.                 '60%',
  19.                 '80%',
  20.                 ' ',
  21.         ),
  22.         'topDecorationParams'      => array(
  23.             'container' => array(
  24.                 'style' => 'height:1.2em; font-size=75%;color:gray;',
  25.             ),
  26.             'list' => array(
  27.                 'style' => 'height:1em; font-size=75%;color:gray;',
  28.             ),
  29.         ),
  30.         'bottomDecorationDijit'     => 'HorizontalRule',
  31.         'bottomDecorationContainer' => 'bottomContainer',
  32.         'bottomDecorationLabels'    => array(
  33.                 '0%',
  34.                 '50%',
  35.                 '100%',
  36.         ),
  37.         'bottomDecorationParams'   => array(
  38.             'list' => array(
  39.                 'style' => 'height:1em; font-size=75%;color:gray;',
  40.             ),
  41.         ),
  42.     )
  43. );

数スピナー

数スピナーは、数値を入力するためのテキスト要素です; 設定された量によって値を増加させたり、減少させるための要素を含みます。

下記のメソッドが利用できます:

  • setDefaultTimeout($timeout)及び getDefaultTimeout(): ボタンが押されたままのときと、値が変更されるときの間の既定のタイムアウトを ミリ秒単位で設定または取得します。

  • setTimeoutChangeRate($rate)及び getTimeoutChangeRate(): ボタンが押されたままのとき、変化がなされる割合をミリ秒単位で設定または取得します。

  • setLargeDelta($delta)及び getLargeDelta(): ボタンが押されたままのとき、数値が変わるべき量を設定または取得します。

  • setSmallDelta($delta)及び getSmallDelta(): ボタンが一度押されたとき、数が変わるべきデルタを設定または取得します。

  • setIntermediateChanges($flag)及び getIntermediateChanges(): ボタンが押されたままのとき、 各々の値が変化するごとに表示されるべきかどうか示すフラグを設定または取得します。

  • setRangeMessage($message)及び getRangeMessage(): 利用できる値の範囲を指示しているメッセージを設定または取得します。

  • setMin($value)及び getMin(): 使用可能な最小値を設定または取得します。

  • setMax($value)及び getMax(): 使用可能な最大値を設定または取得します。

例12 数スピナーdijit要素の使用例

  1. $form->addElement(
  2.     'NumberSpinner',
  3.     'foo',
  4.     array(
  5.         'value'             => '7',
  6.         'label'             => 'NumberSpinner',
  7.         'smallDelta'        => 5,
  8.         'largeDelta'        => 25,
  9.         'defaultTimeout'    => 500,
  10.         'timeoutChangeRate' => 100,
  11.         'min'               => 9,
  12.         'max'               => 1550,
  13.         'places'            => 0,
  14.         'maxlength'         => 20,
  15.     )
  16. );

数テキストボックス

数テキストボックスは、数を入力するためのテキスト要素です; 数スピナーとは異なり、数は手で入力します。 バリデーションと制約は、 数が特定の範囲または形式にとどまることを確実とするために提示できます。

内部的には、数テキストボックスはバリデーションテキストボックス 及びテキストボックスに由来します; それらのクラスのメソッドが全て利用可能です。さらに、 個別の制約を設定するために下記のメソッドを使用できます:

  • setLocale($locale)及び getLocale(): このdijitを利用するために指定されたまたは代替のロケールを指定または取得します。

  • setPattern($pattern)及び getPattern(): 数をフォーマットするために使う» 数値パターン形式 を設定または取得します。

  • setType($type)及び getType(): 使用する数の形式型を取得します。 ('decimal'、'percent'または'currency'のいずれかであるべきです)。

  • setPlaces($places)及び getPlaces(): サポートする小数位の数を設定または取得します。

  • setStrict($flag)及び getStrict(): 空白文字及び数字以外の文字についてどの程度ゆるやかに許されるか示す 厳密性フラグの値を設定または取得します。

例13 数テキストボックスdijit要素の使用例

  1. $form->addElement(
  2.     'NumberTextBox',
  3.     'elevation',
  4.     array(
  5.         'label'          => 'NumberTextBox',
  6.         'required'       => true,
  7.         'invalidMessage' => 'Invalid elevation.',
  8.         'places'         => 0,
  9.         'constraints'    => array(
  10.             'min'    => -20000,
  11.             'max'    => 20000,
  12.         ),
  13.     )
  14. );

パスワードテキストボックス

パスワードテキストボックスは、 パスワード入力のみに結び付けられたバリデーションテキストボックスです; その唯一の目的は、dijitテーマを与えられたテキスト入力を クライアント側バリデーションを提示するパスワードのためにできるようにすることです。

内部的には、パスワードテキストボックスはバリデーションテキストボックス 及びテキストボックス に由来します; それらのクラスのメソッドが全て利用可能です。

例14 パスワードテキストボックスの使用例

  1. $form->addElement(
  2.     'PasswordTextBox',
  3.     'password',
  4.     array(
  5.         'label'          => 'Password',
  6.         'required'       => true,
  7.         'trim'           => true,
  8.         'lowercase'      => true,
  9.         'regExp'         => '^[a-z0-9]{6,}$',
  10.         'invalidMessage' => 'Invalid password; ' .
  11.                             'must be at least 6 alphanumeric characters',
  12.     )
  13. );

ラジオボタン

ラジオボタンは、他のDojo dijitと一貫したルック＆フィールを提示するために、 標準的なラジオ入力要素をラップします。

ラジオボタンはDijitMultiから拡張します。 そして、 setMultiOptions()及び setMultiOption()メソッドによって 選ばれた選択肢を指定できます。

デフォルトでこの要素は、 配列に対して登録された選択肢のキーを確認するInArrayバリデーターを登録します。 setRegisterInArrayValidator(false)または registerInArrayValidatorのどちらを呼び出しても、 設定キーにfalse値を渡すことによってこのふるまいを抑制できます。

例15 ラジオボタンdijit要素の使用例

  1. $form->addElement(
  2.     'RadioButton',
  3.     'foo',
  4.     array(
  5.         'label' => 'RadioButton',
  6.         'multiOptions'  => array(
  7.             'foo' => 'Foo',
  8.             'bar' => 'Bar',
  9.             'baz' => 'Baz',
  10.         ),
  11.         'value' => 'bar',
  12.     )
  13. );

シンプルテキストエリア

シンプルテキストエリアは、主に標準的なHTMLの textarea のようにふるまいます。 しかし、それは列または行の設定をサポートしません。 その代わり、textarea幅は、標準的なCSS幅を使用して指定されるべきです。 テキストエリアとは異なり、自動的に成長しません。

例16 シンプルテキストエリアdijit要素の使用例

  1. $form->addElement(
  2.     'SimpleTextarea',
  3.     'simpletextarea',
  4.     array(
  5.         'label'    => 'SimpleTextarea',
  6.         'required' => true,
  7.         'style'    => 'width: 80em; height: 25em;',
  8.     )
  9. );

スライダーabstract要素

スライダーは 水平スライダー 及び 垂直スライダー の両方に由来するabstract要素です。 スライダーを構成するために、いくつかの一般的なメソッドを公開します:

  • setClickSelect($flag)及び getClickSelect(): スライダーをクリックしたら値を変更するかどうか示すフラグを設定または取得します。

  • setIntermediateChanges($flag)及び getIntermediateChanges(): 各々のスライダー変化イベントにdijitが通知を送るかどうか示すフラグを設定または取得します。

  • setShowButtons($flag)及び getShowButtons(): どちらかの端にボタンが表示されるかどうか示すフラグを設定または取得します。; もし表示されるなら、スライダーの値を変えるために、ユーザーはボタンをクリックできます。

  • setDiscreteValues($value)及び getDiscreteValues(): スライダーによって表される不連続な値の数を設定または取得します。

  • setMaximum($value)及び getMaximum(): スライダーの最大値を設定します。

  • setMinimum($value)及び getMinimum(): スライダーの最小値を設定します。

  • setPageIncrement($value)及び getPageIncrement(): スライダーがキーボード・イベントで変わる量を設定します。

使用例は、各々の具体的な拡張クラスで提供されます。

サブミットボタン

SubmitButtonという名前のDijitはありませんが、 どんなjavascriptとの結合も追加で必要とせずに、フォームを送信できるボタンdijitを提供するために、 １つをここに含めます。 それは、まさにボタンdijitのように動作します。

例17 サブミットボタンdijit要素の使用例

  1. $form->addElement(
  2.     'SubmitButton',
  3.     'foo',
  4.     array(
  5.         'required'   => false,
  6.         'ignore'     => true,
  7.         'label'      => 'Submit Button!',
  8.     )
  9. );

テキストボックス

テキストボックスは、 主に他のdijitsに調和したルック＆フィールで入力されるテキストを提供するために含まれます。 しかし、以下のメソッドで表されるいくらかのマイナーなフィルタリングとバリデーション機能も含みます:

  • setLowercase($flag)及び getLowercase(): 入力を小文字にキャストすべきかどうか示すフラグを設定または取得します。

  • setPropercase($flag)及び getPropercase(): 入力をProper Case(訳注：先頭を大文字、他を小文字にすること)にキャストすべきかどうか示すフラグを設定または取得します。

  • setUppercase($flag)及び getUppercase(): 入力を大文字にキャストすべきかどうか示すフラグを設定または取得します。

  • setTrim($flag)及び getTrim(): 先立つまたは後続する空白を除去すべきかどうか示すフラグを設定または取得します。

  • setMaxLength($length)及び getMaxLength(): 入力の長さの上限を設定または取得します。

例18 テキストボックスdijit要素の使用例

  1. $form->addElement(
  2.     'TextBox',
  3.     'foo',
  4.     array(
  5.         'value'      => 'some text',
  6.         'label'      => 'TextBox',
  7.         'trim'       => true,
  8.         'propercase' => true,
  9.     )
  10. );

テキストエリア

テキストエリアは、主に標準的なHTMLの textarea のようにふるまいます。 しかし、それは列または行の設定をサポートしません。 その代わり、textareaの幅は、標準的なCSS幅を使用して指定されるべきです; 列は、完全に省略されます。 テキストが追加されるたびに、textareaは垂直に伸びます。

例19 テキストエリアdijit要素の使用例

  1. $form->addElement(
  2.     'Textarea',
  3.     'textarea',
  4.     array(
  5.         'label'    => 'Textarea',
  6.         'required' => true,
  7.         'style'    => 'width: 200px;',
  8.     )
  9. );

時刻テキストボックス

時刻テキストボックスは、 時刻を選ぶためにドロップダウンを提示するテキスト入力です。 ドロップダウンは指定された増分で、時刻の特定のウインドウを示すように構成されるかもしれません。

内部的には、時刻テキストボックスは日付テキストボックス、 バリデーションテキストボックス 及びテキストボックスに由来します; それらのクラスのメソッドが全て利用可能です。さらに、 個別の制約を設定するために下記のメソッドを使用できます:

  • setTimePattern($pattern)及び getTimePattern(): 時刻をフォーマットするための» unicode時間形式パターン を設定または取得します。

  • setClickableIncrement($format)及び getClickableIncrement(): Time Pickerでクリックできる全ての要素で 増分値を示す» ISO-8601 文字列を設定または取得します。

  • setVisibleIncrement($format)及び getVisibleIncrement(): 時刻選択にて見える増分を設定します; ISO-8601フォーマットに従わなければなりません。

  • setVisibleRange($format)及び getVisibleRange(): 時刻選択にていつでも見える時刻の範囲を設定または取得します; ISO-8601フォーマットに従わなければなりません。

例20 時刻テキストボックスdijit要素の使用例

以下は、時刻に２時を表示する、増分が10分毎の時刻テキストボックスをつくります。

  1. $form->addElement(
  2.     'TimeTextBox',
  3.     'foo',
  4.     array(
  5.         'label'              => 'TimeTextBox',
  6.         'required'           => true,
  7.         'visibleRange'       => 'T04:00:00',
  8.         'visibleIncrement'   => 'T00:10:00',
  9.         'clickableIncrement' => 'T00:10:00',
  10.     )
  11. );

バリデーションテキストボックス

バリデーションテキストボックスは、 バリデーションと制約をテキスト入力に加える能力を提供します。 内部的には、テキストボックスに由来します。 dijitパラメータを操作するために、以下のアクセッサとミューテーターを加えます:

  • setInvalidMessage($message)及び getInvalidMessage(): 値がバリデーションされないときに表示するtooltipメッセージを設定または取得します。

  • setPromptMessage($message)及び getPromptMessage(): 要素の使用方法のために表示されるtooltipメッセージを設定または取得します。

  • setRegExp($regexp)及び getRegExp(): 要素を確認するために使用する正規表現を取得します。 正規表現は、バウンダリ（PHPのpreg* ファミリーの関数と異なります）を必要としません。

  • setConstraint($key, $value)及び getConstraint($key): 要素を確認するときに使う追加制約を設定または取得します; サブクラスで主に使われます。 制約は、dijitパラメータの 'constraints' キーに保存されます。

  • setConstraints(array $constraints)及び getConstraints(): 要素を確認するときに使う個々の制約を設定または取得します; サブクラスで主に使われます。

  • hasConstraint($key): 与えられた制約が存在するかどうか調べます。

  • removeConstraint($key)及び clearConstraints(): 要素のために個別またはすべての制約を取り除きます。

例21 バリデーションテキストボックスdijit要素の使用例

以下は、 単語文字（すなわち、空白や大部分の句読点は無効です）だけから成る 一つのストリングを必要とするバリデーション・テキストボックスをつくります。

  1. $form->addElement(
  2.     'ValidationTextBox',
  3.     'foo',
  4.     array(
  5.         'label'          => 'ValidationTextBox',
  6.         'required'       => true,
  7.         'regExp'         => '[\w]+',
  8.         'invalidMessage' => 'Invalid non-space text.',
  9.     )
  10. );

垂直スライダー

垂直スライダーは水平スライダー の兄弟分で、あらゆる点でその要素のように動作します。 唯一本当に違うところは、 'top*' 及び 'bottom*' メソッドが 'left*' and 'right*' で置き換えられ、 HorizontalRule 及び HorizontalRuleLabels を使う代わりに、 VerticalRule 及び VerticalRuleLabels が使われることです。

例22 垂直スライダーdijit要素の使用例

下記では、-10から10の間の整数を選択する垂直スライダーを生成します。 左側には20%、40%、60%そして80%で印をつけられたラベルがあります、 右側には、0、50%そして100%の罫線があります。 値が変わるたびに、値を保存しているhidden要素は更新されます。

  1. $form->addElement(
  2.     'VerticalSlider',
  3.     'foo',
  4.     array(
  5.         'label'                    => 'VerticalSlider',
  6.         'value'                    => 5,
  7.         'style'                    => 'height: 200px; width: 3em;',
  8.         'minimum'                  => -10,
  9.         'maximum'                  => 10,
  10.         'discreteValues'           => 11,
  11.         'intermediateChanges'      => true,
  12.         'showButtons'              => true,
  13.         'leftDecorationDijit'      => 'VerticalRuleLabels',
  14.         'leftDecorationContainer'  => 'leftContainer',
  15.         'leftDecorationLabels'     => array(
  16.                 ' ',
  17.                 '20%',
  18.                 '40%',
  19.                 '60%',
  20.                 '80%',
  21.                 ' ',
  22.         ),
  23.         'rightDecorationDijit' => 'VerticalRule',
  24.         'rightDecorationContainer' => 'rightContainer',
  25.         'rightDecorationLabels' => array(
  26.                 '0%',
  27.                 '50%',
  28.                 '100%',
  29.         ),
  30.     )
  31. );

Dojo Formサンプル

例23 Zend_Dojo_Formの利用

直接使うにせよ、それを拡張するにせよ、 Zend_FormでDojoを利用する最も簡単な方法は、 Zend_Dojo_Formを利用することです。 この例ではZend_Dojo_Formの拡張と、 すべてのdijit要素の使用法を示します。 それは４つのサブ・フォームをつくって、TabContainerを利用するためにフォームを飾ります。 そして、それ自身のタブの中に各々のサブ・フォームを表示します。

  1. class My_Form_Test extends Zend_Dojo_Form
  2. {
  3.     /**
  4.      * select要素で使う選択肢
  5.      */
  6.     protected $_selectOptions = array(
  7.         'red'    => 'Rouge',
  8.         'blue'   => 'Bleu',
  9.         'white'  => 'Blanc',
  10.         'orange' => 'Orange',
  11.         'black'  => 'Noir',
  12.         'green'  => 'Vert',
  13.     );
  14.  
  15.     /**
  16.      * Form初期化
  17.      *
  18.      * @return void
  19.      */
  20.     public function init()
  21.     {
  22.         $this->setMethod('post');
  23.         $this->setAttribs(array(
  24.             'name'  => 'masterForm',
  25.         ));
  26.         $this->setDecorators(array(
  27.             'FormElements',
  28.             array('TabContainer', array(
  29.                 'id' => 'tabContainer',
  30.                 'style' => 'width: 600px; height: 500px;',
  31.                 'dijitParams' => array(
  32.                     'tabPosition' => 'top'
  33.                 ),
  34.             )),
  35.             'DijitForm',
  36.         ));
  37.         $textForm = new Zend_Dojo_Form_SubForm();
  38.         $textForm->setAttribs(array(
  39.             'name'   => 'textboxtab',
  40.             'legend' => 'Text Elements',
  41.             'dijitParams' => array(
  42.                 'title' => 'Text Elements',
  43.             ),
  44.         ));
  45.         $textForm->addElement(
  46.                 'TextBox',
  47.                 'textbox',
  48.                 array(
  49.                     'value'      => 'some text',
  50.                     'label'      => 'TextBox',
  51.                     'trim'       => true,
  52.                     'propercase' => true,
  53.                 )
  54.             )
  55.             ->addElement(
  56.                 'DateTextBox',
  57.                 'datebox',
  58.                 array(
  59.                     'value' => '2008-07-05',
  60.                     'label' => 'DateTextBox',
  61.                     'required'  => true,
  62.                 )
  63.             )
  64.             ->addElement(
  65.                 'TimeTextBox',
  66.                 'timebox',
  67.                 array(
  68.                     'label' => 'TimeTextBox',
  69.                     'required'  => true,
  70.                 )
  71.             )
  72.             ->addElement(
  73.                 'CurrencyTextBox',
  74.                 'currencybox',
  75.                 array(
  76.                     'label' => 'CurrencyTextBox',
  77.                     'required'  => true,
  78.                     // 'currency' => 'USD',
  79.                     'invalidMessage' => 'Invalid amount. ' .
  80.                                         'Include dollar sign, commas, ' .
  81.                                         'and cents.',
  82.                     // 'fractional' => true,
  83.                     // 'symbol' => 'USD',
  84.                     // 'type' => 'currency',
  85.                 )
  86.             )
  87.             ->addElement(
  88.                 'NumberTextBox',
  89.                 'numberbox',
  90.                 array(
  91.                     'label' => 'NumberTextBox',
  92.                     'required'  => true,
  93.                     'invalidMessage' => 'Invalid elevation.',
  94.                     'constraints' => array(
  95.                         'min' => -20000,
  96.                         'max' => 20000,
  97.                         'places' => 0,
  98.                     )
  99.                 )
  100.             )
  101.             ->addElement(
  102.                 'ValidationTextBox',
  103.                 'validationbox',
  104.                 array(
  105.                     'label' => 'ValidationTextBox',
  106.                     'required'  => true,
  107.                     'regExp' => '[\w]+',
  108.                     'invalidMessage' => 'Invalid non-space text.',
  109.                 )
  110.             )
  111.             ->addElement(
  112.                 'Textarea',
  113.                 'textarea',
  114.                 array(
  115.                     'label'    => 'Textarea',
  116.                     'required' => true,
  117.                     'style'    => 'width: 200px;',
  118.                 )
  119.             );
  120.         $editorForm = new Zend_Dojo_Form_SubForm();
  121.         $editorForm->setAttribs(array(
  122.             'name'   => 'editortab',
  123.             'legend' => 'Editor',
  124.             'dijitParams' => array(
  125.                 'title' => 'Editor'
  126.             ),
  127.         ))
  128.         $editorForm->addElement(
  129.             'Editor',
  130.             'wysiwyg',
  131.             array(
  132.                 'label'        => 'Editor',
  133.                 'inheritWidth' => 'true',
  134.             )
  135.         );
  136.  
  137.         $toggleForm = new Zend_Dojo_Form_SubForm();
  138.         $toggleForm->setAttribs(array(
  139.             'name'   => 'toggletab',
  140.             'legend' => 'Toggle Elements',
  141.         ));
  142.         $toggleForm->addElement(
  143.                 'NumberSpinner',
  144.                 'ns',
  145.                 array(
  146.                     'value'             => '7',
  147.                     'label'             => 'NumberSpinner',
  148.                     'smallDelta'        => 5,
  149.                     'largeDelta'        => 25,
  150.                     'defaultTimeout'    => 1000,
  151.                     'timeoutChangeRate' => 100,
  152.                     'min'               => 9,
  153.                     'max'               => 1550,
  154.                     'places'            => 0,
  155.                     'maxlength'         => 20,
  156.                 )
  157.             )
  158.             ->addElement(
  159.                 'Button',
  160.                 'dijitButton',
  161.                 array(
  162.                     'label' => 'Button',
  163.                 )
  164.             )
  165.             ->addElement(
  166.                 'CheckBox',
  167.                 'checkbox',
  168.                 array(
  169.                     'label' => 'CheckBox',
  170.                     'checkedValue'  => 'foo',
  171.                     'uncheckedValue'  => 'bar',
  172.                     'checked' => true,
  173.                 )
  174.             )
  175.             ->addElement(
  176.                 'RadioButton',
  177.                 'radiobutton',
  178.                 array(
  179.                     'label' => 'RadioButton',
  180.                     'multiOptions'  => array(
  181.                         'foo' => 'Foo',
  182.                         'bar' => 'Bar',
  183.                         'baz' => 'Baz',
  184.                     ),
  185.                     'value' => 'bar',
  186.                 )
  187.             );
  188.         $selectForm = new Zend_Dojo_Form_SubForm();
  189.         $selectForm->setAttribs(array(
  190.             'name'   => 'selecttab',
  191.             'legend' => 'Select Elements',
  192.         ));
  193.         $selectForm->addElement(
  194.                 'ComboBox',
  195.                 'comboboxselect',
  196.                 array(
  197.                     'label' => 'ComboBox (select)',
  198.                     'value' => 'blue',
  199.                     'autocomplete' => false,
  200.                     'multiOptions' => $this->_selectOptions,
  201.                 )
  202.             )
  203.             ->addElement(
  204.                 'ComboBox',
  205.                 'comboboxremote',
  206.                 array(
  207.                     'label' => 'ComboBox (remoter)',
  208.                     'storeId' => 'stateStore',
  209.                     'storeType' => 'dojo.data.ItemFileReadStore',
  210.                     'storeParams' => array(
  211.                         'url' => '/js/states.txt',
  212.                     ),
  213.                     'dijitParams' => array(
  214.                         'searchAttr' => 'name',
  215.                     ),
  216.                 )
  217.             )
  218.             ->addElement(
  219.                 'FilteringSelect',
  220.                 'filterselect',
  221.                 array(
  222.                     'label' => 'FilteringSelect (select)',
  223.                     'value' => 'blue',
  224.                     'autocomplete' => false,
  225.                     'multiOptions' => $this->_selectOptions,
  226.                 )
  227.             )
  228.             ->addElement(
  229.                 'FilteringSelect',
  230.                 'filterselectremote',
  231.                 array(
  232.                     'label' => 'FilteringSelect (remoter)',
  233.                     'storeId' => 'stateStore',
  234.                     'storeType' => 'dojo.data.ItemFileReadStore',
  235.                     'storeParams' => array(
  236.                         'url' => '/js/states.txt',
  237.                     ),
  238.                     'dijitParams' => array(
  239.                         'searchAttr' => 'name',
  240.                     ),
  241.                 )
  242.             );
  243.         $sliderForm = new Zend_Dojo_Form_SubForm();
  244.         $sliderForm->setAttribs(array(
  245.             'name'   => 'slidertab',
  246.             'legend' => 'Slider Elements',
  247.         ));
  248.         $sliderForm->addElement(
  249.                 'HorizontalSlider',
  250.                 'horizontal',
  251.                 array(
  252.                     'label' => 'HorizontalSlider',
  253.                     'value' => 5,
  254.                     'minimum' => -10,
  255.                     'maximum' => 10,
  256.                     'discreteValues' => 11,
  257.                     'intermediateChanges' => true,
  258.                     'showButtons' => true,
  259.                     'topDecorationDijit' => 'HorizontalRuleLabels',
  260.                     'topDecorationContainer' => 'topContainer',
  261.                     'topDecorationLabels' => array(
  262.                             ' ',
  263.                             '20%',
  264.                             '40%',
  265.                             '60%',
  266.                             '80%',
  267.                             ' ',
  268.                     ),
  269.                     'topDecorationParams' => array(
  270.                         'container' => array(
  271.                             'style' => 'height:1.2em; ' .
  272.                                        'font-size=75%;color:gray;',
  273.                         ),
  274.                         'list' => array(
  275.                             'style' => 'height:1em; ' .
  276.                                        'font-size=75%;color:gray;',
  277.                         ),
  278.                     ),
  279.                     'bottomDecorationDijit' => 'HorizontalRule',
  280.                     'bottomDecorationContainer' => 'bottomContainer',
  281.                     'bottomDecorationLabels' => array(
  282.                             '0%',
  283.                             '50%',
  284.                             '100%',
  285.                     ),
  286.                     'bottomDecorationParams' => array(
  287.                         'list' => array(
  288.                             'style' => 'height:1em; ' .
  289.                                        'font-size=75%;color:gray;',
  290.                         ),
  291.                     ),
  292.                 )
  293.             )
  294.             ->addElement(
  295.                 'VerticalSlider',
  296.                 'vertical',
  297.                 array(
  298.                     'label' => 'VerticalSlider',
  299.                     'value' => 5,
  300.                     'style' => 'height: 200px; width: 3em;',
  301.                     'minimum' => -10,
  302.                     'maximum' => 10,
  303.                     'discreteValues' => 11,
  304.                     'intermediateChanges' => true,
  305.                     'showButtons' => true,
  306.                     'leftDecorationDijit' => 'VerticalRuleLabels',
  307.                     'leftDecorationContainer' => 'leftContainer',
  308.                     'leftDecorationLabels' => array(
  309.                             ' ',
  310.                             '20%',
  311.                             '40%',
  312.                             '60%',
  313.                             '80%',
  314.                             ' ',
  315.                     ),
  316.                     'rightDecorationDijit' => 'VerticalRule',
  317.                     'rightDecorationContainer' => 'rightContainer',
  318.                     'rightDecorationLabels' => array(
  319.                             '0%',
  320.                             '50%',
  321.                             '100%',
  322.                     ),
  323.                 )
  324.             );
  325.  
  326.         $this->addSubForm($textForm, 'textboxtab')
  327.              ->addSubForm($editorForm, 'editortab')
  328.              ->addSubForm($toggleForm, 'toggletab')
  329.              ->addSubForm($selectForm, 'selecttab')
  330.              ->addSubForm($sliderForm, 'slidertab');
  331.     }
  332. }

例24 既存のフォームをDojoを使って変更する

Zend_Dojo::enableForm()という静的メソッドを利用して、 既存のフォームをDojoを使って変更することもできます。

最初の例では既存のフォームの例を修飾して見せています。

  1. $form = new My_Custom_Form();
  2. Zend_Dojo::enableForm($form);
  3. $form->addElement(
  4. 'ComboBox',
  5. 'query',
  7.     'label'        => 'Color:',
  8.     'value'        => 'blue',
  9.     'autocomplete' => false,
  10.     'multiOptions' => array(
  11.         'red'    => 'Rouge',
  12.         'blue'   => 'Bleu',
  13.         'white'  => 'Blanc',
  14.         'orange' => 'Orange',
  15.         'black'  => 'Noir',
  16.         'green'  => 'Vert',
  17.     ),
  18. )
  19. );

あるいは、フォームの初期化でわずかな微調整をすることができます:

  1. class My_Custom_Form extends Zend_Form
  2. {
  3.     public function init()
  4.     {
  5.         Zend_Dojo::enableForm($this);
  6.  
  7.         // ...
  8.     }
  9. }

もちろん、可能ならば、すでにDojoを可能にしたZend_Formの drop-in 代わりに、Zend_Dojo_Formを継承したクラスで単純に置き換えられるか、 置き換えたいでしょう。

Dojo ビューヘルパー
Zend_Dojo
プログラマ向けリファレンスガイド
blog comments powered by Disqus

Select a Version

Languages Available

Components

Search the Manual

    • Navigation