Well, after writing few separate article about Zend Framework and dojo, I feel that I’d need to write a complete Zend_Dojo_Form. So here I am with complete example.
I am going to explain everything step by step.
1. Download Zend Framework latest version
Download least stable version from http://www.zend.com. Copy external/dojo to js/.
Hopefully you will create your directory structure as
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();
?>
<body class="tundra">
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;
?>
The form should be rendered before the viewscript if you want to use $this->dojo() in the viewscript header to render dojo.require etc
Don't forget to set the class tundra in the body-element. I forget it and it took me some time to figure it out.
Silly mistake.
I'm getting an error:
Fatal error: Class 'CustomDojoForm' not found in /Applications/MAMP/htdocs/zf_test_dojo/regend/application/controllers/DojoController.php on line 6
any ideas?
merlin have you found a solution yet? i have the same problems!
"Fatal error: Class 'CustomDojoForm' not found in /Applications/MAMP/htdocs/zf_test_dojo/regend/application/controllers/DojoController.php on line 6"
Hello,
You need to rename you form file for zend fw v 1.9, as Dojo instead of CustomDojoForm and change the class name into Form_Dojo, and the instanciation in the controller.
In dojo , I've got probem in textarea, as pressing tab and coming to textarea is wokring , but in FF, when I click on textarea to type anytihn in,
I 'm not able to and t actes like readonly .
I'm using:th same textare code you mentoined abov,
AM i missing any decorator or helper fo rtextarea?