Friday, July 3, 2009

Creating a nice Dojo Form in Zend Framework

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
<?php
$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.
<?php
echo $this->form;
?>

23 comments:

  1. The form should be rendered before the viewscript if you want to use $this->dojo() in the viewscript header to render dojo.require etc

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

    ReplyDelete
  3. 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?

    ReplyDelete
  4. merlin have you found a solution yet? i have the same problems!

    ReplyDelete
  5. "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.

    ReplyDelete
  6. 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?

    ReplyDelete
  7. Can anyone please post WHERE and HOW in boostrap to put code that needs to go in bootstrap?
    Thanks

    ReplyDelete
  8. I cant see any thing in my page.
    when see the page source, we can see
    css import succsesfull
    js import succesfull
    body load vith tundra class

    but there is no anything after body :(


    i use zend fw 1.9, and zend studio 7

    ReplyDelete
  9. i cant see anything in my page
    but when i see source page, this code apear:

    style type="text/css"

    /style
    script type="text/javascript"
    //!--
    var djConfig = {"usePlainJson":true};
    //--
    /script
    script type="text/javascript" src="http://localhost/bestpracticedojo/public/js/dojo/dojo/dojo.js" /script

    body class="tundra"


    i removed any < and > from this text

    ReplyDelete
  10. I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards

    ReplyDelete
  11. I was just doing this tutorial, and also have a pretty blank page. There is nothing in the body (but the class=Tundra is there). I see all of the dojo.require statements, know my paths are correct and have a long line of code after var zendDigits, but that's the last line of the script. Is this a common issue with a simple answer?

    ReplyDelete
  12. @comment 2 september. It took me a while too, my problem was that I only had dojo javascript folder installed properly. tundra needs folder dijit too. Regards

    ReplyDelete
  13. Really this is very good blog thanks for the time you took in writing this post.I would like to come on this blog again and again.

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. Hi, tabcontainer is ok but i don't understand how works submit button. In standard forms (without setDecorator function) if i put a submit button (Zend_Dojo_Form_Element_SubmitButton()) submission process work properly. If i use setDecorators function and transform a form in tabbed form, submit button in a subform doesn't work: i click on it and nothing happens.
    Why?

    Thanks for help.

    ReplyDelete
  16. Basketball Logo Design
    Great inventiveness, but I expect that doesn't mean that the subjects will be entirely split between the sites as a web designer AND developer, this is the grounds why I like this website so much. Not various blogs have this nice flow between both subjects, so continue and good luck with the fresh site also.

    ReplyDelete
  17. You made some decent points there. I looked on the internet for the issue and found most individuals will go along with your blog.

    ReplyDelete
  18. Ecorptrainings.com provides DOJO in hyderabad with best faculties on real time projects. We give the best online training among the DOJO in Hyderabad. Classroom Training in Hyderabad India

    ReplyDelete
  19. Good content in this post and site. We need more fresh and good content like this. Thanks for your Quality information................Oracle R12 Financials Online Training

    ReplyDelete
  20. Very interesting to read this post. I would like to thank you for the sharing.The leading online coaching supplier ERPTREE offers numerous courses on the various technical platform.
    Oracle fusion financials training

    ReplyDelete
  21. CALFRE is a local search engine for online and classroom training institute. we have online training for the course oracle fusion financials.our oracle fusion financials online training institute Hyderabad, Bangalore, Delhi, Chennai, Kolkata, Pune, Mumbai, Ahmedabad, Gurgon, Noida, India, Dubai, UAE, USA, Kuwait, UK, Singapore, Saudi Arabia, Canada



    Oracle fusion Financials Online Training

    Oracle Fusion Financials online Training

    ReplyDelete
  22. Mindmajix provides best Oracle BI Publisher online training. Training by real time experts. Attend free demo here! Demo @ Oracle BI Publisher Training

    ReplyDelete
  23. I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. thanks


    Do you want to improve your Oracle Fusion Financials Training skills? Come to igofusion


    ReplyDelete