Tecnologia -> Linguagem -> PHP -> Criando um formulário Dojo agradável em Zend Framework

Criando um formulário Dojo agradável em Zend Framework

Bem, depois de escrever alguns artigos separados sobre Zend Framework e dojo, eu sinto que eu preciso escrever um Zend_Dojo_Form completa. Então aqui estou eu com exemplo completo. 
Vou explicar tudo passo a passo. 
1. Download Zend Framework versão mais recente 
Baixar versão menos estável a partir http://www.zend.com. Cópia externa / dojo para js /.
Espero que você criará sua estrutura de diretório como
html_root
    /application
        /controllers
            DojoController.php
        /models
        /forms
            CustomDojoForm.php
        /views
            /scripts
                /dojo
                    index.phtml
    /libaray
        /Zend
    /public
        /js
            /dojo
        /css
        /images
        /bootstrap.php
    /index.phtm

It’s not compulsory to create the similar directory structure I have created, this can vary. For best practice read Zend Quick start from Zend Framework documentation.

2. Enable dojo in the bootstrap file

I am not going to discuss everything you will need to have in your bootstrap file. I am explaining only the line of code needed to enable dojo.
You may have initialized your view in the bootstrap file as
$view = new Zend_View();
if you haven’t, you will need to write the following code.
$view = new Zend_View(); 
$view->addHelperPath('Zend/Dojo/View/Helper/', 'Zend_Dojo_View_Helper'); 
$viewRenderer = new Zend_Controller_Action_Helper_ViewRenderer(); 
$viewRenderer->setView($view); 
Zend_Controller_Action_HelperBroker::addHelper($viewRenderer);

If you already have
$view = new Zend_View();
in your bootstrap, no need to initialize it twice.
The second line is compulsory. It add helper path. This means that your view now can access all the helpers in library/Zend/Dojo/View/Helper/ directory.
In the next lines, I initialize viewRenderer, add view to it, and add viewRenderer to HelperBroker.
That’s it. We have now made all necessary changes in our bootstrap file.
3. Making necessary changes in your layout file.
Well, if are newbie. You will need to understand two step view before making the following changes. Read my article http://zendguru.wordpress.com/
The changes we will need in our layout file are
$this->dojo()->setDjConfigOption('usePlainJson',true)
        ->addStylesheetModule('dijit.themes.tundra')
        ->setLocalPath("http://localhost/zend/public/js/dojo/dojo/dojo.js");
    
echo $this->dojo();
?>


Nothing hard to understand here. In the first line we set dojo configuration option. In the second line we add style sheet module, and the third line we add path to our dojo.js file.
After setting these option, we call dojo() helper method as
echo $this->dojo();

We have now made the entire necessary configuration in our bootstrap and layout file. It’s now time to play with Zend_Dojo_Form.
4. Creating Zend_Dojo_Form
Creating a dojo form as simple as this.
class DojoForm extends Zend_Dojo_Form
{
    public $_selectOptions;
    public function init()
    {
        $this->_selectOptions=array(
                '1' => 'red',
                '2' => 'blue',
                '3' => 'gray'
            );
            
        $this->setMethod('post');
        $this->setAttribs(array(
                'name' => 'masterform'
            ));
        $this->setDecorators(array(
                'FormElements',
                array(
                    'TabContainer',
                     array(
                        'id' => 'tabContainer',
                        'style' => 'width:660px; 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,
                )
            );
        $textForm->addElement(
                'DateTextBox',
                'datebox',
                array(
                    'value' => '2008-07-05',
'label' => 'DateTexBox',
                    'required' => true,
                )
            );
        $textForm->addElement(
                'TimeTextBox',
                'timebox',
                array(
                    'label' => 'TimeTexBox',
                    'required' => true,
                )
            );
        $textForm->addElement(
                'CurrencyTextBox',
                'currencybox',
                array(
                    'label' => 'CurrencyTexBox',
                    'required' => true,
                    'currency'=>'USD',
                    'invalidMessage' => 'Invalid amount',
                    'symbol' => 'USD',
                    'type' => 'currency',
                )
            );
        $textForm->addElement(
                'NumberTextBox',
                'numberbox',
                array(
                    'label' => 'NumberTexBox',
                    'required' => true,
                    'invalidMessage'=>'Invalid elevation.',
                    'constraints' => array(
                        'min' => -2000,
                        'max'=> 2000,
                        'places' => 0,
                    )
                )
            );
        $textForm->addElement(
                'ValidationTextBox',
                'validationbox',
                array(
                    'label' => 'ValidationTexBox',
                    'required' => true,
                    'regExp' => '[\w]+',
                    'invalidMessage' => 'invalid non-space text.',
                )
            );
        $textForm->addElement(
                'Textarea',
                'textarea',
                array(
                    'label' => 'TextArea',
                    'required' => true,
                    'style' => 'width:200px',
                )
            );
            
        $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,
                )
            );
        $toggleForm->addElement(
            'Button',
            'dijitButton',
            array(
                'label' => 'Button',
            )
        );
        $toggleForm->addElement(
            'CheckBox',
            'checkbox',
            array(
                'label' => 'CheckBox',
                'checkedValue' => 'foo',
                'uncheckedValue' => 'bar',
                'checked' => true,
            )
        );
        $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,
            )
        );
        $selectForm->addElement(
            'FilteringSelect',
            'filterselect',
            array(
                'label' => 'FilteringSelect(select)',
                'value' => 'blue',
                'autocomplete'=>false,
                'multiOptions' => $this->_selectOptions,
            )
        );
        
        $this->addSubForm($textForm,'textForm')
                ->addSubForm($toggleForm,'toggleForm')
                ->addSubForm($selectForm,'selectForm');
    }
}





I don’t think I can explain everything in the form. Just giving you a clue.
I’ve created three sub forms, a text form contain elements such as textbox, date textbox, time textbox etc, a toggle sub form contain elements like number spinner, button and checkbox, and a select sub form containing select box and filtering select. I also have set different attributes for these elements.

3. Instantiating Zend_Dojo_Form in your controller
Your DojoController must have the following code.
class DojoController extends Zend_Controller_Action
{
    function indexAction()
    {
        $form= new DojoForm();
        $this->view->form= $form;
    }
}

I don’t think anything needs to be explained.

4. Displaying form in template
Your template in views/scripts/dojo/ called index.phtml must have the following code.
    echo $this->form; 
?>