Dojo View Helpers
Zend_Dojo
Programmer's Reference Guide

Dojo Form Elements and Decorators

Building on the dijit view helpers, the Zend_Dojo_Form family of classes provides the ability to utilize Dijits natively within your forms.

There are three options for utilizing the Dojo form elements with your forms:

  • Use Zend_Dojo::enableForm(). This will add plugin paths for decorators and elements to all attached form items, recursively. Additionally, it will dojo-enable the view object. Note, however, that any sub forms you attach after this call will also need to be passed through Zend_Dojo::enableForm().

  • Use the Dojo-specific form and subform implementations, Zend_Dojo_Form and Zend_Dojo_Form_SubForm respectively. These can be used as drop-in replacements for Zend_Form and Zend_Form_SubForm, contain all the appropriate decorator and element paths, set a Dojo-specific default DisplayGroup class, and dojo-enable the view.

  • Last, and most tedious, you can set the appropriate decorator and element paths yourself, set the default DisplayGroup class, and dojo-enable the view. Since Zend_Dojo::enableForm() does this already, there's little reason to go this route.

Example #1 Enabling Dojo in your existing forms

"But wait," you say; "I'm already extending Zend_Form with my own custom form class! How can I Dojo-enable it?'"

First, and easiest, simply change from extending Zend_Form to extending Zend_Dojo_Form, and update any places where you instantiate Zend_Form_SubForm to instantiate Zend_Dojo_Form_SubForm.

A second approach is to call Zend_Dojo::enableForm() within your custom form's init() method; when the form definition is complete, loop through all SubForms to dojo-enable them:

  1. span style="color: #808080; font-style: italic;">// Dojo-enable the form:
  2. // ... continue form definition from here
  3.  
  4.         // Dojo-enable all sub forms:

Usage of the dijit-specific form decorators and elements is just like using any other form decorator or element.

Dijit-Specific Form Decorators

Most form elements can use the DijitElement decorator, which will grab the dijit parameters from the elements, and pass these and other metadata to the view helper specified by the element. For decorating forms, sub forms, and display groups, however, there are a set of decorators corresponding to the various layout dijits.

All dijit decorators look for the dijitParams property of the given element being decorated, and push them as the $params array to the dijit view helper being used; these are then separated from any other properties so that no duplication of information occurs.

DijitElement Decorator

Just like the ViewHelper decorator, DijitElement expects a helper property in the element which it will then use as the view helper when rendering. Dijit parameters will typically be pulled directly from the element, but may also be passed in as options via the dijitParams key (the value of that key should be an associative array of options).

It is important that each element have a unique ID (as fetched from the element's getId() method). If duplicates are detected within the dojo() view helper, the decorator will trigger a notice, but then create a unique ID by appending the return of uniqid() to the identifier.

Standard usage is to simply associate this decorator as the first in your decorator chain, with no additional options.

Example #2 DijitElement Decorator Usage

  1. span style="color: #ff0000;">'DijitElement',
  2.     'Errors',
  3.     'Label',
  4.     'ContentPane',
  5. ));

DijitForm Decorator

The DijitForm decorator is very similar to the Form decorator; in fact, it can be used basically interchangeably with it, as it utilizes the same view helper name ('form').

Since dijit.form.Form does not require any dijit parameters for configuration, the main difference is that the dijit form view helper require that a DOM ID is passed to ensure that programmatic dijit creation can work. The decorator ensures this, by passing the form name as the identifier.

DijitContainer-based Decorators

The DijitContainer decorator is actually an abstract class from which a variety of other decorators derive. It offers the same functionality of DijitElement, with the addition of title support. Many layout dijits require or can utilize a title; DijitContainer will utilize the element's legend property, if available, and can also utilize either the 'legend' or 'title' decorator option, if passed. The title will be translated if a translation adapter with a corresponding translation is present.

The following is a list of decorators that inherit from DijitContainer:

  • AccordionContainer

  • AccordionPane

  • BorderContainer

  • ContentPane

  • SplitContainer

  • StackContainer

  • TabContainer

Example #3 DijitContainer Decorator Usage

  1. // Use a TabContainer for your form:
  2. 'FormElements''TabContainer''id'          => 'tabContainer',
  3.         'style'       => 'width: 600px; height: 500px;',
  4.         'dijitParams''tabPosition' => 'top'
  5.         ),
  6.     )),
  7.     'DijitForm',
  8. ));
  9.  
  10. // Use a ContentPane in your sub form (which can be used with all but
  11. // AccordionContainer):
  12. 'FormElements''HtmlTag''tag' => 'dl')),
  13.     'ContentPane',
  14. ));

Dijit-Specific Form Elements

Each form dijit for which a view helper is provided has a corresponding Zend_Form element. All of them have the following methods available for manipulating dijit parameters:

  • setDijitParam($key, $value): set a single dijit parameter. If the dijit parameter already exists, it will be overwritten.

  • setDijitParams(array $params): set several dijit parameters at once. Any passed parameters matching those already present will overwrite.

  • hasDijitParam($key): If a given dijit parameter is defined and present, return TRUE, otherwise return FALSE.

  • getDijitParam($key): retrieve the given dijit parameter. If not available, a NULL value is returned.

  • getDijitParams(): retrieve all dijit parameters.

  • removeDijitParam($key): remove the given dijit parameter.

  • clearDijitParams(): clear all currently defined dijit parameters.

Dijit parameters are stored in the dijitParams public property. Thus, you can dijit-enable an existing form element simply by setting this property on the element; you simply will not have the above accessors to facilitate manipulating the parameters.

Additionally, dijit-specific elements implement a different list of decorators, corresponding to the following:

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

In effect, the DijitElement decorator is used in place of the standard ViewHelper decorator.

Finally, the base Dijit element ensures that the Dojo view helper path is set on the view.

A variant on DijitElement, DijitMulti, provides the functionality of the Multi abstract form element, allowing the developer to specify 'multiOptions' -- typically select options or radio options.

The following dijit elements are shipped in the standard Zend Framework distribution.

Button

While not deriving from the standard Button element, it does implement the same functionality, and can be used as a drop-in replacement for it. The following functionality is exposed:

  • getLabel() will utilize the element name as the button label if no name is provided. Additionally, it will translate the name if a translation adapter with a matching translation message is available.

  • isChecked() determines if the value submitted matches the label; if so, it returns TRUE. This is useful for determining which button was used when a form was submitted.

Additionally, only the decorators DijitElement and DtDdWrapper are utilized for Button elements.

Example #4 Example Button dijit element usage

  1. span style="color: #ff0000;">'Button',
  2.     'foo''label' => 'Button Label',
  3.     )
  4. );

CheckBox

While not deriving from the standard Checkbox element, it does implement the same functionality. This means that the following methods are exposed:

  • setCheckedValue($value): set the value to use when the element is checked.

  • getCheckedValue(): get the value of the item to use when checked.

  • setUncheckedValue($value): set the value of the item to use when it is unchecked.

  • getUncheckedValue(): get the value of the item to use when it is unchecked.

  • setChecked($flag): mark the element as checked or unchecked.

  • isChecked(): determine if the element is currently checked.

Example #5 Example CheckBox dijit element usage

  1. span style="color: #ff0000;">'CheckBox',
  2.     'foo''label'          => 'A check box',
  3.         'checkedValue'   => 'foo',
  4.         'uncheckedValue' => 'bar',
  5.         'checked'

ComboBox and FilteringSelect

As noted in the ComboBox dijit view helper documentation, ComboBoxes are a hybrid between select and text input, allowing for autocompletion and the ability to specify an alternate to the options provided. FilteringSelects are the same, but do not allow arbitrary input.

Note: ComboBoxes return the label values
 ComboBoxes return the label values, and not the option values, which can lead to a disconnect in expectations. For this reason, ComboBoxes do not auto-register an InArray validator (though FilteringSelects do).

The ComboBox and FilteringSelect form elements provide accessors and mutators for examining and setting the select options as well as specifying a dojo.data datastore (if used). They extend from DijitMulti, which allows you to specify select options via the setMultiOptions() and setMultiOption() methods. In addition, the following methods are available:

  • getStoreInfo(): get all datastore information currently set. Returns an empty array if no data is currently set.

  • setStoreId($identifier): set the store identifier variable (usually referred to by the attribute 'jsId' in Dojo). This should be a valid javascript variable name.

  • getStoreId(): retrieve the store identifier variable name.

  • setStoreType($dojoType): set the datastore class to use; e.g., "dojo.data.ItemFileReadStore".

  • getStoreType(): get the dojo datastore class to use.

  • setStoreParams(array $params): set any parameters used to configure the datastore object. As an example, dojo.data.ItemFileReadStore datastore would expect a 'url' parameter pointing to a location that would return the dojo.data object.

  • getStoreParams(): get any datastore parameters currently set; if none, an empty array is returned.

  • setAutocomplete($flag): indicate whether or not the selected item will be used when the user leaves the element.

  • getAutocomplete(): get the value of the autocomplete flag.

By default, if no dojo.data store is registered with the element, 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.

Example #6 ComboBox dijit element usage as select input

  1. span style="color: #ff0000;">'ComboBox',
  2.     'foo''label'        => 'ComboBox (select)',
  3.         'value'        => 'blue',
  4.         'autocomplete''multiOptions''red'    => 'Rouge',
  5.             'blue'   => 'Bleu',
  6.             'white'  => 'Blanc',
  7.             'orange' => 'Orange',
  8.             'black'  => 'Noir',
  9.             'green'  => 'Vert',
  10.         ),
  11.     )
  12. );

Example #7 ComboBox dijit element usage with datastore

  1. span style="color: #ff0000;">'ComboBox',
  2.     'foo''label'       => 'ComboBox (datastore)',
  3.         'storeId'     => 'stateStore',
  4.         'storeType'   => 'dojo.data.ItemFileReadStore',
  5.         'storeParams''url' => '/js/states.txt',
  6.         ),
  7.         'dijitParams''searchAttr' => 'name',
  8.         ),
  9.     )
  10. );

The above examples could also utilize FilteringSelect instead of ComboBox.

CurrencyTextBox

The CurrencyTextBox is primarily for supporting currency input. The currency may be localized, and can support both fractional and non-fractional values.

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): set the currency type to use; should follow the » ISO-4217 specification.

  • getCurrency(): retrieve the current currency type.

  • setSymbol($symbol): set the 3-letter » ISO-4217 currency symbol to use.

  • getSymbol(): get the current currency symbol.

  • setFractional($flag): set whether or not the currency should allow for fractional values.

  • getFractional(): retrieve the status of the fractional flag.

Example #8 Example CurrencyTextBox dijit element usage

  1. span style="color: #ff0000;">'CurrencyTextBox',
  2.     'foo''label'          => 'Currency:',
  3.         'required''currency'       => 'USD',
  4.         'invalidMessage' => 'Invalid amount. ' .
  5.                             'Include dollar sign, commas, and cents.',
  6.         'fractional'

DateTextBox

DateTextBox provides a calendar drop-down for selecting a date, as well as client-side date validation and formatting.

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(): Whether or not to use AM or PM strings in times.

  • setStrict($flag) and getStrict(): whether or not to use strict regular expression matching when validating input. If FALSE, which is the default, it will be lenient about whitespace and some abbreviations.

  • setLocale($locale) and getLocale(): Set and retrieve the locale to use with this specific element.

  • setDatePattern($pattern) and getDatePattern(): provide and retrieve the » unicode date format pattern for formatting the date.

  • setFormatLength($formatLength) and getFormatLength(): provide and retrieve the format length type to use; should be one of "long", "short", "medium" or "full".

  • setSelector($selector) and getSelector(): provide and retrieve the style of selector; should be either "date" or "time".

Example #9 Example DateTextBox dijit element usage

  1. span style="color: #ff0000;">'DateTextBox',
  2.     'foo''label'          => 'Date:',
  3.         'required''invalidMessage' => 'Invalid date specified.',
  4.         'formatLength'   => 'long',
  5.     )
  6. );

Editor

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()

Example #10 Example Editor dijit element usage

  1. span style="color: #ff0000;">'editor', 'content''plugins''undo', '|', 'bold', 'italic'),
  2.     'editActionInterval' => 2,
  3.     'focusOnLoad''height'             => '250px',
  4.     'inheritWidth''styleSheets''/js/custom/editor.css'),
  5. ));

Note: Editor Dijit uses div by default
 The Editor dijit uses an HTML DIV by default. The dijit._editor.RichText documentation indicates that having it built on an HTML TEXTAREA can potentially have security implications.
That said, there may be times when you want an Editor widget that can gracefully degrade to a TEXTAREA. In such situations, you can do so by setting the degrade property to TRUE:

  1. // At instantiation:
  2. 'foo''degrade'// Construction via the form:
  3. 'editor', 'content''degrade'// Or after instantiation:

HorizontalSlider

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.

Example #11 Example HorizontalSlider dijit element usage

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 bottom will have rules at 0, 50%, and 100%. Each time the value is changed, the hidden element storing the value will be updated.

  1. span style="color: #ff0000;">'HorizontalSlider',
  2.     'horizontal''label'                     => 'HorizontalSlider',
  3.         'value'                     => 5,
  4.         'minimum'                   => -10,
  5.         'maximum'                   => 10,
  6.         'discreteValues'            => 11,
  7.         'intermediateChanges''showButtons''topDecorationDijit'        => 'HorizontalRuleLabels',
  8.         'topDecorationContainer'    => 'topContainer',
  9.         'topDecorationLabels'' ',
  10.                 '20%',
  11.                 '40%',
  12.                 '60%',
  13.                 '80%',
  14.                 ' ',
  15.         ),
  16.         'topDecorationParams''container''style' => 'height:1.2em; font-size=75%;color:gray;',
  17.             ),
  18.             'list''style' => 'height:1em; font-size=75%;color:gray;',
  19.             ),
  20.         ),
  21.         'bottomDecorationDijit'     => 'HorizontalRule',
  22.         'bottomDecorationContainer' => 'bottomContainer',
  23.         'bottomDecorationLabels''0%',
  24.                 '50%',
  25.                 '100%',
  26.         ),
  27.         'bottomDecorationParams''list''style' => 'height:1em; font-size=75%;color:gray;',
  28.             ),
  29.         ),
  30.     )
  31. );

NumberSpinner

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.

Example #12 Example NumberSpinner dijit element usage

  1. span style="color: #ff0000;">'NumberSpinner',
  2.     'foo''value'             => '7',
  3.         'label'             => 'NumberSpinner',
  4.         'smallDelta'        => 5,
  5.         'largeDelta'        => 25,
  6.         'defaultTimeout'    => 500,
  7.         'timeoutChangeRate' => 100,
  8.         'min'               => 9,
  9.         'max'               => 1550,
  10.         'places'            => 0,
  11.         'maxlength'         => 20,
  12.     )
  13. );

NumberTextBox

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.

Example #13 Example NumberTextBox dijit element usage

  1. span style="color: #ff0000;">'NumberTextBox',
  2.     'elevation''label'          => 'NumberTextBox',
  3.         'required''invalidMessage' => 'Invalid elevation.',
  4.         'places'         => 0,
  5.         'constraints''min'    => -20000,
  6.             'max'    => 20000,
  7.         ),
  8.     )
  9. );

PasswordTextBox

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, PasswordTextBox derives from ValidationTextBox and TextBox; all methods available to those classes are available.

Example #14 Example PasswordTextBox dijit element usage

  1. span style="color: #ff0000;">'PasswordTextBox',
  2.     'password''label'          => 'Password',
  3.         'required''trim''lowercase''regExp'         => '^[a-z0-9]{6,}$',
  4.         'invalidMessage' => 'Invalid password; ' .
  5.                             'must be at least 6 alphanumeric characters',
  6.     )
  7. );

RadioButton

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.

Example #15 Example RadioButton dijit element usage

  1. span style="color: #ff0000;">'RadioButton',
  2.     'foo''label' => 'RadioButton',
  3.         'multiOptions''foo' => 'Foo',
  4.             'bar' => 'Bar',
  5.             'baz' => 'Baz',
  6.         ),
  7.         'value' => 'bar',
  8.     )
  9. );

SimpleTextarea

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

Example #16 Example SimpleTextarea dijit element usage

  1. span style="color: #ff0000;">'SimpleTextarea',
  2.     'simpletextarea''label'    => 'SimpleTextarea',
  3.         'required''style'    => 'width: 80em; height: 25em;',
  4.     )
  5. );

Slider abstract element

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.

SubmitButton

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.

Example #17 Example SubmitButton dijit element usage

  1. span style="color: #ff0000;">'SubmitButton',
  2.     'foo''required''ignore''label'      => 'Submit Button!',
  3.     )
  4. );

TextBox

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.

Example #18 Example TextBox dijit element usage

  1. span style="color: #ff0000;">'TextBox',
  2.     'foo''value'      => 'some text',
  3.         'label'      => 'TextBox',
  4.         'trim''propercase'

Textarea

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.

Example #19 Example Textarea dijit element usage

  1. span style="color: #ff0000;">'Textarea',
  2.     'textarea''label'    => 'Textarea',
  3.         'required''style'    => 'width: 200px;',
  4.     )
  5. );

TimeTextBox

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.

Example #20 Example TimeTextBox dijit element usage

The following will create a TimeTextBox that displays 2 hours at a time, with increments of 10 minutes.

  1. span style="color: #ff0000;">'TimeTextBox',
  2.     'foo''label'              => 'TimeTextBox',
  3.         'required''visibleRange'       => 'T04:00:00',
  4.         'visibleIncrement'   => 'T00:10:00',
  5.         'clickableIncrement' => 'T00:10:00',
  6.     )
  7. );

ValidationTextBox

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.

Example #21 Example ValidationTextBox dijit element usage

The following will create a ValidationTextBox that requires a single string consisting solely of word characters (i.e., no spaces, most punctuation is invalid).

  1. span style="color: #ff0000;">'ValidationTextBox',
  2.     'foo''label'          => 'ValidationTextBox',
  3.         'required''regExp'         => '[\w]+',
  4.         'invalidMessage' => 'Invalid non-space text.',
  5.     )
  6. );

VerticalSlider

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.

Example #22 Example VerticalSlider dijit element usage

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.

  1. span style="color: #ff0000;">'VerticalSlider',
  2.     'foo''label'                    => 'VerticalSlider',
  3.         'value'                    => 5,
  4.         'style'                    => 'height: 200px; width: 3em;',
  5.         'minimum'                  => -10,
  6.         'maximum'                  => 10,
  7.         'discreteValues'           => 11,
  8.         'intermediateChanges''showButtons''leftDecorationDijit'      => 'VerticalRuleLabels',
  9.         'leftDecorationContainer'  => 'leftContainer',
  10.         'leftDecorationLabels'' ',
  11.                 '20%',
  12.                 '40%',
  13.                 '60%',
  14.                 '80%',
  15.                 ' ',
  16.         ),
  17.         'rightDecorationDijit' => 'VerticalRule',
  18.         'rightDecorationContainer' => 'rightContainer',
  19.         'rightDecorationLabels''0%',
  20.                 '50%',
  21.                 '100%',
  22.         ),
  23.     )
  24. );

Dojo Form Examples

Example #23 Using Zend_Dojo_Form

The easiest way to utilize Dojo with Zend_Form is to utilize Zend_Dojo_Form, either through direct usage or by extending it. This example shows extending Zend_Dojo_Form, and shows usage of all dijit elements. It creates four sub forms, and decorates the form to utilize a TabContainer, showing each sub form in its own tab.

  1. span style="color: #808080; font-style: italic;">/**
  2.      * Options to use with select elements
  3.      */'red'    => 'Rouge',
  4.         'blue'   => 'Bleu',
  5.         'white'  => 'Blanc',
  6.         'orange' => 'Orange',
  7.         'black'  => 'Noir',
  8.         'green'  => 'Vert',
  9.     );
  10.  
  11.     /**
  12.      * Form initialization
  13.      *
  14.      * @return void
  15.      */'post''name'  => 'masterForm''FormElements''TabContainer''id' => 'tabContainer',
  16.                 'style' => 'width: 600px; height: 500px;',
  17.                 'dijitParams''tabPosition' => 'top'
  18.                 ),
  19.             )),
  20.             'DijitForm''name'   => 'textboxtab',
  21.             'legend' => 'Text Elements',
  22.             'dijitParams''title' => 'Text Elements''TextBox',
  23.                 'textbox''value'      => 'some text',
  24.                     'label'      => 'TextBox',
  25.                     'trim''propercase''DateTextBox',
  26.                 'datebox''value' => '2008-07-05',
  27.                     'label' => 'DateTextBox',
  28.                     'required''TimeTextBox',
  29.                 'timebox''label' => 'TimeTextBox',
  30.                     'required''CurrencyTextBox',
  31.                 'currencybox''label' => 'CurrencyTextBox',
  32.                     'required'// 'currency' => 'USD',
  33.                     'invalidMessage' => 'Invalid amount. ' .
  34.                                         'Include dollar sign, commas, ' .
  35.                                         'and cents.',
  36.                     // 'fractional' => true,
  37.                     // 'symbol' => 'USD',
  38.                     // 'type' => 'currency',
  39.                 )
  40.             )
  41.             ->addElement(
  42.                 'NumberTextBox',
  43.                 'numberbox''label' => 'NumberTextBox',
  44.                     'required''invalidMessage' => 'Invalid elevation.',
  45.                     'constraints''min' => -20000,
  46.                         'max' => 20000,
  47.                         'places' => 0,
  48.                     )
  49.                 )
  50.             )
  51.             ->addElement(
  52.                 'ValidationTextBox',
  53.                 'validationbox''label' => 'ValidationTextBox',
  54.                     'required''regExp' => '[\w]+',
  55.                     'invalidMessage' => 'Invalid non-space text.',
  56.                 )
  57.             )
  58.             ->addElement(
  59.                 'Textarea',
  60.                 'textarea''label'    => 'Textarea',
  61.                     'required''style'    => 'width: 200px;''name'   => 'editortab',
  62.             'legend' => 'Editor',
  63.             'dijitParams''title' => 'Editor''Editor',
  64.             'wysiwyg''label'        => 'Editor',
  65.                 'inheritWidth' => 'true''name'   => 'toggletab',
  66.             'legend' => 'Toggle Elements''NumberSpinner',
  67.                 'ns''value'             => '7',
  68.                     'label'             => 'NumberSpinner',
  69.                     'smallDelta'        => 5,
  70.                     'largeDelta'        => 25,
  71.                     'defaultTimeout'    => 1000,
  72.                     'timeoutChangeRate' => 100,
  73.                     'min'               => 9,
  74.                     'max'               => 1550,
  75.                     'places'            => 0,
  76.                     'maxlength'         => 20,
  77.                 )
  78.             )
  79.             ->addElement(
  80.                 'Button',
  81.                 'dijitButton''label' => 'Button',
  82.                 )
  83.             )
  84.             ->addElement(
  85.                 'CheckBox',
  86.                 'checkbox''label' => 'CheckBox',
  87.                     'checkedValue'  => 'foo',
  88.                     'uncheckedValue'  => 'bar',
  89.                     'checked''RadioButton',
  90.                 'radiobutton''label' => 'RadioButton',
  91.                     'multiOptions''foo' => 'Foo',
  92.                         'bar' => 'Bar',
  93.                         'baz' => 'Baz',
  94.                     ),
  95.                     'value' => 'bar''name'   => 'selecttab',
  96.             'legend' => 'Select Elements''ComboBox',
  97.                 'comboboxselect''label' => 'ComboBox (select)',
  98.                     'value' => 'blue',
  99.                     'autocomplete''multiOptions''ComboBox',
  100.                 'comboboxremote''label' => 'ComboBox (remoter)',
  101.                     'storeId' => 'stateStore',
  102.                     'storeType' => 'dojo.data.ItemFileReadStore',
  103.                     'storeParams''url' => '/js/states.txt',
  104.                     ),
  105.                     'dijitParams''searchAttr' => 'name',
  106.                     ),
  107.                 )
  108.             )
  109.             ->addElement(
  110.                 'FilteringSelect',
  111.                 'filterselect''label' => 'FilteringSelect (select)',
  112.                     'value' => 'blue',
  113.                     'autocomplete''multiOptions''FilteringSelect',
  114.                 'filterselectremote''label' => 'FilteringSelect (remoter)',
  115.                     'storeId' => 'stateStore',
  116.                     'storeType' => 'dojo.data.ItemFileReadStore',
  117.                     'storeParams''url' => '/js/states.txt',
  118.                     ),
  119.                     'dijitParams''searchAttr' => 'name''name'   => 'slidertab',
  120.             'legend' => 'Slider Elements''HorizontalSlider',
  121.                 'horizontal''label' => 'HorizontalSlider',
  122.                     'value' => 5,
  123.                     'minimum' => -10,
  124.                     'maximum' => 10,
  125.                     'discreteValues' => 11,
  126.                     'intermediateChanges''showButtons''topDecorationDijit' => 'HorizontalRuleLabels',
  127.                     'topDecorationContainer' => 'topContainer',
  128.                     'topDecorationLabels'' ',
  129.                             '20%',
  130.                             '40%',
  131.                             '60%',
  132.                             '80%',
  133.                             ' ',
  134.                     ),
  135.                     'topDecorationParams''container''style' => 'height:1.2em; ' .
  136.                                        'font-size=75%;color:gray;',
  137.                         ),
  138.                         'list''style' => 'height:1em; ' .
  139.                                        'font-size=75%;color:gray;',
  140.                         ),
  141.                     ),
  142.                     'bottomDecorationDijit' => 'HorizontalRule',
  143.                     'bottomDecorationContainer' => 'bottomContainer',
  144.                     'bottomDecorationLabels''0%',
  145.                             '50%',
  146.                             '100%',
  147.                     ),
  148.                     'bottomDecorationParams''list''style' => 'height:1em; ' .
  149.                                        'font-size=75%;color:gray;',
  150.                         ),
  151.                     ),
  152.                 )
  153.             )
  154.             ->addElement(
  155.                 'VerticalSlider',
  156.                 'vertical''label' => 'VerticalSlider',
  157.                     'value' => 5,
  158.                     'style' => 'height: 200px; width: 3em;',
  159.                     'minimum' => -10,
  160.                     'maximum' => 10,
  161.                     'discreteValues' => 11,
  162.                     'intermediateChanges''showButtons''leftDecorationDijit' => 'VerticalRuleLabels',
  163.                     'leftDecorationContainer' => 'leftContainer',
  164.                     'leftDecorationLabels'' ',
  165.                             '20%',
  166.                             '40%',
  167.                             '60%',
  168.                             '80%',
  169.                             ' ',
  170.                     ),
  171.                     'rightDecorationDijit' => 'VerticalRule',
  172.                     'rightDecorationContainer' => 'rightContainer',
  173.                     'rightDecorationLabels''0%',
  174.                             '50%',
  175.                             '100%''textboxtab''editortab''toggletab''selecttab''slidertab');
  176.     }
  177. }

Example #24 Modifying an existing form to utilize Dojo

Existing forms can be modified to utilize Dojo as well, by use of the Zend_Dojo::enableForm() static method.

This first example shows decorating an existing form instance:

  1. span style="color: #ff0000;">'ComboBox',
  2. 'query''label'        => 'Color:',
  3.     'value'        => 'blue',
  4.     'autocomplete''multiOptions''red'    => 'Rouge',
  5.         'blue'   => 'Bleu',
  6.         'white'  => 'Blanc',
  7.         'orange' => 'Orange',
  8.         'black'  => 'Noir',
  9.         'green'  => 'Vert',
  10.     ),
  11. )
  12. );

Alternately, you can make a slight tweak to your form initialization:

  1. span style="color: #808080; font-style: italic;">// ...
  2.     }
  3. }

Of course, if you can do that... you could and should simply alter the class to inherit from Zend_Dojo_Form, which is a drop-in replacement of Zend_Form that's already Dojo-enabled...

Dojo View Helpers
Zend_Dojo
Programmer's Reference Guide