Tabbed Forms, Part 3

Part 1 in this series was how to create a simple tabbed form using subforms and ZendX. Part 2 explained how to configure the decorators such that additional elements could be added outside the tab panes, such as a submit button. But maybe you don't want to use subforms and would prefer to use display groups instead. This can easily be done and I will cover this in Part 3.

Here was the code we used to create the subforms and add some elements:

$subforms = array();
$subforms[0] = new ZendX_JQuery_Form;
$username = $form->createElement('text', 'username')
                            ->setLabel('username');                           
$subforms[0]->addElement($username);

$subforms[1] = new ZendX_JQuery_Form;
$guestname = $form->createElement('text', 'guestname')
                            ->setLabel('guestname');                           
$subforms[1]->addElement($guestname);

So first let's add the same elements to our form using display groups:

$username = $form->createElement('text', 'username')
                            ->setLabel('username');                           
$form->addElement($username);
$form->addDisplayGroup(array('username'), 'Page 1');

$guestname = $form->createElement('text', 'guestname')
                              ->setLabel('guestname');                           
$form->addElement($guestname);
$form->addDisplayGroup(array('guestname'), 'Page 2');

Now that we have our display groups configured, we can set up the same decorators that we previously used with our subforms:

foreach ($form->getDisplayGroups as $displayGroup) {
$displayGroup->setDecorators(array(
    'FormElements',
    array('HtmlTag', array('tag' => 'div', 'class' => 'displayGroup')),
    array('TabPane', array('jQueryParams' =>
        array('containerId' => 'mainForm', 'title' => $displayGroup->getName()))),
    'Form'
));
}

So with these modifications in place, here is the complete createTabbedForm function:

/**
* You must set the form id so that you can add your tabPanes to the tabContainer
*/
$form = new ZendX_JQuery_Form;
$form->setAttrib('id', 'mainForm');

/**
* Add your form elements first, before setting the decorators
*/
$form->addElement('submit', 'Submit');

/**
* Use the TabContainer View Helper
* Use both FormElements and SubformElements to render elements inside and outside the tabs
*/
$form->setDecorators(array(
array('decorator' => array('SubformElements'=>'FormElements')),
array('HtmlTag', array('tag' => 'div', 'id'=>'tabContainer', 'class'=>'mainForm')),
array('TabContainer', array('id'=>'tabContainer', 'style'=>'width: 530px;')),
'FormElements',
'Form'
));

/**
* Create the display groups and add some elements
*/
$username = $form->createElement('text', 'username')
                            ->setLabel('username');                           
$form->addElement($username);
$form->addDisplayGroup(array('username'), 'Page 1');

$guestname = $form->createElement('text', 'guestname')
                              ->setLabel('guestname');                           
$form->addElement($guestname);
$form->addDisplayGroup(array('guestname'), 'Page 2');

/**
* Set the decorators on the display groups to use TabPane View Helper
* Note that containerId is the same as the form id set earlier
*/
foreach ($form->getDisplayGroups() as $displayGroup) {
$displayGroup->setDecorators(array(
    'FormElements',
    array('HtmlTag', array('tag' => 'div', 'class' => 'displayGroup')),
    array('TabPane', array('jQueryParams' =>
        array('containerId' => 'mainForm', 'title' => $displayGroup->getName()))),
    'Form'
));
}

return $form;

Happy coding!