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
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.
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.
