1 <?xml version="1.0" encoding="UTF-8"?>
3 <sect2 id="zend.dojo.form.elements">
4 <title>Dijit-Specific Form Elements</title>
7 Each form dijit for which a view helper is provided has a corresponding
8 <classname>Zend_Form</classname> element. All of them have the following methods
9 available for manipulating dijit parameters:
15 <methodname>setDijitParam($key, $value)</methodname>: set a single dijit
16 parameter. If the dijit parameter already exists, it will be
23 <methodname>setDijitParams(array $params)</methodname>: set several dijit
24 parameters at once. Any passed parameters matching those
25 already present will overwrite.
31 <methodname>hasDijitParam($key)</methodname>: If a given dijit parameter
32 is defined and present, return <constant>TRUE</constant>, otherwise return
33 <constant>FALSE</constant>.
39 <methodname>getDijitParam($key)</methodname>: retrieve the given dijit
40 parameter. If not available, a <constant>NULL</constant> value is returned.
46 <methodname>getDijitParams()</methodname>: retrieve all dijit parameters.
52 <methodname>removeDijitParam($key)</methodname>: remove the given dijit parameter.
58 <methodname>clearDijitParams()</methodname>: clear all currently defined
65 Dijit parameters are stored in the <property>dijitParams</property> public
66 property. Thus, you can dijit-enable an existing form element simply by
67 setting this property on the element; you simply will not have the
68 above accessors to facilitate manipulating the parameters.
72 Additionally, dijit-specific elements implement a different list of
73 decorators, corresponding to the following:
76 <programlisting language="php"><![CDATA[
77 $element->addDecorator('DijitElement')
78 ->addDecorator('Errors')
79 ->addDecorator('HtmlTag', array('tag' => 'dd'))
80 ->addDecorator('Label', array('tag' => 'dt'));
84 In effect, the DijitElement decorator is used in place of the standard
89 Finally, the base Dijit element ensures that the Dojo view helper path
94 A variant on DijitElement, DijitMulti, provides the functionality of
95 the <classname>Multi</classname> abstract form element, allowing the developer to
96 specify 'multiOptions' -- typically select options or radio options.
100 The following dijit elements are shipped in the standard Zend
101 Framework distribution.
104 <sect3 id="zend.dojo.form.elements.button">
105 <title>Button</title>
108 While not deriving from <link
109 linkend="zend.form.standardElements.button">the standard Button
110 element</link>, it does implement the same functionality, and
111 can be used as a drop-in replacement for it. The following
112 functionality is exposed:
118 <methodname>getLabel()</methodname> will utilize the element name as the
119 button label if no name is provided. Additionally, it will
120 translate the name if a translation adapter with a matching
121 translation message is available.
127 <methodname>isChecked()</methodname> determines if the value submitted
128 matches the label; if so, it returns <constant>TRUE</constant>. This is useful
129 for determining which button was used when a form was submitted.
135 Additionally, only the decorators <classname>DijitElement</classname> and
136 <classname>DtDdWrapper</classname> are utilized for Button elements.
139 <example id="zend.dojo.form.elements.button.example">
140 <title>Example Button dijit element usage</title>
142 <programlisting language="php"><![CDATA[
147 'label' => 'Button Label',
154 <sect3 id="zend.dojo.form.elements.checkBox">
155 <title>CheckBox</title>
158 While not deriving from <link
159 linkend="zend.form.standardElements.checkbox">the standard
160 Checkbox element</link>, it does implement the same
161 functionality. This means that the following methods are exposed:
167 <methodname>setCheckedValue($value)</methodname>: set the value to use when
168 the element is checked.
174 <methodname>getCheckedValue()</methodname>: get the value of the item to
181 <methodname>setUncheckedValue($value)</methodname>: set the value of the
182 item to use when it is unchecked.
188 <methodname>getUncheckedValue()</methodname>: get the value of the item to
189 use when it is unchecked.
195 <methodname>setChecked($flag)</methodname>: mark the element as checked or
202 <methodname>isChecked()</methodname>: determine if the element is currently
208 <example id="zend.dojo.form.elements.checkBox.example">
209 <title>Example CheckBox dijit element usage</title>
211 <programlisting language="php"><![CDATA[
216 'label' => 'A check box',
217 'checkedValue' => 'foo',
218 'uncheckedValue' => 'bar',
226 <sect3 id="zend.dojo.form.elements.comboBox">
227 <title>ComboBox and FilteringSelect</title>
230 As noted in the ComboBox <link
231 linkend="zend.dojo.view.dijit.form">dijit view helper
232 documentation</link>, ComboBoxes are a hybrid between select
233 and text input, allowing for autocompletion and the ability to
234 specify an alternate to the options provided. FilteringSelects are
235 the same, but do not allow arbitrary input.
239 <title>ComboBoxes return the label values</title>
242 ComboBoxes return the label values, and not the option values,
243 which can lead to a disconnect in expectations. For this reason,
244 ComboBoxes do not auto-register an <classname>InArray</classname>
245 validator (though FilteringSelects do).
250 The ComboBox and FilteringSelect form elements provide accessors and mutators for
251 examining and setting the select options as well as specifying a
252 <command>dojo.data</command> datastore (if used). They extend from DijitMulti, which
253 allows you to specify select options via the
254 <methodname>setMultiOptions()</methodname> and <methodname>setMultiOption()</methodname>
255 methods. In addition, the following methods are available:
261 <methodname>getStoreInfo()</methodname>: get all datastore information
262 currently set. Returns an empty array if no data is currently set.
268 <methodname>setStoreId($identifier)</methodname>: set the store identifier
269 variable (usually referred to by the attribute 'jsId' in Dojo).
270 This should be a valid javascript variable name.
276 <methodname>getStoreId()</methodname>: retrieve the store identifier
283 <methodname>setStoreType($dojoType)</methodname>: set the datastore class
284 to use; e.g., "<command>dojo.data.ItemFileReadStore</command>".
290 <methodname>getStoreType()</methodname>: get the dojo datastore class to use.
296 <methodname>setStoreParams(array $params)</methodname>: set any parameters
297 used to configure the datastore object. As an example,
298 <command>dojo.data.ItemFileReadStore</command> datastore would expect a 'url'
299 parameter pointing to a location that would return the
300 <command>dojo.data</command> object.
306 <methodname>getStoreParams()</methodname>: get any datastore parameters
307 currently set; if none, an empty array is returned.
313 <methodname>setAutocomplete($flag)</methodname>: indicate whether or not
314 the selected item will be used when the user leaves the element.
320 <methodname>getAutocomplete()</methodname>: get the value of the
327 By default, if no <command>dojo.data</command> store is registered with the element,
328 this element registers an <classname>InArray</classname> validator which
329 validates against the array keys of registered options. You can
330 disable this behavior by either calling
331 <methodname>setRegisterInArrayValidator(false)</methodname>, or by passing a
332 <constant>FALSE</constant> value to the <property>registerInArrayValidator</property>
336 <example id="zend.dojo.form.elements.comboBox.selectExample">
337 <title>ComboBox dijit element usage as select input</title>
339 <programlisting language="php"><![CDATA[
344 'label' => 'ComboBox (select)',
346 'autocomplete' => false,
347 'multiOptions' => array(
351 'orange' => 'Orange',
360 <example id="zend.dojo.form.elements.comboBox.datastoreExample">
361 <title>ComboBox dijit element usage with datastore</title>
363 <programlisting language="php"><![CDATA[
368 'label' => 'ComboBox (datastore)',
369 'storeId' => 'stateStore',
370 'storeType' => 'dojo.data.ItemFileReadStore',
371 'storeParams' => array(
372 'url' => '/js/states.txt',
374 'dijitParams' => array(
375 'searchAttr' => 'name',
383 The above examples could also utilize <classname>FilteringSelect</classname>
384 instead of <classname>ComboBox</classname>.
388 <sect3 id="zend.dojo.form.elements.currencyTextBox">
389 <title>CurrencyTextBox</title>
392 The CurrencyTextBox is primarily for supporting currency input. The
393 currency may be localized, and can support both fractional and
394 non-fractional values.
398 Internally, CurrencyTextBox derives from <link
399 linkend="zend.dojo.form.elements.numberTextBox">NumberTextBox</link>,
401 linkend="zend.dojo.form.elements.validationTextBox">ValidationTextBox</link>,
402 and <link linkend="zend.dojo.form.elements.textBox">TextBox</link>;
403 all methods available to those classes are available. In addition,
404 the following constraint methods can be used:
410 <methodname>setCurrency($currency)</methodname>: set the currency type to
411 use; should follow the <ulink
412 url="http://en.wikipedia.org/wiki/ISO_4217">ISO-4217</ulink> specification.
418 <methodname>getCurrency()</methodname>: retrieve the current currency type.
424 <methodname>setSymbol($symbol)</methodname>: set the 3-letter <ulink
425 url="http://en.wikipedia.org/wiki/ISO_4217">ISO-4217</ulink>
426 currency symbol to use.
432 <methodname>getSymbol()</methodname>: get the current currency symbol.
438 <methodname>setFractional($flag)</methodname>: set whether or not the
439 currency should allow for fractional values.
445 <methodname>getFractional()</methodname>: retrieve the status of the
451 <example id="zend.dojo.form.elements.currencyTextBox.example">
452 <title>Example CurrencyTextBox dijit element usage</title>
454 <programlisting language="php"><![CDATA[
459 'label' => 'Currency:',
462 'invalidMessage' => 'Invalid amount. ' .
463 'Include dollar sign, commas, and cents.',
464 'fractional' => false,
471 <sect3 id="zend.dojo.form.elements.dateTextBox">
472 <title>DateTextBox</title>
475 DateTextBox provides a calendar drop-down for selecting a date, as
476 well as client-side date validation and formatting.
480 Internally, DateTextBox derives from <link
481 linkend="zend.dojo.form.elements.validationTextBox">ValidationTextBox</link>
482 and <link linkend="zend.dojo.form.elements.textBox">TextBox</link>;
483 all methods available to those classes are available. In addition,
484 the following methods can be used to set individual constraints:
490 <methodname>setAmPm($flag)</methodname> and <methodname>getAmPm()</methodname>:
491 Whether or not to use AM or PM strings in times.
497 <methodname>setStrict($flag)</methodname> and
498 <methodname>getStrict()</methodname>: whether or not to use strict regular
499 expression matching when validating input. If <constant>FALSE</constant>, which
500 is the default, it will be lenient about whitespace and some abbreviations.
506 <methodname>setLocale($locale)</methodname> and
507 <methodname>getLocale()</methodname>: Set and retrieve the locale to use with
508 this specific element.
514 <methodname>setDatePattern($pattern)</methodname> and
515 <methodname>getDatePattern()</methodname>: provide and retrieve the <ulink
516 url="http://www.unicode.org/reports/tr35/#Date_Format_Patterns">unicode
517 date format pattern</ulink> for formatting the date.
523 <methodname>setFormatLength($formatLength)</methodname> and
524 <methodname>getFormatLength()</methodname>: provide and retrieve the format
525 length type to use; should be one of "long", "short", "medium" or "full".
531 <methodname>setSelector($selector)</methodname> and
532 <methodname>getSelector()</methodname>: provide and retrieve the style of
533 selector; should be either "date" or "time".
538 <example id="zend.dojo.form.elements.dateTextBox.example">
539 <title>Example DateTextBox dijit element usage</title>
541 <programlisting language="php"><![CDATA[
548 'invalidMessage' => 'Invalid date specified.',
549 'formatLength' => 'long',
556 <sect3 id="zend.dojo.form.elements.editor">
557 <title>Editor</title>
560 Editor provides a <acronym>WYSIWYG</acronym> editor that can be used to both create and
561 edit rich <acronym>HTML</acronym> content. <command>dijit.Editor</command> is pluggable
562 and may be extended with custom plugins if desired; see <ulink
563 url="http://dojotoolkit.org/reference-guide/dijit/Editor.html">the
564 dijit.Editor documentation</ulink> for more details.
568 The Editor form element provides a number of accessors and mutators
569 for manipulating various dijit parameters, as follows:
575 <emphasis>captureEvents</emphasis> are events that connect
576 to the editing area itself. The following accessors and
577 mutators are available for manipulating capture events:
582 <para><methodname>addCaptureEvent($event)</methodname></para>
586 <para><methodname>addCaptureEvents(array $events)</methodname></para>
590 <para><methodname>setCaptureEvents(array $events)</methodname></para>
593 <listitem><para><methodname>getCaptureEvents()</methodname></para></listitem>
596 <para><methodname>hasCaptureEvent($event)</methodname></para>
600 <para><methodname>removeCaptureEvent($event)</methodname></para>
604 <para><methodname>clearCaptureEvents()</methodname></para>
611 <emphasis>events</emphasis> are standard <acronym>DOM</acronym> events, such as
612 onClick, onKeyUp, etc. The following accessors and mutators
613 are available for manipulating events:
617 <listitem><para><methodname>addEvent($event)</methodname></para></listitem>
620 <para><methodname>addEvents(array $events)</methodname></para>
624 <para><methodname>setEvents(array $events)</methodname></para>
627 <listitem><para><methodname>getEvents()</methodname></para></listitem>
628 <listitem><para><methodname>hasEvent($event)</methodname></para></listitem>
629 <listitem><para><methodname>removeEvent($event)</methodname></para></listitem>
630 <listitem><para><methodname>clearEvents()</methodname></para></listitem>
636 <emphasis>plugins</emphasis> add functionality to the
637 Editor -- additional tools for the toolbar, additional
638 styles to allow, etc. The following accessors and mutators
639 are available for manipulating plugins:
643 <listitem><para><methodname>addPlugin($plugin)</methodname></para></listitem>
646 <para><methodname>addPlugins(array $plugins)</methodname></para>
650 <para><methodname>setPlugins(array $plugins)</methodname></para>
653 <listitem><para><methodname>getPlugins()</methodname></para></listitem>
654 <listitem><para><methodname>hasPlugin($plugin)</methodname></para></listitem>
655 <listitem><para><methodname>removePlugin($plugin)</methodname></para></listitem>
656 <listitem><para><methodname>clearPlugins()</methodname></para></listitem>
662 <emphasis>editActionInterval</emphasis> is used to group
663 events for undo operations. By default, this value is 3
665 <methodname>setEditActionInterval($interval)</methodname> may be used to
666 set the value, while <methodname>getEditActionInterval()</methodname>
673 <emphasis>focusOnLoad</emphasis> is used to determine
674 whether this particular editor will receive focus when the
675 page has loaded. By default, this is <constant>FALSE</constant>. The method
676 <methodname>setFocusOnLoad($flag)</methodname> may be used to
677 set the value, while <methodname>getFocusOnLoad()</methodname>
684 <emphasis>height</emphasis> specifies the height of the
685 editor; by default, this is 300px. The method
686 <methodname>setHeight($height)</methodname> may be used to set the
687 value, while <methodname>getHeight()</methodname> will retrieve it.
693 <emphasis>inheritWidth</emphasis> is used to determine
694 whether the editor will use the parent container's width or
695 simply default to 100% width. By default, this is <constant>FALSE</constant>
696 (i.e., it will fill the width of the window). The method
697 <methodname>setInheritWidth($flag)</methodname> may be used to set the
698 value, while <methodname>getInheritWidth()</methodname> will retrieve
705 <emphasis>minHeight</emphasis> indicates the minimum height
706 of the editor; by default, this is 1em. The method
707 <methodname>setMinHeight($height)</methodname> may be used to set the
708 value, while <methodname>getMinHeight()</methodname> will retrieve it.
714 <emphasis>styleSheets</emphasis> indicate what additional
715 <acronym>CSS</acronym> stylesheets should be used to affect the display of the
716 Editor. By default, none are registered, and it inherits the
717 page styles. The following accessors and mutators are
718 available for manipulating editor stylesheets:
723 <para><methodname>addStyleSheet($styleSheet)</methodname></para>
727 <para><methodname>addStyleSheets(array $styleSheets)</methodname></para>
731 <para><methodname>setStyleSheets(array $styleSheets)</methodname></para>
734 <listitem><para><methodname>getStyleSheets()</methodname></para></listitem>
737 <para><methodname>hasStyleSheet($styleSheet)</methodname></para>
741 <para><methodname>removeStyleSheet($styleSheet)</methodname></para>
744 <listitem><para><methodname>clearStyleSheets()</methodname></para></listitem>
749 <example id="zend.dojo.form.elements.editor.example">
750 <title>Example Editor dijit element usage</title>
752 <programlisting language="php"><![CDATA[
753 $form->addElement('editor', 'content', array(
754 'plugins' => array('undo', '|', 'bold', 'italic'),
755 'editActionInterval' => 2,
756 'focusOnLoad' => true,
758 'inheritWidth' => true,
759 'styleSheets' => array('/js/custom/editor.css'),
765 <title>Editor Dijit uses div by default</title>
768 The Editor dijit uses an <acronym>HTML</acronym> <acronym>DIV</acronym> by default.
769 The <command>dijit._editor.RichText</command> documentation indicates that
770 having it built on an <acronym>HTML</acronym> <acronym>TEXTAREA</acronym> can
771 potentially have security implications.
775 That said, there may be times when you want an Editor widget that can gracefully
776 degrade to a <acronym>TEXTAREA</acronym>. In such situations, you can do so by
777 setting the <property>degrade</property> property to <constant>TRUE</constant>:
780 <programlisting language="php"><![CDATA[
782 $editor = new Zend_Dojo_Form_Element_Editor('foo', array(
786 // Construction via the form:
787 $form->addElement('editor', 'content', array(
791 // Or after instantiation:
792 $editor->degrade = true;
797 <sect3 id="zend.dojo.form.elements.horizontalSlider">
798 <title>HorizontalSlider</title>
801 HorizontalSlider provides a slider UI widget for selecting a
802 numeric value in a range. Internally, it sets the value of a hidden
803 element which is submitted by the form.
807 HorizontalSlider derives from the <link
808 linkend="zend.dojo.form.elements.slider">abstract Slider dijit
809 element</link>. Additionally, it has a variety of methods for
810 setting and configuring slider rules and rule labels.
816 <methodname>setTopDecorationDijit($dijit)</methodname> and
817 <methodname>setBottomDecorationDijit($dijit)</methodname>: set the name
818 of the dijit to use for either the top or bottom of the
819 slider. This should not include the "dijit.form." prefix,
820 but rather only the final name -- one of "HorizontalRule"
821 or "HorizontalRuleLabels".
827 <methodname>setTopDecorationContainer($container)</methodname> and
828 <methodname>setBottomDecorationContainer($container)</methodname>:
829 specify the name to use for the container element of the
830 rules; e.g. 'topRule', 'topContainer', etc.
836 <methodname>setTopDecorationLabels(array $labels)</methodname> and
837 <methodname>setBottomDecorationLabels(array $labels)</methodname>: set
838 the labels to use for one of the RuleLabels dijit types.
839 These should be an indexed array; specify a single empty
840 space to skip a given label position (such as the beginning
847 <methodname>setTopDecorationParams(array $params)</methodname> and
848 <methodname>setBottomDecorationParams(array $params)</methodname>:
849 dijit parameters to use when configuring the given Rule or
856 <methodname>setTopDecorationAttribs(array $attribs)</methodname> and
857 <methodname>setBottomDecorationAttribs(array $attribs)</methodname>:
858 <acronym>HTML</acronym> attributes to specify for the given Rule or RuleLabels
859 <acronym>HTML</acronym> element container.
865 <methodname>getTopDecoration()</methodname> and
866 <methodname>getBottomDecoration()</methodname>: retrieve all metadata
867 for a given Rule or RuleLabels definition, as provided by
873 <example id="zend.dojo.form.elements.horizontalSlider.example">
874 <title>Example HorizontalSlider dijit element usage</title>
877 The following will create a horizontal slider selection with
878 integer values ranging from -10 to 10. The top will have labels
879 at the 20%, 40%, 60%, and 80% marks. The bottom will have rules
880 at 0, 50%, and 100%. Each time the value is changed, the hidden
881 element storing the value will be updated.
884 <programlisting language="php"><![CDATA[
889 'label' => 'HorizontalSlider',
893 'discreteValues' => 11,
894 'intermediateChanges' => true,
895 'showButtons' => true,
896 'topDecorationDijit' => 'HorizontalRuleLabels',
897 'topDecorationContainer' => 'topContainer',
898 'topDecorationLabels' => array(
906 'topDecorationParams' => array(
907 'container' => array(
908 'style' => 'height:1.2em; font-size=75%;color:gray;',
911 'style' => 'height:1em; font-size=75%;color:gray;',
914 'bottomDecorationDijit' => 'HorizontalRule',
915 'bottomDecorationContainer' => 'bottomContainer',
916 'bottomDecorationLabels' => array(
921 'bottomDecorationParams' => array(
923 'style' => 'height:1em; font-size=75%;color:gray;',
932 <sect3 id="zend.dojo.form.elements.numberSpinner">
933 <title>NumberSpinner</title>
936 A number spinner is a text element for entering numeric values; it
937 also includes elements for incrementing and decrementing the value
942 The following methods are available:
948 <methodname>setDefaultTimeout($timeout)</methodname> and
949 <methodname>getDefaultTimeout()</methodname>: set and retrieve the default
950 timeout, in milliseconds, between when the button is held
951 pressed and the value is changed.
957 <methodname>setTimeoutChangeRate($rate)</methodname> and
958 <methodname>getTimeoutChangeRate()</methodname>: set and retrieve the
959 rate, in milliseconds, at which changes will be made when a
960 button is held pressed.
966 <methodname>setLargeDelta($delta)</methodname> and
967 <methodname>getLargeDelta()</methodname>: set and retrieve the amount by
968 which the numeric value should change when a button is held pressed.
974 <methodname>setSmallDelta($delta)</methodname> and
975 <methodname>getSmallDelta()</methodname>: set and retrieve the delta by
976 which the number should change when a button is pressed once.
982 <methodname>setIntermediateChanges($flag)</methodname> and
983 <methodname>getIntermediateChanges()</methodname>: set and retrieve the
984 flag indicating whether or not each value change should be
985 shown when a button is held pressed.
991 <methodname>setRangeMessage($message)</methodname> and
992 <methodname>getRangeMessage()</methodname>: set and retrieve the message
993 indicating the range of values available.
999 <methodname>setMin($value)</methodname> and <methodname>getMin()</methodname>:
1000 set and retrieve the minimum value possible.
1006 <methodname>setMax($value)</methodname> and <methodname>getMax()</methodname>:
1007 set and retrieve the maximum value possible.
1012 <example id="zend.dojo.form.elements.numberSpinner.example">
1013 <title>Example NumberSpinner dijit element usage</title>
1015 <programlisting language="php"><![CDATA[
1021 'label' => 'NumberSpinner',
1024 'defaultTimeout' => 500,
1025 'timeoutChangeRate' => 100,
1032 ]]></programlisting>
1036 <sect3 id="zend.dojo.form.elements.numberTextBox">
1037 <title>NumberTextBox</title>
1040 A number text box is a text element for entering numeric values;
1041 unlike NumberSpinner, numbers are entered manually. Validations and
1042 constraints can be provided to ensure the number stays in a
1043 particular range or format.
1047 Internally, NumberTextBox derives from <link
1048 linkend="zend.dojo.form.elements.validationTextBox">ValidationTextBox</link>
1049 and <link linkend="zend.dojo.form.elements.textBox">TextBox</link>;
1050 all methods available to those classes are available. In addition,
1051 the following methods can be used to set individual constraints:
1057 <methodname>setLocale($locale)</methodname> and
1058 <methodname>getLocale()</methodname>: specify and retrieve a specific or
1059 alternate locale to use with this dijit.
1065 <methodname>setPattern($pattern)</methodname> and
1066 <methodname>getPattern()</methodname>: set and retrieve a <ulink
1067 url="http://www.unicode.org/reports/tr35/#Number_Format_Patterns">number
1068 pattern format</ulink> to use to format the number.
1074 <methodname>setType($type)</methodname> and <methodname>getType()</methodname>:
1075 set and retrieve the numeric format type to use (should be one of
1076 'decimal', 'percent', or 'currency').
1082 <methodname>setPlaces($places)</methodname> and
1083 <methodname>getPlaces()</methodname>: set and retrieve the number of decimal
1090 <methodname>setStrict($flag)</methodname> and
1091 <methodname>getStrict()</methodname>: set and retrieve the value of the strict
1092 flag, which indicates how much leniency is allowed in relation to whitespace and
1093 non-numeric characters.
1098 <example id="zend.dojo.form.elements.numberTextBox.example">
1099 <title>Example NumberTextBox dijit element usage</title>
1101 <programlisting language="php"><![CDATA[
1106 'label' => 'NumberTextBox',
1108 'invalidMessage' => 'Invalid elevation.',
1110 'constraints' => array(
1116 ]]></programlisting>
1120 <sect3 id="zend.dojo.form.elements.passwordTextBox">
1121 <title>PasswordTextBox</title>
1124 PasswordTextBox is simply a ValidationTextBox that is tied to a
1125 password input; its sole purpose is to allow for a dijit-themed text
1126 entry for passwords that also provides client-side validation.
1130 Internally, PasswordTextBox derives from <link
1131 linkend="zend.dojo.form.elements.validationTextBox">ValidationTextBox</link>
1132 and <link linkend="zend.dojo.form.elements.textBox">TextBox</link>;
1133 all methods available to those classes are available.
1136 <example id="zend.dojo.form.elements.passwordTextBox.example">
1137 <title>Example PasswordTextBox dijit element usage</title>
1139 <programlisting language="php"><![CDATA[
1144 'label' => 'Password',
1147 'lowercase' => true,
1148 'regExp' => '^[a-z0-9]{6,}$',
1149 'invalidMessage' => 'Invalid password; ' .
1150 'must be at least 6 alphanumeric characters',
1153 ]]></programlisting>
1157 <sect3 id="zend.dojo.form.elements.radioButton">
1158 <title>RadioButton</title>
1161 RadioButton wraps standard radio input elements to provide a
1162 consistent look and feel with other dojo dijits.
1166 RadioButton extends from DijitMulti, which
1167 allows you to specify select options via the
1168 <methodname>setMultiOptions()</methodname> and <methodname>setMultiOption()</methodname>
1173 By default, this element registers an <classname>InArray</classname> validator
1174 which validates against the array keys of registered options. You
1175 can disable this behavior by either calling
1176 <methodname>setRegisterInArrayValidator(false)</methodname>, or by passing a
1177 <constant>FALSE</constant> value to the <property>registerInArrayValidator</property>
1181 <example id="zend.dojo.form.elements.radioButton.example">
1182 <title>Example RadioButton dijit element usage</title>
1184 <programlisting language="php"><![CDATA[
1189 'label' => 'RadioButton',
1190 'multiOptions' => array(
1198 ]]></programlisting>
1202 <sect3 id="zend.dojo.form.elements.simpletextarea">
1203 <title>SimpleTextarea</title>
1206 SimpleTextarea acts primarily like a standard <acronym>HTML</acronym> textarea. However,
1207 it does not support either the rows or cols settings. Instead, the
1208 textarea width should be specified using standard <acronym>CSS</acronym> measurements.
1209 Unlike Textarea, it will not grow automatically
1212 <example id="zend.dojo.form.elements.simpletextarea.example">
1213 <title>Example SimpleTextarea dijit element usage</title>
1215 <programlisting language="php"><![CDATA[
1220 'label' => 'SimpleTextarea',
1222 'style' => 'width: 80em; height: 25em;',
1225 ]]></programlisting>
1229 <sect3 id="zend.dojo.form.elements.slider">
1230 <title>Slider abstract element</title>
1233 Slider is an abstract element from which
1234 <link linkend="zend.dojo.form.elements.horizontalSlider">HorizontalSlider</link>
1235 and <link linkend="zend.dojo.form.elements.verticalSlider">VerticalSlider</link>
1236 both derive. It exposes a number of common methods for configuring
1237 your sliders, including:
1243 <methodname>setClickSelect($flag)</methodname> and
1244 <methodname>getClickSelect()</methodname>: set and retrieve the flag
1245 indicating whether or not clicking the slider changes the value.
1251 <methodname>setIntermediateChanges($flag)</methodname> and
1252 <methodname>getIntermediateChanges()</methodname>: set and retrieve the
1253 flag indicating whether or not the dijit will send a
1254 notification on each slider change event.
1260 <methodname>setShowButtons($flag)</methodname> and
1261 <methodname>getShowButtons()</methodname>: set and retrieve the flag
1262 indicating whether or not buttons on either end will be
1263 displayed; if so, the user can click on these to change the
1264 value of the slider.
1270 <methodname>setDiscreteValues($value)</methodname> and
1271 <methodname>getDiscreteValues()</methodname>: set and retrieve the number
1272 of discrete values represented by the slider.
1278 <methodname>setMaximum($value)</methodname> and
1279 <methodname>getMaximum()</methodname>: set the maximum value of the slider.
1285 <methodname>setMinimum($value)</methodname> and
1286 <methodname>getMinimum()</methodname>: set the minimum value of the slider.
1292 <methodname>setPageIncrement($value)</methodname> and
1293 <methodname>getPageIncrement()</methodname>: set the amount by which the
1294 slider will change on keyboard events.
1300 Example usage is provided with each concrete extending class.
1304 <sect3 id="zend.dojo.form.elements.submitButton">
1305 <title>SubmitButton</title>
1308 While there is no Dijit named SubmitButton, we include one here to
1309 provide a button dijit capable of submitting a form without
1310 requiring any additional javascript bindings. It works exactly like
1311 the <link linkend="zend.dojo.form.elements.button">Button dijit</link>.
1314 <example id="zend.dojo.form.elements.submitButton.example">
1315 <title>Example SubmitButton dijit element usage</title>
1317 <programlisting language="php"><![CDATA[
1322 'required' => false,
1324 'label' => 'Submit Button!',
1327 ]]></programlisting>
1331 <sect3 id="zend.dojo.form.elements.textBox">
1332 <title>TextBox</title>
1335 TextBox is included primarily to provide a text input with
1336 consistent look-and-feel to the other dijits. However, it also
1337 includes some minor filtering and validation capabilities,
1338 represented in the following methods:
1344 <methodname>setLowercase($flag)</methodname> and
1345 <methodname>getLowercase()</methodname>: set and retrieve the flag
1346 indicating whether or not input should be cast to lowercase.
1352 <methodname>setPropercase($flag)</methodname> and
1353 <methodname>getPropercase()</methodname>: set and retrieve the flag
1354 indicating whether or not the input should be cast to Proper Case.
1360 <methodname>setUppercase($flag)</methodname> and
1361 <methodname>getUppercase()</methodname>: set and retrieve
1362 the flag indicating whether or not the input should be cast to
1363 <acronym>UPPERCASE</acronym>.
1369 <methodname>setTrim($flag)</methodname> and <methodname>getTrim()</methodname>:
1370 set and retrieve the flag indicating whether or not leading or trailing
1371 whitespace should be stripped.
1377 <methodname>setMaxLength($length)</methodname> and
1378 <methodname>getMaxLength()</methodname>: set and retrieve the maximum
1384 <example id="zend.dojo.form.elements.textBox.example">
1385 <title>Example TextBox dijit element usage</title>
1387 <programlisting language="php"><![CDATA[
1392 'value' => 'some text',
1393 'label' => 'TextBox',
1395 'propercase' => true,
1398 ]]></programlisting>
1402 <sect3 id="zend.dojo.form.elements.textarea">
1403 <title>Textarea</title>
1406 Textarea acts primarily like a standard <acronym>HTML</acronym> textarea. However, it
1407 does not support either the rows or cols settings. Instead, the
1408 textarea width should be specified using standard <acronym>CSS</acronym> measurements;
1409 rows should be omitted entirely. The textarea will then grow
1410 vertically as text is added to it.
1413 <example id="zend.dojo.form.elements.textarea.example">
1414 <title>Example Textarea dijit element usage</title>
1416 <programlisting language="php"><![CDATA[
1421 'label' => 'Textarea',
1423 'style' => 'width: 200px;',
1426 ]]></programlisting>
1430 <sect3 id="zend.dojo.form.elements.timeTextBox">
1431 <title>TimeTextBox</title>
1434 TimeTextBox is a text input that provides a drop-down for selecting
1435 a time. The drop-down may be configured to show a certain window of
1436 time, with specified increments.
1440 Internally, TimeTextBox derives from <link
1441 linkend="zend.dojo.form.elements.dateTextBox">DateTextBox</link>,
1443 linkend="zend.dojo.form.elements.validationTextBox">ValidationTextBox</link>
1444 and <link linkend="zend.dojo.form.elements.textBox">TextBox</link>;
1445 all methods available to those classes are available. In addition,
1446 the following methods can be used to set individual constraints:
1452 <methodname>setTimePattern($pattern)</methodname> and
1453 <methodname>getTimePattern()</methodname>: set and retrieve the <ulink
1454 url="http://www.unicode.org/reports/tr35/#Date_Format_Patterns">unicode
1455 time format pattern</ulink> for formatting the time.
1461 <methodname>setClickableIncrement($format)</methodname> and
1462 <methodname>getClickableIncrement()</methodname>: set the <ulink
1463 url="http://en.wikipedia.org/wiki/ISO_8601">ISO_8601</ulink>
1464 string representing the amount by which every clickable element
1465 in the time picker increases.
1471 <methodname>setVisibleIncrement($format)</methodname> and
1472 <methodname>getVisibleIncrement()</methodname>: set the increment visible
1473 in the time chooser; must follow <constant>ISO_8601</constant> formats.
1479 <methodname>setVisibleRange($format)</methodname> and
1480 <methodname>getVisibleRange()</methodname>: set and retrieve the range of
1481 time visible in the time chooser at any given moment; must
1482 follow <constant>ISO_8601</constant> formats.
1487 <example id="zend.dojo.form.elements.timeTextBox.example">
1488 <title>Example TimeTextBox dijit element usage</title>
1491 The following will create a TimeTextBox that displays 2 hours
1492 at a time, with increments of 10 minutes.
1495 <programlisting language="php"><![CDATA[
1500 'label' => 'TimeTextBox',
1502 'visibleRange' => 'T04:00:00',
1503 'visibleIncrement' => 'T00:10:00',
1504 'clickableIncrement' => 'T00:10:00',
1507 ]]></programlisting>
1511 <sect3 id="zend.dojo.form.elements.validationTextBox">
1512 <title>ValidationTextBox</title>
1515 ValidationTextBox provides the ability to add validations and constraints to a text
1516 input. Internally, it derives from <link
1517 linkend="zend.dojo.form.elements.textBox">TextBox</link>, and adds the following
1518 accessors and mutators for manipulating dijit parameters:
1524 <methodname>setInvalidMessage($message)</methodname> and
1525 <methodname>getInvalidMessage()</methodname>: set and retrieve the tooltip
1526 message to display when the value does not validate.
1532 <methodname>setPromptMessage($message)</methodname> and
1533 <methodname>getPromptMessage()</methodname>: set and retrieve the tooltip
1534 message to display for element usage.
1540 <methodname>setRegExp($regexp)</methodname> and
1541 <methodname>getRegExp()</methodname>: set and retrieve the regular expression to
1542 use for validating the element. The regular expression does not need boundaries
1543 (unlike <acronym>PHP</acronym>'s preg* family of functions).
1549 <methodname>setConstraint($key, $value)</methodname> and
1550 <methodname>getConstraint($key)</methodname>: set and retrieve additional
1551 constraints to use when validating the element; used primarily
1552 with subclasses. Constraints are stored in the 'constraints'
1553 key of the dijit parameters.
1559 <methodname>setConstraints(array $constraints)</methodname> and
1560 <methodname>getConstraints()</methodname>: set and retrieve individual
1561 constraints to use when validating the element; used primarily with subclasses.
1567 <methodname>hasConstraint($key)</methodname>: test whether a given constraint
1574 <methodname>removeConstraint($key)</methodname> and
1575 <methodname>clearConstraints()</methodname>: remove an individual or all
1576 constraints for the element.
1581 <example id="zend.dojo.form.elements.validationTextBox.example">
1582 <title>Example ValidationTextBox dijit element usage</title>
1585 The following will create a ValidationTextBox that requires a
1586 single string consisting solely of word characters (i.e., no
1587 spaces, most punctuation is invalid).
1590 <programlisting language="php"><![CDATA[
1592 'ValidationTextBox',
1595 'label' => 'ValidationTextBox',
1597 'regExp' => '[\w]+',
1598 'invalidMessage' => 'Invalid non-space text.',
1601 ]]></programlisting>
1605 <sect3 id="zend.dojo.form.elements.verticalSlider">
1606 <title>VerticalSlider</title>
1609 VerticalSlider is the sibling of <link
1610 linkend="zend.dojo.form.elements.horizontalSlider">HorizontalSlider</link>,
1611 and operates in every way like that element. The only real
1612 difference is that the 'top*' and 'bottom*' methods are replaced by
1613 'left*' and 'right*', and instead of using HorizontalRule and
1614 HorizontalRuleLabels, VerticalRule and VerticalRuleLabels should be
1618 <example id="zend.dojo.form.elements.verticalSlider.example">
1619 <title>Example VerticalSlider dijit element usage</title>
1622 The following will create a vertical slider selection with
1623 integer values ranging from -10 to 10. The left will have labels
1624 at the 20%, 40%, 60%, and 80% marks. The right will have rules
1625 at 0, 50%, and 100%. Each time the value is changed, the hidden
1626 element storing the value will be updated.
1629 <programlisting language="php"><![CDATA[
1634 'label' => 'VerticalSlider',
1636 'style' => 'height: 200px; width: 3em;',
1639 'discreteValues' => 11,
1640 'intermediateChanges' => true,
1641 'showButtons' => true,
1642 'leftDecorationDijit' => 'VerticalRuleLabels',
1643 'leftDecorationContainer' => 'leftContainer',
1644 'leftDecorationLabels' => array(
1652 'rightDecorationDijit' => 'VerticalRule',
1653 'rightDecorationContainer' => 'rightContainer',
1654 'rightDecorationLabels' => array(
1661 ]]></programlisting>
1666 vim:se ts=4 sw=4 et: