Zend Framework Dojo Form decorators example and usage

10 Feb

Zend Framework Dojo Form decorators example and usage

Nearly two months back I wrote an article on Zend_Form decorators. Many developers around the globe take help from that article and many post their comments.

As Zend has now done collaboration with Dojo and have provided helpers and form elements for creating nice form elements. They way of applying decorators to those elements also changed a bit.

After writing many articles on different Zend Framework and Dojo related topic, I feel that I’d discuss Zend_Dojo_Form decorators with the hope that someone might find it helpful.

If you have read my post on Zend_Form decorators, you will find this article pretty easy to understand. If you haven’t red that you will still get benefits of this article.

Before showing my code I would like to show the two form, one with the default decorators applied and the other with the decorators applied with setElementDecorators() method of the Zend_Dojo_Form.

The form with default decorators applied look as

dojo-form-with-default-decorators5

Zend Dojo Form with default decorators

By default Zend will wrap individual elements in “<dt>” tag and the entire form elements in “<dl>” tag.

 

The form with the decorators manually applied look as follows.

dojo-form-with-decorators-applied

Zend Dojo Form with decorators applied

Here we have wrapped individual elements in “<td>” tag and the entire elements in the “<table>” tag.

 

Now lets have a look at the code.

First the code without decorators applied.

<?php

class SimpleDojoForm extends Zend_Dojo_Form

{

            public function init()

            {

                        $this->setMethod(‘post’);

                        $this->setAttribs(array(

                                                ‘name’ => ‘masterform’

                                    ));

 

                        $this->addElement(

                                                ‘TextBox’,

                                                ‘textbox’,

                                                array(

                                                            ‘value’ => ”,

                                                            ‘label’ => ‘TextBox’,

                                                            ‘trim’ => true,

                                                            ‘propercase’ => true

                                                )

                                    );

 

                        $this->addElement(

                                                ‘DateTextBox’,

                                                ‘datebox’,

                                                array(

                                                            ‘value’ => ’07/06/2009′,

                                                            ‘label’ => ‘DateTexBox’,

                                                            ‘required’ => true

                                                )

                                    );

 

                        $this->addElement(

                                                ‘TimeTextBox’,

                                                ‘timebox’,

                                                array(

                                                            ‘label’ => ‘TimeTexBox’,

                                                            ‘required’ => true

                                                )

                                    );

                        $this->addElement(

                                                ‘CurrencyTextBox’,

                                                ‘currencybox’,

                                                array(

                                                            ‘label’ => ‘CurrencyTexBox’,

                                                            ‘required’ => true,

                                                            ‘currency’=>’USD’,

                                                            ‘invalidMessage’ => ‘Invalid amount’,

                                                            ‘symbol’ => ‘USD’,

                                                            ‘type’ => ‘currency’

                                                )

                                    );

                        $this->addElement(

                                                ‘NumberTextBox’,

                                                ‘numberbox’,

                                                array(

                                                            ‘label’ => ‘NumberTexBox’,

                                                            ‘required’ => true,

                                                            ‘invalidMessage’=>’Invalid elevation.’,

                                                            ‘constraints’ => array(

                                                                        ‘min’ => -2000,

                                                                        ‘max’=> 2000,

                                                                        ‘places’ => 0,

                                                            )

                                                )

                                    );

                        $this->addElement(

                                                ‘ValidationTextBox’,

                                                ‘validationbox’,

                                                array(

                                                            ‘label’ => ‘ValidationTexBox’,

                                                            ‘required’ => true,

                                                            ‘regExp’ => ‘[\w]+’,

                                                            ‘invalidMessage’ => ‘invalid non-space text.’

                                                )

                                    );

            }

}

In the code above we first extends our form from the Zend_Dojo_Form, set its method name and name attribute.

Next we add different Dojo elements and set their different attributes.

That’s it. Dojo Form with the default decorators applied.

 

To achieve the layout shown in the figure 2, you will need to add the following code after adding the elements to the Form.

 

$this->setElementDecorators(array(

 

‘DijitElement’,

‘Errors’,

            array(array(‘data’=>’HtmlTag’),array(‘tag’=>’td’)),

            array(‘Label’,array(‘tag’=>’td’)),

            array(array(‘row’=>’HtmlTag’),array(‘tag’=>’tr’))

 

));

 

This code wrap label and corresponding element in the “td” tag and both in “tr” tag.

 

$this->setDecorators(array(

                        ‘FormElements’,                       

                        array(array(‘data’=>’HtmlTag’),

array(‘tag’=>’table’,’cellspacing’=>’4′)),

                        ‘DijitForm’

                                    ));

 

This wrap the entire form elements in the “<table>” tag.

That’s it.

11 Responses to “Zend Framework Dojo Form decorators example and usage”

  1. Andrei February 13, 2009 at 3:41 pm #

    For the DateTextBox element you said:
    …‘value’ => ‘07/06/2009′….
    Where’s this value in your screenshot with the form?🙂

    The format should be: “2009-07-06” (YYYY-MM-DD)

    And for the TimeTextBox:
    ….
    ‘value’ =>’T23:40:00′
    ..

    Took me some google search to find this and I think it’s worth mentioning.

  2. Marvine March 16, 2009 at 10:28 am #

    Really nice article !

    YOu have to continue with Zend Framework and Dojo !

  3. suvi March 26, 2009 at 8:52 pm #

    you can do the same with css.
    Easy like this:

    /* Zend Form Styling */
    .zend_form, .zend_form_dojo {
    width: 700px;
    margin: 5px auto;
    padding: 2px;
    overflow: auto;
    }

    .zend_form dt, .zend_form_dojo dt {
    padding: 0;
    clear: both;
    width: 15%;
    float: left;
    text-align: left;
    margin: 5px 5px 5px 0;
    }

    .zend_form dd, .zend_form_dojo dd {
    padding: 0;
    float: left;
    width: 68%;
    margin: 5px 2px 5px 0;
    }

    .zend_form p, .zend_form_dojo p {
    padding: 0;
    margin: 0;
    }

    .zend_form input, .zend_form_dojo input, .zend_form textarea, .zend_form_dojo textarea {
    margin: 0 0 2px 0;
    padding: 0;
    }

  4. Faheem Abbas March 27, 2009 at 6:02 am #

    Yes, but different browsers treat css differently, so it will extra burden to create css for each browser.

  5. Thang April 17, 2009 at 3:52 am #

    Can you explain more about the decorator code?

  6. sam July 2, 2009 at 7:03 am #

    Really its a nice article!!!

  7. Melvin OMM October 21, 2009 at 6:09 pm #

    Yo! This article is very nice indeed. After reading the article this stuff is actually simple. The most relevant stuff i found on my journey understanding everything about Dojo integration in the Zend Framework.

  8. Rahul Kate November 2, 2009 at 6:08 pm #

    Really great article I appreciate your work. But there is a problem with it. This also applies to the SubmitButton element. How do you stop it from applying this to the submitbutton element. It looks really weird on that element.

  9. Yash January 16, 2010 at 7:15 am #

    Really Nice article dude…keep it up and if possible please give me some guidance regarding dojo dependant combobox example…

  10. Oscar Santistevan July 27, 2010 at 3:41 pm #

    A thousand thanks, I’ve been looking for this for a long time, thank you for your contribution, go ahead

Trackbacks/Pingbacks

  1. Zend Framework Starter | www.pokeroconnor.com - April 28, 2009

    […] styling Zend forms with Dojo…simple example and worth a look.   posted under php One Comment […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: