repo_zf1/documentation/manual/en/module_specs/Zend_Dojo-Form-Examples.xml

<?xml version="1.0" encoding="UTF-8"?>
<!-- Reviewed: no -->
<sect2 id="zend.dojo.form.examples">
    <title>Dojo Form Examples</title>

    <example id="zend.dojo.form.examples.dojoform">
        <title>Using Zend_Dojo_Form</title>

        <para>
            The easiest way to utilize Dojo with <classname>Zend_Form</classname> is to
            utilize <classname>Zend_Dojo_Form</classname>, either through direct usage or
            by extending it. This example shows extending <classname>Zend_Dojo_Form</classname>, 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.
        </para>

        <programlisting language="php"><![CDATA[
class My_Form_Test extends Zend_Dojo_Form
{
    /**
     * Options to use with select elements
     */
    protected $_selectOptions = array(
        'red'    => 'Rouge',
        'blue'   => 'Bleu',
        'white'  => 'Blanc',
        'orange' => 'Orange',
        'black'  => 'Noir',
        'green'  => 'Vert',
    );

    /**
     * Form initialization
     *
     * @return void
     */
    public function init()
    {
        $this->setMethod('post');
        $this->setAttribs(array(
            'name'  => 'masterForm',
        ));
        $this->setDecorators(array(
            'FormElements',
            array('TabContainer', array(
                'id' => 'tabContainer',
                'style' => 'width: 600px; height: 500px;',
                'dijitParams' => array(
                    'tabPosition' => 'top'
                ),
            )),
            'DijitForm',
        ));
        $textForm = new Zend_Dojo_Form_SubForm();
        $textForm->setAttribs(array(
            'name'   => 'textboxtab',
            'legend' => 'Text Elements',
            'dijitParams' => array(
                'title' => 'Text Elements',
            ),
        ));
        $textForm->addElement(
                'TextBox',
                'textbox',
                array(
                    'value'      => 'some text',
                    'label'      => 'TextBox',
                    'trim'       => true,
                    'propercase' => true,
                )
            )
            ->addElement(
                'DateTextBox',
                'datebox',
                array(
                    'value' => '2008-07-05',
                    'label' => 'DateTextBox',
                    'required'  => true,
                )
            )
            ->addElement(
                'TimeTextBox',
                'timebox',
                array(
                    'label' => 'TimeTextBox',
                    'required'  => true,
                )
            )
            ->addElement(
                'CurrencyTextBox',
                'currencybox',
                array(
                    'label' => 'CurrencyTextBox',
                    'required'  => true,
                    // 'currency' => 'USD',
                    'invalidMessage' => 'Invalid amount. ' .
                                        'Include dollar sign, commas, ' .
                                        'and cents.',
                    // 'fractional' => true,
                    // 'symbol' => 'USD',
                    // 'type' => 'currency',
                )
            )
            ->addElement(
                'NumberTextBox',
                'numberbox',
                array(
                    'label' => 'NumberTextBox',
                    'required'  => true,
                    'invalidMessage' => 'Invalid elevation.',
                    'constraints' => array(
                        'min' => -20000,
                        'max' => 20000,
                        'places' => 0,
                    )
                )
            )
            ->addElement(
                'ValidationTextBox',
                'validationbox',
                array(
                    'label' => 'ValidationTextBox',
                    'required'  => true,
                    'regExp' => '[\w]+',
                    'invalidMessage' => 'Invalid non-space text.',
                )
            )
            ->addElement(
                'Textarea',
                'textarea',
                array(
                    'label'    => 'Textarea',
                    'required' => true,
                    'style'    => 'width: 200px;',
                )
            );
        $editorForm = new Zend_Dojo_Form_SubForm();
        $editorForm->setAttribs(array(
            'name'   => 'editortab',
            'legend' => 'Editor',
            'dijitParams' => array(
                'title' => 'Editor'
            ),
        ))
        $editorForm->addElement(
            'Editor',
            'wysiwyg',
            array(
                'label'        => 'Editor',
                'inheritWidth' => 'true',
            )
        );

        $toggleForm = new Zend_Dojo_Form_SubForm();
        $toggleForm->setAttribs(array(
            'name'   => 'toggletab',
            'legend' => 'Toggle Elements',
        ));
        $toggleForm->addElement(
                'NumberSpinner',
                'ns',
                array(
                    'value'             => '7',
                    'label'             => 'NumberSpinner',
                    'smallDelta'        => 5,
                    'largeDelta'        => 25,
                    'defaultTimeout'    => 1000,
                    'timeoutChangeRate' => 100,
                    'min'               => 9,
                    'max'               => 1550,
                    'places'            => 0,
                    'maxlength'         => 20,
                )
            )
            ->addElement(
                'Button',
                'dijitButton',
                array(
                    'label' => 'Button',
                )
            )
            ->addElement(
                'CheckBox',
                'checkbox',
                array(
                    'label' => 'CheckBox',
                    'checkedValue'  => 'foo',
                    'uncheckedValue'  => 'bar',
                    'checked' => true,
                )
            )
            ->addElement(
                'RadioButton',
                'radiobutton',
                array(
                    'label' => 'RadioButton',
                    'multiOptions'  => array(
                        'foo' => 'Foo',
                        'bar' => 'Bar',
                        'baz' => 'Baz',
                    ),
                    'value' => 'bar',
                )
            );
        $selectForm = new Zend_Dojo_Form_SubForm();
        $selectForm->setAttribs(array(
            'name'   => 'selecttab',
            'legend' => 'Select Elements',
        ));
        $selectForm->addElement(
                'ComboBox',
                'comboboxselect',
                array(
                    'label' => 'ComboBox (select)',
                    'value' => 'blue',
                    'autocomplete' => false,
                    'multiOptions' => $this->_selectOptions,
                )
            )
            ->addElement(
                'ComboBox',
                'comboboxremote',
                array(
                    'label' => 'ComboBox (remoter)',
                    'storeId' => 'stateStore',
                    'storeType' => 'dojo.data.ItemFileReadStore',
                    'storeParams' => array(
                        'url' => '/js/states.txt',
                    ),
                    'dijitParams' => array(
                        'searchAttr' => 'name',
                    ),
                )
            )
            ->addElement(
                'FilteringSelect',
                'filterselect',
                array(
                    'label' => 'FilteringSelect (select)',
                    'value' => 'blue',
                    'autocomplete' => false,
                    'multiOptions' => $this->_selectOptions,
                )
            )
            ->addElement(
                'FilteringSelect',
                'filterselectremote',
                array(
                    'label' => 'FilteringSelect (remoter)',
                    'storeId' => 'stateStore',
                    'storeType' => 'dojo.data.ItemFileReadStore',
                    'storeParams' => array(
                        'url' => '/js/states.txt',
                    ),
                    'dijitParams' => array(
                        'searchAttr' => 'name',
                    ),
                )
            );
        $sliderForm = new Zend_Dojo_Form_SubForm();
        $sliderForm->setAttribs(array(
            'name'   => 'slidertab',
            'legend' => 'Slider Elements',
        ));
        $sliderForm->addElement(
                'HorizontalSlider',
                'horizontal',
                array(
                    'label' => 'HorizontalSlider',
                    'value' => 5,
                    'minimum' => -10,
                    'maximum' => 10,
                    'discreteValues' => 11,
                    'intermediateChanges' => true,
                    'showButtons' => true,
                    'topDecorationDijit' => 'HorizontalRuleLabels',
                    'topDecorationContainer' => 'topContainer',
                    'topDecorationLabels' => array(
                            ' ',
                            '20%',
                            '40%',
                            '60%',
                            '80%',
                            ' ',
                    ),
                    'topDecorationParams' => array(
                        'container' => array(
                            'style' => 'height:1.2em; ' .
                                       'font-size=75%;color:gray;',
                        ),
                        'list' => array(
                            'style' => 'height:1em; ' .
                                       'font-size=75%;color:gray;',
                        ),
                    ),
                    'bottomDecorationDijit' => 'HorizontalRule',
                    'bottomDecorationContainer' => 'bottomContainer',
                    'bottomDecorationLabels' => array(
                            '0%',
                            '50%',
                            '100%',
                    ),
                    'bottomDecorationParams' => array(
                        'list' => array(
                            'style' => 'height:1em; ' .
                                       'font-size=75%;color:gray;',
                        ),
                    ),
                )
            )
            ->addElement(
                'VerticalSlider',
                'vertical',
                array(
                    'label' => 'VerticalSlider',
                    'value' => 5,
                    'style' => 'height: 200px; width: 3em;',
                    'minimum' => -10,
                    'maximum' => 10,
                    'discreteValues' => 11,
                    'intermediateChanges' => true,
                    'showButtons' => true,
                    'leftDecorationDijit' => 'VerticalRuleLabels',
                    'leftDecorationContainer' => 'leftContainer',
                    'leftDecorationLabels' => array(
                            ' ',
                            '20%',
                            '40%',
                            '60%',
                            '80%',
                            ' ',
                    ),
                    'rightDecorationDijit' => 'VerticalRule',
                    'rightDecorationContainer' => 'rightContainer',
                    'rightDecorationLabels' => array(
                            '0%',
                            '50%',
                            '100%',
                    ),
                )
            );

        $this->addSubForm($textForm, 'textboxtab')
             ->addSubForm($editorForm, 'editortab')
             ->addSubForm($toggleForm, 'toggletab')
             ->addSubForm($selectForm, 'selecttab')
             ->addSubForm($sliderForm, 'slidertab');
    }
}
]]></programlisting>
    </example>

    <example id="zend.dojo.form.examples.decorating">
        <title>Modifying an existing form to utilize Dojo</title>

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

        <para>
            This first example shows decorating an existing form instance:
        </para>

        <programlisting language="php"><![CDATA[
$form = new My_Custom_Form();
Zend_Dojo::enableForm($form);
$form->addElement(
'ComboBox',
'query',
array(
    'label'        => 'Color:',
    'value'        => 'blue',
    'autocomplete' => false,
    'multiOptions' => array(
        'red'    => 'Rouge',
        'blue'   => 'Bleu',
        'white'  => 'Blanc',
        'orange' => 'Orange',
        'black'  => 'Noir',
        'green'  => 'Vert',
    ),
)
);
]]></programlisting>

        <para>
            Alternately, you can make a slight tweak to your form
            initialization:
        </para>

        <programlisting language="php"><![CDATA[
class My_Custom_Form extends Zend_Form
{
    public function init()
    {
        Zend_Dojo::enableForm($this);

        // ...
    }
}
]]></programlisting>

        <para>
            Of course, if you can do that... you could and should simply alter
            the class to inherit from <classname>Zend_Dojo_Form</classname>, which is a drop-in
            replacement of <classname>Zend_Form</classname> that's already Dojo-enabled...
        </para>
    </example>
</sect2>
<!--
vim:se ts=4 sw=4 et:
-->