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.
Zend Framework 
Hi. I’m starting to use Zend Framework and now I’ll start to use forms in a page that I’m creating.
I’m doing a site for a retail store and the forms that I need to create are for bills and other things like that. I’ll need that the forms may be interactive, that when you add a product in the bill it will appear a new line, and the total price need to be actulized.
So my doubt is if to use Zend_Form or use Dojo. It’s looks that Dojo gave more options for better views and looks more interactive, but maybe is much slower than Zend_Form.
I’ll appreciate too mucho your response, that will guide my future efforts. Thanks
I didn’t explicated well, but I need a lot of interactive things, the bill was only a example. And also if the view is nice, is better, so the web page will see more proffessional. The biggest doubt that I have is about the speed of using Dojo.
Thanks for all the job that you are doing.
James,
Don’t worry about the Dojo speed. Although it take more time requesting js files when developing your application, however once you completed the job, make a custom build. This will restrict js requests to one or two and will increase speed.
Read me article
In this article I have discussed how to improve dojo performance.
Hope this will help you.
Many thanks.
I started using Dojo forms of your tutorial, but I realized that common javascript code, that works fine with Zend_Form, doesn’t work with Dojo forms. Do you know about doing javascript code for Dojo forms?? It’s to hard??
Thanks for your answer
Hi, it’s me again. I’d got a problem, all works well with dojo forms when I put them on the index.phtml, but when there are another actions with another .phtml the dojo forms does’nt works, it’s only see like a Zend_Form, and not like a Dojo one.
Any idea of this?? Thanks.
The error that appears in bugzilla is that “dojo is not defined”, it’s like it isn’t visible in the other .phtml, but it’s only visibly in de index.phtml.
okay.
Let me explain few things for you here.
1. path to dojo.js file should be valid every time. Either use absolute path or set you baseUrl path in bootstrap file and then use that baseUrl path in all your .phtml files.
2. While accessing dojo elements you cannot use document.getElementById etc. use dijit.byId() instead.
The last error “dojo not defined” is what I explained in the first step. if you specified path to dojo like the following, this error will not happen.
“http://localhost/zend/js/dojo/dojo.js”.
Many thanks, I was stopped with that so many time.
Do you have an archive that you can send me in wich it’s implemented a javascript function for a Dojo_Form???
Or if you have a link in wich it’s explain how to use them in Dojo. I had search a lot in the web and I hadn’t find any tutorial for making javascript function, because the usual way of including javascript doesn’t work with Dojo forms.
Sorry James,
I didn’t understand.
You wana say that we cannot use simple javascript functions with dojo?
I don’t think so.
If you have a textbox, datetextbox,button or any other form element. you can attach js function to button as
$your_elemet->setAttrib(‘onclick’,’clickMe()’);
and then javascript
function clickMe()
{
alert(“you click me”);
}
Similary you can attach any event applicable in html and write js function.
If you want to study the functions each dojo element is providing. open appropriate js file like dojo/dijit/datetextbox.js and see what function it is providing.
Last thing
As I have already said that you cannot use document.getElementById, instead use dijit.byId.
Hi, thanks for example.
And very very thanks Faheem Abbas for answer. You save my night 🙂
dojo path is “http://localhost/scripts/dojo/dojo/dojo.js”.
do u have a similar example for JQuery?
no right now.
Thank you for all of your examples. I have a question for you. I have a tab container set up similar to your code above and would like a submit button to be displayed underneath. Currently when I put a submit button in the code, it shows up hidden inside of the tab container. Using your code, do you know how to have a submit button displayed outside of the tab container?
Thank you.
I answered my own question. There may be a better way, but I created a main subform, applied a tabContainer decorator to it, and attached the subforms(tabs) to it instead of the master form. I added the submit button to the master form and it all works. I figured I would post it here just in case anyone else is trying to do this. Thanks!
Hi Faheem,
Thanks a lot for this example and time ..!!
Could you explain the same example but without mvc?
I’m trying but .. :o(
My script ..
——–
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);
$form->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 Elementos’)));
$subForm2 = new Zend_Dojo_Form_SubForm();
$subForm2->setAttribs(array(
‘name’=>’toggletab’,
‘legend’=>’Toggle Elements’
));
$name = $form->createElement(‘text’,’name’);
$name->setLabel(‘Name’);
$lastName = $form->createElement(‘text’,’lastName’);
$lastName->setLabel(‘Last Name’);
$subForm1->addElement($name);
$subForm2->addElement($lastName);
$form->addSubForm($subForm1,’textboxtab’)
->addSubForm($subForm2,’editortab’);
$view->dojo()->setDjConfigOption(‘usePlainJson’,true)
->setLocalPath(“http://localhost/zend/again/js/dojo/dojo/dojo.js”);
print $view->dojo();
print $form->render($view);
?>
——–
Regards,
Tip
In the previous post, before the script ..
Fail my last post in the static call to addHelperPath()
——- Before —————
set_include_path(get_include_path() . PATH_SEPARATOR . “/usr/local/lib/Zend”);
require_once(‘Zend/Dojo/Form.php’);
require_once(‘Zend/Dojo/Form/SubForm.php’);
require_once(‘Zend/View.php’);
require_once(‘Zend/Controller/Action/Helper/ViewRenderer.php’);
$form = new Zend_Dojo_Form();
$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 (*)
—- Continue in previous post ————-
(*) _HelpBroker !!colon!!! addHelperPath(’Zend/Dojo/View/Helper’, ‘Zend_Dojo_View_Helper’);