Zend Framework and Dojo: Creating Tabbed Form

15 Jan

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

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.

17 Responses to “Zend Framework and Dojo: Creating Tabbed Form”

  1. James January 16, 2009 at 7:39 pm #

    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

  2. James January 16, 2009 at 7:50 pm #

    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.

  3. Faheem Abbas January 17, 2009 at 6:34 am #

    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
    https://zendguru.wordpress.com/2009/01/07/improve-dojo-performance-in-zend-framework/
    In this article I have discussed how to improve dojo performance.
    Hope this will help you.

  4. James January 17, 2009 at 8:03 pm #

    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

  5. James January 18, 2009 at 11:04 pm #

    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.

  6. James January 19, 2009 at 8:25 am #

    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.

  7. Faheem Abbas January 19, 2009 at 8:50 am #

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

  8. James January 19, 2009 at 6:59 pm #

    Many thanks, I was stopped with that so many time.

  9. James January 19, 2009 at 9:00 pm #

    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.

  10. Faheem Abbas January 20, 2009 at 1:30 pm #

    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.

  11. Emin April 11, 2009 at 8:26 pm #

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

  12. ayesha June 16, 2009 at 7:21 pm #

    do u have a similar example for JQuery?

  13. Faheem Abbas June 17, 2009 at 10:19 am #

    no right now.

  14. Dave June 30, 2009 at 7:45 pm #

    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.

  15. Dave July 2, 2009 at 6:33 pm #

    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!

  16. tipler July 15, 2009 at 8:43 pm #

    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

  17. tipler July 15, 2009 at 8:53 pm #

    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’);

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: