I have been playing with Zend framework and dojo for the last few weeks. Its really fun to create a nice and user friendly form in Zend framework using dojo.
Create a form in Zend framework and dojo will do the client side validation and formatting etc.
Today I am going to show you how to create and place form elements in different tabs.
At he end of this we will have a form like the following.
Zend Framework and dojo Tabbed Form
First we will need to create our form as
<?
class MyForm extends Zend_Dojo_Form
{
public function init()
{
$this->setDecorators(array(
‘FormElements’,
array(‘TabContainer’, array(
‘id’ => ‘tabContainer’,
’style’ => ‘width: 600px; height: 500px;’,
‘dijitParams’ => array(
‘tabPosition’ => ‘top’
),
)),
‘DijitForm’,
));
$subForm1 = new Zend_Dojo_Form_SubForm();
$subForm1->setAttribs(array(
‘name’ => ‘textboxtab’,
‘legend’ => ‘Text Elements’,
‘dijitParams’ => array(
‘title’ => ‘Text Elements’,
),
));
$subForm1->addElement(
‘ComboBox’,
‘combobox’,
array(
‘label’ => ‘ComboBox (select)’,
‘value’ => ‘blue’,
‘autocomplete’ => false,
‘multiOptions’ => array(
‘red’ => ‘Rouge’,
‘blue’ => ‘Bleu’,
‘white’ => ‘Blanc’,
‘orange’ => ‘Orange’,
‘black’ => ‘Noir’,
‘green’ => ‘Vert’,
),
));
$subForm1->addElement(
‘DateTextBox’,
‘datebox’,
array(
‘value’ => ‘2008-07-05′,
‘label’ => ‘DateTextBox’,
‘required’ => true,
)
);
$subForm2 = new Zend_Dojo_Form_SubForm();
$subForm2->setAttribs(array(
‘name’ => ‘toggletab’,
‘legend’ => ‘Toggle Elements’,
));
$subForm2->addElement(
‘NumberSpinner’,
‘ns’,
array(
‘value’ => ‘7′,
‘label’ => ‘NumberSpinner’,
’smallDelta’ => 5,
‘largeDelta’ => 25,
‘defaultTimeout’ => 1000,
‘timeoutChangeRate’ => 100,
‘min’ => 9,
‘max’ => 1550,
‘places’ => 0,
‘maxlength’ => 20,
)
);
$subForm2->addElement(
‘CheckBox’,
‘checkbox’,
array(
‘label’ => ‘CheckBox’,
‘checkedValue’ => ‘foo’,
‘uncheckedValue’ => ‘bar’,
‘checked’ => true,
)
);
$subForm2->addElement(
‘RadioButton’,
‘radiobutton’,
array(
‘label’ => ‘RadioButton’,
‘multiOptions’ => array(
‘foo’ => ‘Foo’,
‘bar’ => ‘Bar’,
‘baz’ => ‘Baz’,
),
‘value’ => ‘bar’,
)
);
$this->addSubForm($subForm1, ‘textboxtab’)
->addSubForm($subForm2, ‘editortab’);
}
}
?>
In the above code, beside extending our form from Zend_Dojo_Form, we set form decorators as
$this->setDecorators(array(
‘FormElements’,
array(‘TabContainer’, array(
‘id’ => ‘tabContainer’,
’style’ => ‘width: 600px; height: 500px;’,
‘dijitParams’ => array(
‘tabPosition’ => ‘top’
),
)),
‘DijitForm’,
));
Setting form decorators in this way will automatically put your sub forms in separate tabs.
Next we create two sub form, set their legend and add elements to them.
An the end we add sub forms to our form.
In controller, write
$form = new MyForm();
$this->view->form = $form;
And in the view write
<?
Echo $this->form;
?>
That’s it. You will now see a nice user interface with tab container having sub form in each.
