Writing Composite Zend_Form Elements

Jon Lebensold writes; This video should help you build your own composite Zend_Form element. We’ll be building a phone element. The phone element will have 3 textboxes, one for geographic location, area code and local code. In the following videos will add a custom cell phone validator and some ajax validation.

Grab a copy of the project or browse the repository.

View the Screen cast: Writing Composite Zend_Form Elements

Tab Container Enabled Forms

Nathan Garlington wrote a nice solution for Tab based forms; Yes, it is possible to display a form in a tabContainer. I do it all the time, including using other dijit containers as well. keep in mind that this is just my solution…there are probably other ways to do this. Feel free to customize it according to your needs. Also, you may notice that I don’t include an action attrib or method attrib declaration to the form node itself…this is because I handle form submitting via xhr. Example code below:


class My_Form extends Zend_Dojo_Form
{
public function init()
{
$this->setDisableLoadDefaultDecorators(true);

// setup the our default decorators
$this->setDecorators(array(
'FormElements',
array('TabContainer', array(
'id' => 'myTabContainer',
'style' => 'width: 950px; height: 420px;',
'dijitParams' => array('tabPosition' => 'top'),
)),
'DijitForm',
));

$this->setName('myAddTrailerForm');

$this->setElementDecorators(array(
array('DijitElement'),
array('Description'),
array('HtmlTag', array('tag' => 'dd')),
array('Label', array('tag' => 'dt')),
));

//call custom class methods to add form members
$this->_addElements()
->_addDisplayGroups();

}

private function _addElements()
{
$this->addElements(array(

// general information display group elements
new Zend_Dojo_Form_Element_FilteringSelect('field1', array(
'label' => 'First Field:',
'multiOptions' =>(array(
'option1' => 'option1',
'option2' => 'option2'
)),
'required' => true,
)),

new Zend_Dojo_Form_Element_CheckBox('cb1', array(
'label' => 'Are you sure?:',
)),

new Zend_Dojo_Form_Element_FilteringSelect('year', array(
'label' => 'Year:',
'multiOptions' => array(/*....*/),
'required' => true,
)),

new Zend_Dojo_Form_Element_ComboBox('comboBox1', array(
'label' => 'ComboBox1:',
'multiOptions' => array(/*....*/),
'required' => true,
'autocomplete' => false,
'attribs' => (array('propercase' => true, 'trim' =>true)),
)),

new Zend_Dojo_Form_Element_ValidationTextBox('validationBox1', array(
'label' => 'ValidationBox1:',
'required' => true,
'attribs' => array('uppercase' => true, 'trim' =>true),
)),

new Zend_Dojo_Form_Element_ValidationTextBox('validationBox2', array(
'label' => 'ValidationBox2:',
'required' => true,
'invalidMessage' => "Please enter a value",
'attribs' => array('maxlength' => 17, 'uppercase' => true, 'trim' =>true),
'filters' => array('StringToUpper'),
'validators' => array('Alnum'),
)),
)); // end $this->addElements

return $this;
} // end _addElements()

/**
* Create the tabbed container layout
*/
private function _addDisplayGroups()
{

// add the display groups
$this->addDisplayGroup(
array( // elements in the displayGroup
'field1',
'cb1'
),
'generalInformation' // displayGroupName
);

$this->generalInformation->setDecorators(array(
'FormElements',
array('HtmlTag', array('tag' => 'dl')),
array(
'ContentPane', array(
'title' => 'General Information'
)
)
));

$this->addDisplayGroup(
array(
'year',
'comboBox1',
),
'tab2'
);

$this->tab2->setDecorators(array(
'FormElements',
array('HtmlTag', array('tag' => 'dl'),
array(
'ContentPane', array(
'title' => 'Tab 2'
)
)
));

$this->addDisplayGroup(
array(
'validationBox1',
'validationBox2',
),
'tab2'
);

$this->tab2->setDecorators(array(
'FormElements',
array('HtmlTag', array('tag' => 'dl', 'class' => 'addTrailer')),
array(
'ContentPane', array(
'title' => 'Axles'
)
)
));

return $this;
} // end _addDisplayGroups();

public function buttonsSubForm()
{
$subForm = new Zend_Dojo_Form_SubForm();
$subForm->setDecorators(array(
'FormElements',
array('HtmlTag', array('tag' => 'div', 'id' => 'buttonsSubForm', 'class' => 'span-7 push-3 prepend-top')),
))
->setElementDecorators(array(
array('DijitElement'),
))
->addElements(array(
new Zend_Dojo_Form_Element_Button('submit', array(
'type' => 'button',
'label' => 'Submit it!',
'attribs' => array('disabled' => 'disabled'),
)),

new Zend_Dojo_Form_Element_Button('cancel', array(
'label' => 'Cancel',
)),
));
$subForm->submit->removeDecorator('DtDdWrapper');
$subForm->cancel->removeDecorator('DtDdWrapper');
return $subForm;
} // end buttonsSubForm();
} // end class

That’s it. There may be some errors in there, but the idea is there. As you can see, once you see you how it goes together, it’s actually trivial to add dijit layout containers to a zend form. Be sure that you are in fact extending Zend_Dojo_Form, or using one of the other methods shown in the docs for dojo-enabling your form. You may or may not like the buttons subForm I use here either…I do this because otherwise the submit buttons have to be in their own tab, and that makes it confusing for some of my users…they don’t know where the buttons are to submit the form. So I display them in a div that renders outside the tab container, disable the submit button, and using dojo’s methods, I enable the button on the onValidStateChange dojo event. Let me know if you have any questions!

regards,
Nathan Garlington

Zend_Form Decorators Explained

Jon Lebensold posts another great screen cast about one of the most confusing parts of Zend Framework ever created 🙂 ;

One of the pain points for folks who are starting to work with the Zend Framework is the Decorating functionality found in the depths of Zend_Form. I’ve witnessed countless instances when a developer becomes excited by Zend_Form’s easy-to-implement form validation and creation, only to become frustrated by countless hours of fighting with Zend_Form_Decorators. This video is a humble attempt on my part to walk through how Zend_Form Decorators work and how you can reason your way through a desire result. I couldn’t have gotten my own head around this implementation of the decorator pattern without Matthew Weier O’Phinney’s excellent posts and his original devzone article.

UPDATE: check out this blog post / tutorial for ZF 1.10.0: http://framework.zend.com/manual/en/learning.form.decorators.html

I’ll show you a bit about how Zend_Form_Decorators are constructed and how to take the default zend_form layout and transform it into a table.

Grab a copy of the project or browse the repository.

via Zendcasts.