ビュー・ヘルパーが提供される各々のフォーム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に特有の要素は以下に該当するデコレーターの独特な一覧を実装します: 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だけがボタン要素のために使われます。 addElement( 'Button', 'foo', array( 'label' => 'Button Label', ) ); ]]> 標準的なチェックボックス要素 に由来していないので、 それは同じ機能を実装します。 これは、以下のメソッドが公開されることを意味します setCheckedValue($value): 要素がチェックされたときに使う値を設定します。 getCheckedValue(): チェックされたときに要素で使う値を取得します。 setUncheckedValue($value): チェックされていないときに要素で使う値を設定します。 getUncheckedValue(): チェックされていないときに要素で使う値を取得します。 setChecked($flag): 要素をチェック済みにするか否か設定します。 isChecked(): 要素が現在チェック済みか判断します。 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値を渡すことでも、 このふるまいを抑制することができます。 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', ), ) ); ]]> 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を使用します。 通過テキストボックスは、主に通貨入力をサポートするためにあります。 通貨はローカライズされるかもしれず、小数も非小数もサポートできます。 Internally, CurrencyTextBox derives from NumberTextBox, ValidationTextBox, and TextBox; all methods available to those classes are available. In addition, the following constraint methods can be used: setCurrency($currency): 使用する通貨種類を設定します; ISO-4217 仕様に従うでしょう。 getCurrency():現行の通貨種類を取得します。 setSymbol($symbol): ３文字からなるISO-4217 通貨記号を設定します。 getSymbol(): 現行の通貨記号を取得します。 setFractional($flag): 通貨で小数を許すかどうか設定します。 getFractional(): 小数フラグの状態を取得します。 addElement( 'CurrencyTextBox', 'foo', array( 'label' => 'Currency:', 'required' => true, 'currency' => 'USD', 'invalidMessage' => 'Invalid amount. ' . 'Include dollar sign, commas, and cents.', 'fractional' => false, ) ); ]]> 日付テキストボックスは、 カレンダー・ドロップダウンを日付（クライアント側日付確認とフォーマッティングだけでなく） を選ぶために提供します。 Internally, DateTextBox derives from ValidationTextBox and TextBox; all methods available to those classes are available. In addition, the following methods can be used to set individual constraints: setAmPm($flag) and getAmPm(): 時刻でAM/PM 文字列を使うかどうか setStrict($flag) and getStrict(): 入力を確認した時にマッチする厳しい正規表現を使うかどうか。 デフォルトはfalseですが、空白文字やいくつかの省略形を許します。 setLocale($locale) and getLocale(): 指定した要素で使うロケールを設定または取得します。 setDatePattern($pattern)及び getDatePattern(): 日付をフォーマットする unicode 日付形式パターンを提示または取得します。 setFormatLength($formatLength)及び getFormatLength(): 使用する形式の長さの種類を提示または取得します; "long"、"short"、"medium"または"full"のどれか一つです。 setSelector($selector)及び getSelector(): セレクタのスタイルを提示または取得します; "date" や "time" のどちらかでしょう。 addElement( 'DateTextBox', 'foo', array( 'label' => 'Date:', 'required' => true, 'invalidMessage' => 'Invalid date specified.', 'formatLength' => 'long', ) ); ]]> Editor provides a WYSIWYG editor that can be used to both create and edit rich HTML content. dijit.Editor is pluggable and may be extended with custom plugins if desired; see the dijit.Editor documentation for more details. The Editor form element provides a number of accessors and mutators for manipulating various dijit parameters, as follows: captureEvents are events that connect to the editing area itself. The following accessors and mutators are available for manipulating capture events: addCaptureEvent($event) addCaptureEvents(array $events) setCaptureEvents(array $events) getCaptureEvents() hasCaptureEvent($event) removeCaptureEvent($event) clearCaptureEvents() events are standard DOM events, such as onClick, onKeyUp, etc. The following accessors and mutators are available for manipulating events: addEvent($event) addEvents(array $events) setEvents(array $events) getEvents() hasEvent($event) removeEvent($event) clearEvents() plugins add functionality to the Editor -- additional tools for the toolbar, additional styles to allow, etc. The following accessors and mutators are available for manipulating plugins: addPlugin($plugin) addPlugins(array $plugins) setPlugins(array $plugins) getPlugins() hasPlugin($plugin) removePlugin($plugin) clearPlugins() editActionInterval is used to group events for undo operations. By default, this value is 3 seconds. The method setEditActionInterval($interval) may be used to set the value, while getEditActionInterval() will retrieve it. focusOnLoad is used to determine whether this particular editor will receive focus when the page has loaded. By default, this is false. The method setFocusOnLoad($flag) may be used to set the value, while getFocusOnLoad() will retrieve it. height specifies the height of the editor; by default, this is 300px. The method setHeight($height) may be used to set the value, while getHeight() will retrieve it. inheritWidth is used to determine whether the editor will use the parent container's width or simply default to 100% width. By default, this is false (i.e., it will fill the width of the window). The method setInheritWidth($flag) may be used to set the value, while getInheritWidth() will retrieve it. minHeight indicates the minimum height of the editor; by default, this is 1em. The method setMinHeight($height) may be used to set the value, while getMinHeight() will retrieve it. styleSheets indicate what additional CSS stylesheets should be used to affect the display of the Editor. By default, none are registered, and it inherits the page styles. The following accessors and mutators are available for manipulating editor stylesheets: addStyleSheet($styleSheet) addStyleSheets(array $styleSheets) setStyleSheets(array $styleSheets) getStyleSheets() hasStyleSheet($styleSheet) removeStyleSheet($styleSheet) clearStyleSheets() addElement('editor', 'content', array( 'plugins' => array('undo', '|', 'bold', 'italic'), 'editActionInterval' => 2, 'focusOnLoad' => true, 'height' => '250px', 'inheritWidth' => true, 'styleSheets' => array('/js/custom/editor.css'), )); ]]> HorizontalSlider provides a slider UI widget for selecting a numeric value in a range. Internally, it sets the value of a hidden element which is submitted by the form. HorizontalSlider derives from the abstract Slider dijit element. Additionally, it has a variety of methods for setting and configuring slider rules and rule labels. setTopDecorationDijit($dijit) and setBottomDecorationDijit($dijit): set the name of the dijit to use for either the top or bottom of the slider. This should not include the "dijit.form." prefix, but rather only the final name -- one of "HorizontalRule" or "HorizontalRuleLabels". setTopDecorationContainer($container) and setBottomDecorationContainer($container): specify the name to use for the container element of the rules; e.g. 'topRule', 'topContainer', etc. setTopDecorationLabels(array $labels) and setBottomDecorationLabels(array $labels): set the labels to use for one of the RuleLabels dijit types. These should be an indexed array; specify a single empty space to skip a given label position (such as the beginning or end). setTopDecorationParams(array $params) and setBottomDecorationParams(array $params): dijit parameters to use when configuring the given Rule or RuleLabels dijit. setTopDecorationAttribs(array $attribs) and setBottomDecorationAttribs(array $attribs): HTML attributes to specify for the given Rule or RuleLabels HTML element container. getTopDecoration() and getBottomDecoration(): retrieve all metadata for a given Rule or RuleLabels definition, as provided by the above mutators. The following will create a horizontal slider selection with integer values ranging from -10 to 10. The top will have labels at the 20%, 40%, 60%, and 80% marks. The botton will have rules at 0, 50%, and 100%. Each time the value is changed, the hidden element storing the value will be updated. 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;', ), ), ) ); ]]> A number spinner is a text element for entering numeric values; it also includes elements for incrementing and decrementing the value by a set amount. The following methods are available: setDefaultTimeout($timeout) and getDefaultTimeout(): set and retrieve the default timeout, in milliseconds, between when the button is held pressed and the value is changed. setTimeoutChangeRate($rate) and getTimeoutChangeRate(): set and retrieve the rate, in milliseconds, at which changes will be made when a button is held pressed. setLargeDelta($delta) and getLargeDelta(): set and retrieve the amount by which the numeric value should change when a button is held pressed. setSmallDelta($delta) and getSmallDelta(): set and retrieve the delta by which the number should change when a button is pressed once. setIntermediateChanges($flag) and getIntermediateChanges(): set and retrieve the flag indicating whether or not each value change should be shown when a button is held pressed. setRangeMessage($message) and getRangeMessage(): set and retrieve the message indicating the range of values available. setMin($value) and getMin(): set and retrieve the minimum value possible. setMax($value) and getMax(): set and retrieve the maximum value possible. addElement( 'NumberSpinner', 'foo', array( 'value' => '7', 'label' => 'NumberSpinner', 'smallDelta' => 5, 'largeDelta' => 25, 'defaultTimeout' => 500, 'timeoutChangeRate' => 100, 'min' => 9, 'max' => 1550, 'places' => 0, 'maxlength' => 20, ) ); ]]> A number text box is a text element for entering numeric values; unlike NumberSpinner, numbers are entered manually. Validations and constraints can be provided to ensure the number stays in a particular range or format. Internally, NumberTextBox derives from ValidationTextBox and TextBox; all methods available to those classes are available. In addition, the following methods can be used to set individual constraints: setLocale($locale) and getLocale(): specify and retrieve a specific or alternate locale to use with this dijit. setPattern($pattern) and getPattern(): set and retrieve a number pattern format to use to format the number. setType($type) and getType(): set and retrieve the numeric format type to use (should be one of 'decimal', 'percent', or 'currency'). setPlaces($places) and getPlaces(): set and retrieve the number of decimal places to support. setStrict($flag) and getStrict(): set and retrieve the value of the strict flag, which indicates how much leniency is allowed in relation to whitespace and non-numeric characters. addElement( 'NumberTextBox', 'elevation', array( 'label' => 'NumberTextBox', 'required' => true, 'invalidMessage' => 'Invalid elevation.', 'places' => 0, 'constraints' => array( 'min' => -20000, 'max' => 20000, ), ) ); ]]> PasswordTextBox is simply a ValidationTextBox that is tied to a password input; its sole purpose is to allow for a dijit-themed text entry for passwords that also provides client-side validation. Internally, NumberTextBox derives from ValidationTextBox and TextBox; all methods available to those classes are available. 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', ) ); ]]> RadioButton wraps standard radio input elements to provide a consistent look and feel with other dojo dijits. RadioButton extends from DijitMulti, which allows you to specify select options via the setMultiOptions() and setMultiOption() methods. By default, this element registers an InArray validator which validates against the array keys of registered options. You can disable this behavior by either calling setRegisterInArrayValidator(false), or by passing a false value to the registerInArrayValidator configuration key. addElement( 'RadioButton', 'foo', array( 'label' => 'RadioButton', 'multiOptions' => array( 'foo' => 'Foo', 'bar' => 'Bar', 'baz' => 'Baz', ), 'value' => 'bar', ) ); ]]> SimpleTextarea acts primarily like a standard HTML textarea. However, it does not support either the rows or cols settings. Instead, the textarea width should be specified using standard CSS measurements. Unlike Textarea, it will not grow automatically addElement( 'SimpleTextarea', 'simpletextarea', array( 'label' => 'SimpleTextarea', 'required' => true, 'style' => 'width: 80em; height: 25em;', ) ); ]]> Slider is an abstract element from which HorizontalSlider and VerticalSlider both derive. It exposes a number of common methods for configuring your sliders, including: setClickSelect($flag) and getClickSelect(): set and retrieve the flag indicating whether or not clicking the slider changes the value. setIntermediateChanges($flag) and getIntermediateChanges(): set and retrieve the flag indicating whether or not the dijit will send a notification on each slider change event. setShowButtons($flag) and getShowButtons(): set and retrieve the flag indicating whether or not buttons on either end will be displayed; if so, the user can click on these to change the value of the slider. setDiscreteValues($value) and getDiscreteValues(): set and retrieve the number of discrete values represented by the slider. setMaximum($value) and getMaximum(): set the maximum value of the slider. setMinimum($value) and getMinimum(): set the minimum value of the slider. setPageIncrement($value) and getPageIncrement(): set the amount by which the slider will change on keyboard events. Example usage is provided with each concrete extending class. While there is no Dijit named SubmitButton, we include one here to provide a button dijit capable of submitting a form without requiring any additional javascript bindings. It works exactly like the Button dijit. addElement( 'SubmitButton', 'foo', array( 'required' => false, 'ignore' => true, 'label' => 'Submit Button!', ) ); ]]> TextBox is included primarily to provide a text input with consistent look-and-feel to the other dijits. However, it also includes some minor filtering and validation capabilities, represented in the following methods: setLowercase($flag) and getLowercase(): set and retrieve the flag indicating whether or not input should be cast to lowercase. setPropercase($flag) and getPropercase(): set and retrieve the flag indicating whether or not the input should be cast to Proper Case. setUppercase($flag) and getUppercase(): set and retrieve the flag indicating whether or not the input should be cast to UPPERCASE. setTrim($flag) and getTrim(): set and retrieve the flag indicating whether or not leading or trailing whitespace should be stripped. setMaxLength($length) and getMaxLength(): set and retrieve the maximum length of input. addElement( 'TextBox', 'foo', array( 'value' => 'some text', 'label' => 'TextBox', 'trim' => true, 'propercase' => true, ) ); ]]> Textarea acts primarily like a standard HTML textarea. However, it does not support either the rows or cols settings. Instead, the textarea width should be specified using standard CSS measurements; rows should be omitted entirely. The textarea will then grow vertically as text is added to it. addElement( 'Textarea', 'textarea', array( 'label' => 'Textarea', 'required' => true, 'style' => 'width: 200px;', ) ); ]]> TimeTextBox is a text input that provides a drop-down for selecting a time. The drop-down may be configured to show a certain window of time, with specified increments. Internally, TimeTextBox derives from DateTextBox, ValidationTextBox and TextBox; all methods available to those classes are available. In addition, the following methods can be used to set individual constraints: setTimePattern($pattern) and getTimePattern(): set and retrieve the unicode time format pattern for formatting the time. setClickableIncrement($format) and getClickableIncrement(): set the ISO-8601 string representing the amount by which every clickable element in the time picker increases. setVisibleIncrement($format) and getVisibleIncrement(): set the increment visible in the time chooser; must follow ISO-8601 formats. setVisibleRange($format) and getVisibleRange(): set and retrieve the range of time visible in the time chooser at any given moment; must follow ISO-8601 formats. The following will create a TimeTextBox that displays 2 hours at a time, with increments of 10 minutes. addElement( 'TimeTextBox', 'foo', array( 'label' => 'TimeTextBox', 'required' => true, 'visibleRange' => 'T04:00:00', 'visibleIncrement' => 'T00:10:00', 'clickableIncrement' => 'T00:10:00', ) ); ]]> ValidationTextBox provides the ability to add validations and constraints to a text input. Internally, it derives from TextBox, and adds the following accessors and mutators for manipulating dijit parameters: setInvalidMessage($message) and getInvalidMessage(): set and retrieve the tooltip message to display when the value does not validate. setPromptMessage($message) and getPromptMessage(): set and retrieve the tooltip message to display for element usage. setRegExp($regexp) and getRegExp(): set and retrieve the regular expression to use for validating the element. The regular expression does not need boundaries (unlike PHP's preg* family of functions). setConstraint($key, $value) and getConstraint($key): set and retrieve additional constraints to use when validating the element; used primarily with subclasses. Constraints are stored in the 'constraints' key of the dijit parameters. setConstraints(array $constraints) and getConstraints(): set and retrieve individual constraints to use when validating the element; used primarily with subclasses. hasConstraint($key): test whether a given constraint exists. removeConstraint($key) and clearConstraints(): remove an individual or all constraints for the element. The following will create a ValidationTextBox that requires a single string consisting solely of word characters (i.e., no spaces, most punctuation is invalid). addElement( 'ValidationTextBox', 'foo', array( 'label' => 'ValidationTextBox', 'required' => true, 'regExp' => '[\w]+', 'invalidMessage' => 'Invalid non-space text.', ) ); ]]> VerticalSlider is the sibling of HorizontalSlider, and operates in every way like that element. The only real difference is that the 'top*' and 'bottom*' methods are replaced by 'left*' and 'right*', and instead of using HorizontalRule and HorizontalRuleLabels, VerticalRule and VerticalRuleLabels should be used. The following will create a vertical slider selection with integer values ranging from -10 to 10. The left will have labels at the 20%, 40%, 60%, and 80% marks. The right will have rules at 0, 50%, and 100%. Each time the value is changed, the hidden element storing the value will be updated. 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%', ), ) ); ]]>