dijit表示ヘルパーに基き、
クラスのZend_Dojo_Form
ファミリーは、
あなたのフォームの範囲内でネイティブにDijitsを利用する能力を提供します。
フォームでDojoフォーム要素を利用するために3つの選択肢があります:
-
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()
がすでに行うことなので、 この方法で我慢する理由はほとんどありません。
例357 既存のフォームでDojoを使用可能にする
"ちょっと待って" とあなたは言います;
"私は、自分自身のカスタム・フォーム・クラスでZend_Form
をすでに拡張しています!
どのようにしたら、Dojoを使用できますか?"
初めに、
Zend_Form
の拡張から
Zend_Dojo_Form
の拡張への
最も簡単で単純な変更は
Zend_Form_SubForm
のインスタンス化を行う箇所を全て
Zend_Dojo_Form_SubForm
のインスタンス化を行うように
更新することです。
2つ目の方法はカスタムフォームのinit()
メソッドの中で
Zend_Dojo::enableForm()
を呼び出すことです;
フォームの定義を完了させるときは、
Dojoを使用可能にするためにサブフォーム全てを通じて繰り返します:
class My_Form_Custom extends Zend_Form { public function init() { // フォームでDojoを使用可能にする: Zend_Dojo::enableForm($this); // 引き続きここからフォームの定義 // サブフォーム全てでDojoを使用可能にする: foreach ($this->getSubForms() as $subForm) { Zend_Dojo::enableForm($subForm); } } }
dijitに特有のフォームデコレーターと要素の使い方は まるで他全てのフォーム・デコレーターまたは要素の使い方のようです。
大部分のフォーム要素は Dijit 要素デコレーター (要素から dijit パラメータをとって来ます) を使うことができ、 要素で特定されたビュー・ヘルパーに、 これらと他のメタデータを渡せます。 しかしながら、フォームやサブ・フォーム及び表示グループをデコレートするために、 いろいろなレイアウト dijits に該当するデコレーターのセットがあります。
dijitデコレーターの全てで、
デコレートされた与えられた要素の dijitParams プロパティを探して、
$params
配列として使用される dijit ビュー・ヘルパーに押し付けます;
それから、情報の重複が起こらないように、これらは他のどの特性からも分離されます。
ちょうど View ヘルパ・デコレーターのように、 レンダリングのときにビュー・ヘルパーとして使用される要素で、 Dijit 要素は helper プロパティを予期します。 Dijit パラメータは一般的に直接要素から引き出されますが、 dijitParams キー(そのキーの値は、任意の連想配列でしょう)による、 オプションとして渡されるかもしれません。
各々の要素がユニークな ID (要素の getId()
メソッドから取得されるように)
を持つことは、重要です。
繰り返しが dojo()
ビュー・ヘルパーの範囲内で検出されるならば、
デコレーターは通知の引き金を引いて、
識別子に uniqid()
からの戻りを追加することによってユニークな ID を作成します。
標準的な使用法では、 単純に最初にデコレーター・チェーンにこのデコレーターを 追加オプションなしで、結びつけます。
例358 Dijit 要素デコレーターの使用法
$element->setDecorators(array( 'DijitElement', 'Errors', 'Label', 'ContentPane', ));
Dijit フォーム・デコレーターは、 フォーム・デコレーターと非常に似ています; 実際、それが 同じビュー・ヘルパー名 ('form') を利用するので、実際、基本的に入れ替えて使うことができます。
設定のために dijit.form.Form は少しも dijit パラメータを必要としないので、 プログラムされた dijit の生成が確実に機能できるように、 DOM ID が渡される dijit フォーム・ビュー・ヘルパーが必要とすることが主な違いです。 識別子としてフォーム名を渡すことによって、デコレーターはこれを確実にします。
DijitContainer
デコレーターは、実は、
いろいろな他のデコレーターが由来する抽象クラスです。
タイトル・サポートの追加で、それは Dijit要素 の同じ機能を提供します。
多くのレイアウト dijit はタイトルを要求するか、利用できます;
利用できるのであれば、 DijitContainer は要素の説明プロパティを利用して、
渡されるならば、 'legend' もしくは 'title' デコレーター・オプションのどちらかを利用することもできます。
対応する翻訳による翻訳アダプターが存在するならば、タイトルは翻訳されます。
以下は、 DijitContainer
から継承するデコレーターの一覧です:
AccordionContainer
AccordionPane
BorderContainer
ContentPane
SplitContainer
StackContainer
TabContainer
例359 Dijit コンテナ・デコレーター使用法
// フォームで TabContainer を使う: $form->setDecorators(array( 'FormElements', array('TabContainer', array( 'id' => 'tabContainer', 'style' => 'width: 600px; height: 500px;', 'dijitParams' => array( 'tabPosition' => 'top' ), )), 'DijitForm', )); // サブフォームで ContentPane を使う // (AccordionContainer 以外の全てで使うことができます): $subForm->setDecorators(array( 'FormElements', array('HtmlTag', array('tag' => 'dl')), 'ContentPane', ));
注意:このドキュメントでは、英語版のリビジョン 21357,21358 の更新内容をスキップしています。
ビュー・ヘルパーが提供される各々のフォーム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固有の要素は以下に該当するデコレーターの独特な一覧を実装します:
$element->addDecorator('DijitElement') ->addDecorator('Errors') ->addDecorator('HtmlTag', array('tag' => 'dd')) ->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
だけがボタン要素のために使われます。
標準的なチェックボックス要素 に由来していないので、 それは同じ機能を実装します。 これは、以下のメソッドが公開されることを意味します
setCheckedValue($value)
: 要素がチェックされたときに使う値を設定します。getCheckedValue()
: チェックされたときに要素で使う値を取得します。setUncheckedValue($value)
: チェックされていないときに要素で使う値を設定します。getUncheckedValue()
: チェックされていないときに要素で使う値を取得します。setChecked($flag)
: 要素をチェック済みにするか否か設定します。isChecked()
: 要素が現在チェック済みか判断します。
例361 チェックボックスdijit要素の使用例
$form->addElement( 'CheckBox', 'foo', array( 'label' => 'A check box', 'checkedValue' => 'foo', 'uncheckedValue' => 'bar', 'checked' => true, ) );
コンボボックス 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
値を渡すことでも、
このふるまいを抑制できます。
例362 コンボボックスdijit要素を選択肢入力として使う
$form->addElement( 'ComboBox', 'foo', array( 'label' => 'ComboBox (select)', 'value' => 'blue', 'autocomplete' => false, 'multiOptions' => array( 'red' => 'Rouge', 'blue' => 'Bleu', 'white' => 'Blanc', 'orange' => 'Orange', 'black' => 'Noir', 'green' => 'Vert', ), ) );
例363 コンボボックスdijit要素をデータ・ストアと一緒に使う
$form->addElement( 'ComboBox', 'foo', array( 'label' => 'ComboBox (datastore)', 'storeId' => 'stateStore', 'storeType' => 'dojo.data.ItemFileReadStore', 'storeParams' => array( 'url' => '/js/states.txt', ), 'dijitParams' => array( 'searchAttr' => 'name', ), ) );
前述の例はComboBox
の代わりに
FilteringSelect
を使用します。
通貨テキストボックスは、主に通貨入力をサポートするためにあります。 通貨はローカライズされるかもしれず、小数も非小数もサポートできます。
内部的には、通貨テキストボックスは 数値テキストボックスや バリデーションテキストボックスおよび テキストボックスに由来します; それらのクラスのメソッドが全て利用可能です。 さらに、下記の制約メソッドを使用できます:
例364 通貨テキストボックスdijit要素の使用例
$form->addElement( 'CurrencyTextBox', 'foo', array( 'label' => 'Currency:', 'required' => true, 'currency' => 'USD', 'invalidMessage' => 'Invalid amount. ' . 'Include dollar sign, commas, and cents.', 'fractional' => false, ) );
日付テキストボックスは、 カレンダー・ドロップダウンで日付(クライアント側日付確認とフォーマッティングだけでなく) を選ぶために提供します。
内部的に、日付テキストボックスは バリデーションテキストボックス およびテキストボックス に由来します; それらのクラスのメソッドが全て利用可能です。さらに、 個別の制約を設定するために下記のメソッドを使用できます:
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" のどちらかでしょう。
例365 日付テキストボックスdijit要素の使用例
$form->addElement( 'DateTextBox', 'foo', array( 'label' => 'Date:', 'required' => true, 'invalidMessage' => 'Invalid date specified.', 'formatLength' => 'long', ) );
エディタはリッチな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()
例366 エディタdijit要素の使用例
$form->addElement('editor', 'content', array( 'plugins' => array('undo', '|', 'bold', 'italic'), 'editActionInterval' => 2, 'focusOnLoad' => true, 'height' => '250px', 'inheritWidth' => true, 'styleSheets' => array('/js/custom/editor.css'), ));
エディタ Dijit は既定で div を使います
エディタ dijit は既定で HTML の DIV を使います。
dijit._editor.RichText
資料は、
HTML の TEXTAREA の上にビルドされたそれを持つことが
セキュリティに影響するかもしれないことを示します。
言うことには、TEXTAREAに上品に退化できる
エディタ・ウィジェットを望む機会があるかもしれません。
そのような場面では、 degrade
プロパティを TRUE
に設定することによってそうすることができます。
// 初期化にて $editor = new Zend_Dojo_Form_Element_Editor('foo', array( 'degrade' => true, )); // フォームを通じた構築 $form->addElement('editor', 'content', array( 'degrade' => true, )); // または初期化後 $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定義のためにすべてのメタデータを取得します。
例367 水平スライダーdijit要素の使用例
下記では、-10から10の間の整数を選択する水平スライダーを生成します。 上側には20%、40%、60%そして80%で印をつけられたラベルがあります、 下側には、0、50%そして100%の罫線があります。 値が変わるたびに、値を保存しているhidden要素は更新されます。
$form->addElement( 'HorizontalSlider', 'horizontal', array( 'label' => 'HorizontalSlider', 'value' => 5, 'minimum' => -10, 'maximum' => 10, 'discreteValues' => 11, 'intermediateChanges' => true, 'showButtons' => true, 'topDecorationDijit' => 'HorizontalRuleLabels', 'topDecorationContainer' => 'topContainer', 'topDecorationLabels' => array( ' ', '20%', '40%', '60%', '80%', ' ', ), 'topDecorationParams' => array( 'container' => array( 'style' => 'height:1.2em; font-size=75%;color:gray;', ), 'list' => array( 'style' => 'height:1em; font-size=75%;color:gray;', ), ), 'bottomDecorationDijit' => 'HorizontalRule', 'bottomDecorationContainer' => 'bottomContainer', 'bottomDecorationLabels' => array( '0%', '50%', '100%', ), 'bottomDecorationParams' => array( 'list' => array( 'style' => 'height:1em; font-size=75%;color:gray;', ), ), ) );
数スピナーは、数値を入力するためのテキスト要素です; 設定された量によって値を増加させたり、減少させるための要素を含みます。
下記のメソッドが利用できます:
setDefaultTimeout($timeout)
及びgetDefaultTimeout()
: ボタンが押されたままのときと、値が変更されるときの間の既定のタイムアウトを ミリ秒単位で設定または取得します。setTimeoutChangeRate($rate)
及びgetTimeoutChangeRate()
: ボタンが押されたままのとき、変化がなされる割合をミリ秒単位で設定または取得します。setLargeDelta($delta)
及びgetLargeDelta()
: ボタンが押されたままのとき、数値が変わるべき量を設定または取得します。setSmallDelta($delta)
及びgetSmallDelta()
: ボタンが一度押されたとき、数が変わるべきデルタを設定または取得します。setIntermediateChanges($flag)
及びgetIntermediateChanges()
: ボタンが押されたままのとき、 各々の値が変化するごとに表示されるべきかどうか示すフラグを設定または取得します。setRangeMessage($message)
及びgetRangeMessage()
: 利用できる値の範囲を指示しているメッセージを設定または取得します。setMin($value)
及びgetMin()
: 使用可能な最小値を設定または取得します。setMax($value)
及びgetMax()
: 使用可能な最大値を設定または取得します。
例368 数スピナーdijit要素の使用例
$form->addElement( 'NumberSpinner', 'foo', array( 'value' => '7', 'label' => 'NumberSpinner', 'smallDelta' => 5, 'largeDelta' => 25, 'defaultTimeout' => 500, 'timeoutChangeRate' => 100, 'min' => 9, 'max' => 1550, 'places' => 0, 'maxlength' => 20, ) );
数テキストボックスは、数を入力するためのテキスト要素です; 数スピナーとは異なり、数は手で入力します。 バリデーションと制約は、 数が特定の範囲または形式にとどまることを確実とするために提示できます。
内部的には、数テキストボックスはバリデーションテキストボックス 及びテキストボックスに由来します; それらのクラスのメソッドが全て利用可能です。さらに、 個別の制約を設定するために下記のメソッドを使用できます:
setLocale($locale)
及びgetLocale()
: このdijitを利用するために指定されたまたは代替のロケールを指定または取得します。setPattern($pattern)
及びgetPattern()
: 数をフォーマットするために使う数値パターン形式 を設定または取得します。setType($type)
及びgetType()
: 使用する数の形式型を取得します。 ('decimal'、'percent'または'currency'のいずれかであるべきです)。setPlaces($places)
及びgetPlaces()
: サポートする小数位の数を設定または取得します。setStrict($flag)
及びgetStrict()
: 空白文字及び数字以外の文字についてどの程度ゆるやかに許されるか示す 厳密性フラグの値を設定または取得します。
例369 数テキストボックスdijit要素の使用例
$form->addElement( 'NumberTextBox', 'elevation', array( 'label' => 'NumberTextBox', 'required' => true, 'invalidMessage' => 'Invalid elevation.', 'places' => 0, 'constraints' => array( 'min' => -20000, 'max' => 20000, ), ) );
パスワードテキストボックスは、 パスワード入力のみに結び付けられたバリデーションテキストボックスです; その唯一の目的は、dijitテーマを与えられたテキスト入力を クライアント側バリデーションを提示するパスワードのためにできるようにすることです。
内部的には、パスワードテキストボックスはバリデーションテキストボックス 及びテキストボックス に由来します; それらのクラスのメソッドが全て利用可能です。
例370 パスワードテキストボックスの使用例
$form->addElement( 'PasswordTextBox', 'password', array( 'label' => 'Password', 'required' => true, 'trim' => true, 'lowercase' => true, 'regExp' => '^[a-z0-9]{6,}$', 'invalidMessage' => 'Invalid password; ' . 'must be at least 6 alphanumeric characters', ) );
ラジオボタンは、他のDojo dijitと一貫したルック&フィールを提示するために、 標準的なラジオ入力要素をラップします。
ラジオボタンはDijitMultiから拡張します。
そして、setMultiOptions()
及びsetMultiOption()
メソッドによって
選ばれた選択肢を指定できます。
デフォルトでこの要素は、
配列に対して登録された選択肢のキーを確認するInArray
バリデーターを登録します。
setRegisterInArrayValidator(false)
または
registerInArrayValidatorのどちらを呼び出しても、
設定キーにFALSE
値を渡すことによってこのふるまいを抑制できます。
例371 ラジオボタンdijit要素の使用例
$form->addElement( 'RadioButton', 'foo', array( 'label' => 'RadioButton', 'multiOptions' => array( 'foo' => 'Foo', 'bar' => 'Bar', 'baz' => 'Baz', ), 'value' => 'bar', ) );
シンプルテキストエリアは、主に標準的なHTMLの textarea のようにふるまいます。 しかし、それは列または行の設定をサポートしません。 その代わり、textarea幅は、標準的なCSS幅を使用して指定されるべきです。 テキストエリアとは異なり、自動的に成長しません。
例372 シンプルテキストエリアdijit要素の使用例
$form->addElement( 'SimpleTextarea', 'simpletextarea', array( 'label' => 'SimpleTextarea', 'required' => true, 'style' => 'width: 80em; height: 25em;', ) );
スライダーは 水平スライダー 及び 垂直スライダー の両方に由来する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を提供するために、 1つをここに含めます。 それは、まさにボタンdijitのように動作します。
例373 サブミットボタンdijit要素の使用例
$form->addElement( 'SubmitButton', 'foo', array( 'required' => false, 'ignore' => true, 'label' => 'Submit Button!', ) );
テキストボックスは、 主に他のdijitsに調和したルック&フィールで入力されるテキストを提供するために含まれます。 しかし、以下のメソッドで表されるいくらかのマイナーなフィルタリングとバリデーション機能も含みます:
setLowercase($flag)
及びgetLowercase()
: 入力を小文字にキャストすべきかどうか示すフラグを設定または取得します。setPropercase($flag)
及びgetPropercase()
: 入力をProper Case(訳注:先頭を大文字、他を小文字にすること)にキャストすべきかどうか示すフラグを設定または取得します。setUppercase($flag)
及びgetUppercase()
: 入力を大文字にキャストすべきかどうか示すフラグを設定または取得します。setTrim($flag)
及びgetTrim()
: 先立つまたは後続する空白を除去すべきかどうか示すフラグを設定または取得します。setMaxLength($length)
及びgetMaxLength()
: 入力の長さの上限を設定または取得します。
例374 テキストボックスdijit要素の使用例
$form->addElement( 'TextBox', 'foo', array( 'value' => 'some text', 'label' => 'TextBox', 'trim' => true, 'propercase' => true, ) );
テキストエリアは、主に標準的なHTMLの textarea のようにふるまいます。 しかし、それは列または行の設定をサポートしません。 その代わり、textareaの幅は、標準的なCSS幅を使用して指定されるべきです; 列は、完全に省略されます。 テキストが追加されるたびに、textareaは垂直に伸びます。
例375 テキストエリアdijit要素の使用例
$form->addElement( 'Textarea', 'textarea', array( 'label' => 'Textarea', 'required' => true, 'style' => 'width: 200px;', ) );
時刻テキストボックスは、 時刻を選ぶためにドロップダウンを提示するテキスト入力です。 ドロップダウンは指定された増分で、時刻の特定のウインドウを示すように構成されるかもしれません。
内部的には、時刻テキストボックスは日付テキストボックス、 バリデーションテキストボックス 及びテキストボックスに由来します; それらのクラスのメソッドが全て利用可能です。さらに、 個別の制約を設定するために下記のメソッドを使用できます:
setTimePattern($pattern)
及びgetTimePattern()
: 時刻をフォーマットするためのunicode時間形式パターン を設定または取得します。setClickableIncrement($format)
及びgetClickableIncrement()
: Time Pickerでクリックできる全ての要素で 増分値を示すISO_8601 文字列を設定または取得します。setVisibleIncrement($format)
及びgetVisibleIncrement()
: 時刻選択にて見える増分を設定します;ISO_8601
フォーマットに従わなければなりません。setVisibleRange($format)
及びgetVisibleRange()
: 時刻選択にていつでも見える時刻の範囲を設定または取得します;ISO_8601
フォーマットに従わなければなりません。
例376 時刻テキストボックスdijit要素の使用例
以下は、時刻に2時を表示する、増分が10分毎の時刻テキストボックスをつくります。
$form->addElement( 'TimeTextBox', 'foo', array( 'label' => 'TimeTextBox', 'required' => true, 'visibleRange' => 'T04:00:00', 'visibleIncrement' => 'T00:10:00', 'clickableIncrement' => 'T00:10:00', ) );
バリデーションテキストボックスは、 バリデーションと制約をテキスト入力に加える能力を提供します。 内部的には、テキストボックスに由来します。 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()
: 要素のために個別またはすべての制約を取り除きます。
例377 バリデーションテキストボックスdijit要素の使用例
以下は、 単語文字(すなわち、空白や大部分の句読点は無効です)だけから成る 一つのストリングを必要とするバリデーション・テキストボックスをつくります。
$form->addElement( 'ValidationTextBox', 'foo', array( 'label' => 'ValidationTextBox', 'required' => true, 'regExp' => '[\w]+', 'invalidMessage' => 'Invalid non-space text.', ) );
垂直スライダーは水平スライダー の兄弟分で、あらゆる点でその要素のように動作します。 唯一本当に違うところは、 'top*' 及び 'bottom*' メソッドが 'left*' and 'right*' で置き換えられ、 HorizontalRule 及び HorizontalRuleLabels を使う代わりに、 VerticalRule 及び VerticalRuleLabels が使われることです。
例378 垂直スライダーdijit要素の使用例
下記では、-10から10の間の整数を選択する垂直スライダーを生成します。 左側には20%、40%、60%そして80%で印をつけられたラベルがあります、 右側には、0、50%そして100%の罫線があります。 値が変わるたびに、値を保存しているhidden要素は更新されます。
$form->addElement( 'VerticalSlider', 'foo', array( 'label' => 'VerticalSlider', 'value' => 5, 'style' => 'height: 200px; width: 3em;', 'minimum' => -10, 'maximum' => 10, 'discreteValues' => 11, 'intermediateChanges' => true, 'showButtons' => true, 'leftDecorationDijit' => 'VerticalRuleLabels', 'leftDecorationContainer' => 'leftContainer', 'leftDecorationLabels' => array( ' ', '20%', '40%', '60%', '80%', ' ', ), 'rightDecorationDijit' => 'VerticalRule', 'rightDecorationContainer' => 'rightContainer', 'rightDecorationLabels' => array( '0%', '50%', '100%', ), ) );
例379 Zend_Dojo_Formの利用
直接使うにせよ、それを拡張するにせよ、
Zend_Form
でDojoを利用する最も簡単な方法は、
Zend_Dojo_Form
を利用することです。
この例ではZend_Dojo_Form
の拡張と、
すべてのdijit要素の使用法を示します。
それは4つのサブ・フォームをつくって、TabContainerを利用するためにフォームを飾ります。
そして、それ自身のタブの中に各々のサブ・フォームを表示します。
class My_Form_Test extends Zend_Dojo_Form { /** * select要素で使う選択肢 */ protected $_selectOptions = array( 'red' => 'Rouge', 'blue' => 'Bleu', 'white' => 'Blanc', 'orange' => 'Orange', 'black' => 'Noir', 'green' => 'Vert', ); /** * Form初期化 * * @return void */ public function init() { $this->setMethod('post'); $this->setAttribs(array( 'name' => 'masterForm', )); $this->setDecorators(array( 'FormElements', array('TabContainer', array( 'id' => 'tabContainer', 'style' => 'width: 600px; height: 500px;', 'dijitParams' => array( 'tabPosition' => 'top' ), )), 'DijitForm', )); $textForm = new Zend_Dojo_Form_SubForm(); $textForm->setAttribs(array( 'name' => 'textboxtab', 'legend' => 'Text Elements', 'dijitParams' => array( 'title' => 'Text Elements', ), )); $textForm->addElement( 'TextBox', 'textbox', array( 'value' => 'some text', 'label' => 'TextBox', 'trim' => true, 'propercase' => true, ) ) ->addElement( 'DateTextBox', 'datebox', array( 'value' => '2008-07-05', 'label' => 'DateTextBox', 'required' => true, ) ) ->addElement( 'TimeTextBox', 'timebox', array( 'label' => 'TimeTextBox', 'required' => true, ) ) ->addElement( 'CurrencyTextBox', 'currencybox', array( 'label' => 'CurrencyTextBox', 'required' => true, // 'currency' => 'USD', 'invalidMessage' => 'Invalid amount. ' . 'Include dollar sign, commas, ' . 'and cents.', // 'fractional' => true, // 'symbol' => 'USD', // 'type' => 'currency', ) ) ->addElement( 'NumberTextBox', 'numberbox', array( 'label' => 'NumberTextBox', 'required' => true, 'invalidMessage' => 'Invalid elevation.', 'constraints' => array( 'min' => -20000, 'max' => 20000, 'places' => 0, ) ) ) ->addElement( 'ValidationTextBox', 'validationbox', array( 'label' => 'ValidationTextBox', 'required' => true, 'regExp' => '[\w]+', 'invalidMessage' => 'Invalid non-space text.', ) ) ->addElement( 'Textarea', 'textarea', array( 'label' => 'Textarea', 'required' => true, 'style' => 'width: 200px;', ) ); $editorForm = new Zend_Dojo_Form_SubForm(); $editorForm->setAttribs(array( 'name' => 'editortab', 'legend' => 'Editor', 'dijitParams' => array( 'title' => 'Editor' ), )) $editorForm->addElement( 'Editor', 'wysiwyg', array( 'label' => 'Editor', 'inheritWidth' => 'true', ) ); $toggleForm = new Zend_Dojo_Form_SubForm(); $toggleForm->setAttribs(array( 'name' => 'toggletab', 'legend' => 'Toggle Elements', )); $toggleForm->addElement( 'NumberSpinner', 'ns', array( 'value' => '7', 'label' => 'NumberSpinner', 'smallDelta' => 5, 'largeDelta' => 25, 'defaultTimeout' => 1000, 'timeoutChangeRate' => 100, 'min' => 9, 'max' => 1550, 'places' => 0, 'maxlength' => 20, ) ) ->addElement( 'Button', 'dijitButton', array( 'label' => 'Button', ) ) ->addElement( 'CheckBox', 'checkbox', array( 'label' => 'CheckBox', 'checkedValue' => 'foo', 'uncheckedValue' => 'bar', 'checked' => true, ) ) ->addElement( 'RadioButton', 'radiobutton', array( 'label' => 'RadioButton', 'multiOptions' => array( 'foo' => 'Foo', 'bar' => 'Bar', 'baz' => 'Baz', ), 'value' => 'bar', ) ); $selectForm = new Zend_Dojo_Form_SubForm(); $selectForm->setAttribs(array( 'name' => 'selecttab', 'legend' => 'Select Elements', )); $selectForm->addElement( 'ComboBox', 'comboboxselect', array( 'label' => 'ComboBox (select)', 'value' => 'blue', 'autocomplete' => false, 'multiOptions' => $this->_selectOptions, ) ) ->addElement( 'ComboBox', 'comboboxremote', array( 'label' => 'ComboBox (remoter)', 'storeId' => 'stateStore', 'storeType' => 'dojo.data.ItemFileReadStore', 'storeParams' => array( 'url' => '/js/states.txt', ), 'dijitParams' => array( 'searchAttr' => 'name', ), ) ) ->addElement( 'FilteringSelect', 'filterselect', array( 'label' => 'FilteringSelect (select)', 'value' => 'blue', 'autocomplete' => false, 'multiOptions' => $this->_selectOptions, ) ) ->addElement( 'FilteringSelect', 'filterselectremote', array( 'label' => 'FilteringSelect (remoter)', 'storeId' => 'stateStore', 'storeType' => 'dojo.data.ItemFileReadStore', 'storeParams' => array( 'url' => '/js/states.txt', ), 'dijitParams' => array( 'searchAttr' => 'name', ), ) ); $sliderForm = new Zend_Dojo_Form_SubForm(); $sliderForm->setAttribs(array( 'name' => 'slidertab', 'legend' => 'Slider Elements', )); $sliderForm->addElement( 'HorizontalSlider', 'horizontal', array( 'label' => 'HorizontalSlider', 'value' => 5, 'minimum' => -10, 'maximum' => 10, 'discreteValues' => 11, 'intermediateChanges' => true, 'showButtons' => true, 'topDecorationDijit' => 'HorizontalRuleLabels', 'topDecorationContainer' => 'topContainer', 'topDecorationLabels' => array( ' ', '20%', '40%', '60%', '80%', ' ', ), 'topDecorationParams' => array( 'container' => array( 'style' => 'height:1.2em; ' . 'font-size=75%;color:gray;', ), 'list' => array( 'style' => 'height:1em; ' . 'font-size=75%;color:gray;', ), ), 'bottomDecorationDijit' => 'HorizontalRule', 'bottomDecorationContainer' => 'bottomContainer', 'bottomDecorationLabels' => array( '0%', '50%', '100%', ), 'bottomDecorationParams' => array( 'list' => array( 'style' => 'height:1em; ' . 'font-size=75%;color:gray;', ), ), ) ) ->addElement( 'VerticalSlider', 'vertical', array( 'label' => 'VerticalSlider', 'value' => 5, 'style' => 'height: 200px; width: 3em;', 'minimum' => -10, 'maximum' => 10, 'discreteValues' => 11, 'intermediateChanges' => true, 'showButtons' => true, 'leftDecorationDijit' => 'VerticalRuleLabels', 'leftDecorationContainer' => 'leftContainer', 'leftDecorationLabels' => array( ' ', '20%', '40%', '60%', '80%', ' ', ), 'rightDecorationDijit' => 'VerticalRule', 'rightDecorationContainer' => 'rightContainer', 'rightDecorationLabels' => array( '0%', '50%', '100%', ), ) ); $this->addSubForm($textForm, 'textboxtab') ->addSubForm($editorForm, 'editortab') ->addSubForm($toggleForm, 'toggletab') ->addSubForm($selectForm, 'selecttab') ->addSubForm($sliderForm, 'slidertab'); } }
例380 既存のフォームをDojoを使って変更する
Zend_Dojo::enableForm()
という静的メソッドを利用して、
既存のフォームをDojoを使って変更することもできます。
最初の例では既存のフォームの例を修飾して見せています。
$form = new My_Custom_Form(); Zend_Dojo::enableForm($form); $form->addElement( 'ComboBox', 'query', array( 'label' => 'Color:', 'value' => 'blue', 'autocomplete' => false, 'multiOptions' => array( 'red' => 'Rouge', 'blue' => 'Bleu', 'white' => 'Blanc', 'orange' => 'Orange', 'black' => 'Noir', 'green' => 'Vert', ), ) );
あるいは、フォームの初期化でわずかな微調整をすることができます:
class My_Custom_Form extends Zend_Form { public function init() { Zend_Dojo::enableForm($this); // ... } }
もちろん、可能ならば、Zend_Dojo_Form
を継承したクラスで単純に置き換えられるか、
置き換えたいでしょう。
そのクラスはすでにDojoが有効のZend_Form
の選択リストの代わりです。