Zend Framework Form: Mastering Decorators

Zend Framework Form, Subforms, DisplayGroups and De corators

24 July 2009Nick BelhommePHP5 Zend Certified Engineer + Zend Framework Certi fied Engineer

Zend Framework Presentation

Mastering Zend Form Decorators



About Me:PHP5 Zend Certified Engineer (PHP5 ZCE)Zend Framework Certified Engineer (ZFCE)ZF Contributor since 2008Freelance ConsultantPHP Community active member



Zend_FormZend_Form_SubForm

Zend_Form_DisplayGroup

Zend_Form_Element

Zend_Form_Decorator_Interface



Zend_Form

• Provides an object oriented interface to building forms.

• Allows DRY by extending implementations.

• Allows the input validation and filtering.

• Allows logical grouping of form elements to act like small forms or one big form

• Allows logical grouping of elements to aid in display purposes.



Zend_Form_SubForm

Creating logical element groups. Creating multi-page forms. For instance Wizards.

Only once all sub forms validate would the form be considered complete.

Create and Manipulate in Model



Zend_Form_DisplayGroup

Display groups are a way to create virtual groupings of elements for display

purposes. All elements in a display group are rendered together. The most common use case for this is for grouping elements

in fieldsets.

Create and Manipulate in View



Zend_Form_ElementSmallest part of the form. This represents an object representation of a regular html

form element.

Create and Manipulate in ModelBind Decorators in View

Set Metadata like class, id in View

This object is useful to:

• Bind filters to the input (Zend_Filter_Interface)

• Bind validators to the input (Zend_Validate_Interface)

• Bind Decorators (Zend_Form_Decorator_Interface)



Zend_Form_Decorator_Interface

Handles the markup of the form. Implements the Decorator Design Pattern.Thus the order in which you append them

is important.

Create and Manipulate in View



Assigning Roles

• Zend_Form_Decorator_Interface• Zend_Form_DisplayGroup• Zend_Form_Element (Metadata: Class, Id)

• Zend_Form_Element (Input handling)• Zend_Form_SubForm

Web Integrators (html, css)Developers



Developers (controller - action)$form = new Zend_Form();

$form->setAction('/')->setMethod('post');

// Create and configure username element:$username = $form->createElement('text', 'username' );$username->addValidator('alnum')

->addValidator('regex', false, array('/^[a-z]+/'))->addValidator('stringLength', false, array(6, 20))->setRequired(true)->addFilter('StringToLower');



Developers (controller - action)// Create and configure password element:

$password = $form->createElement('password', 'passw ord');$password->addValidator('StringLength', false, arra y(6))

->setRequired(true);

$submit = $form->createElement('submit', 'submit');$submit->setIgnore(true);

// Add elements to form:$form->addElement($username)

->addElement($password)->addElement($submit);

$this->view->form = $form;



Web Integrators (.phtml)<?php// Setup the form with attributes and use// the markup of default decorators

$this->form->username->setLabel(‘user: ')->setAttrib('id', ‘uName');

$this->form->password->setLabel('password: ')->setAttrib('id', 'pwd');

$this->form->submit->setLabel(‘login');?>

<?php echo $this->form; ?>



Web Integrators (.phtml)

<?php// remove default markup:

$this->form->clearDecorators();

// now add the basic elements from the inside out // (remember decorators use a strict order)

Setup the form usingcustom markup with the help of decorators

To understand how decorating works, you should refresh your browser after each line of code you wr ite.

You will see the form being build slowly.



Web Integrators (.phtml)// First we have to decorate all form elements// elements are input, checkbox, etc...

$this->form->setElementDecorators(array('viewHelper','label',array('htmlTag', array('tag' => 'li')

)));

// Now we have told the form to render all the elem ents// with their respective label// and wrap them with a tag <li>



Web Integrators (.phtml)// Then we have to tell the form to render the elem ents// so we are going to decorate the (emtpy form) wit h// the elements

$this->form->addDecorator('formElements');

// because we wrapped all elements and their labels with a// <li> tag we now should wrap all those with a <ul > tag.

//$this->form->addDecorator('HtmlTag', array('tag' => 'ul'));



Web Integrators (.phtml)// The elements are now printed to the screen in a nice UL list.// we now should wrap (decorate) the ul list with t he <form> tag

$this->form->addDecorator('form');

Congratulations, you decorated your first decorated form.

It wasn’t that hard now was it? Once you understandOn how decorating works and the order of the statem ents

It really is that easy.




// first we define which elements should be inside the fieldset// then we define the internal name of the group// last we also tell the form not to use the defaul t decorators// as we are going to decorate ourselves

$this->form->addDisplayGroup(array('username', 'password'), 'loginGroup', array('disableLoadDefaultDecorators' => true));

Let’s move on to adding fieldsets with displaygroup s

As you can see, username and password are not displ ayedanymore. This is because we wrapped them with the d isplaygroupand explicitely told the form not to render the gro up by disablingthe default decorators. (The form doesn’t know how to render)



Web Integrators (.phtml)// give the form a clue on how to render the full f orm by decorating// the display groups// * first render the elements contained in the gro up// * wrap the elements with a <ul> tag// * wrap the <ul> tag with a fieldset// * wrap the fieldset with a <li> tag.

$this->form->setDisplayGroupDecorators(array('formElements',array(array('innerHtmlTag' => 'HtmlTag'), array('ta g' => 'ul')),'fieldset',array(array('outerHtmlTag' => 'htmlTag'), array('ta g' => 'li',

'class' => 'myfieldset'))));

As you can see, the order is very important. You ar e decorating!The array(),array() construct is used because we ar e using multiple htmlTag decorators at the same time, and thus we ha ve to give thema unique name. This is done in the first array cons truct.




// because by default elements not wrapped in a dis playGroup// Are rendered first in the form, the order is not good.// we can easily modify the order of each element

$this->form->loginGroup->setOrder(1);$this->form->submit->setOrder(2);




You created 3 forms! Congratulations.

I want you to create a fourth one. This willnot use lists, only fieldsets, divs, labels and ele ments

Solution is on the next page. Do not peek.(ok I shouldn’t have said the solution is on the ne xt page,

But try to resist ;) )



Web Integrators (.phtml)<?php$this->form->clearDecorators();

$this->form->setElementDecorators(array(

'viewHelper','label',array('htmlTag', array('tag' => 'div')),

));$this->form->addDecorator('formElements');$this->form->addDecorator('form');

$this->form->addDisplayGroup(array('username', 'password'), 'loginGroup',array('disableLoadDefaultDecorators' => true)

);



Web Integrators (.phtml)$this->form->addDisplayGroup(

array('submit'), 'submitGroup', array('disableLoadDefaultDecorators' => true)

);

$this->form->setDisplayGroupDecorators(array('formElements','fieldset',

));

$this->form->username->setLabel('gebruikersnaam');$this->form->password->setLabel('wachtwoord');$this->form->submit->setLabel('login');?><?php echo $this->form; ?>



What about?

Now that you have seen Zend_Form_Decorator_Interfac e Which uses the decorator pattern, maybe it is a goo d ideato tackle the other design patterns. Because knowin g how

to use the Zend Framework components doesn’t makeyour Zend Framework applicationeasily maintainable and stable...

Design Patterns will help to achieve that goal.



There is always next time!

1 hour courses, remember??? ;)

Next: Design Patterns



Resources

•http://blog.nickbelhomme.com•http://framework.zend.com/manual/en/zend.form.html•http://www.phppatterns.com/docs/design/decorator_pa ttern

Source code of this workshop available at:http://blog.nickbelhomme.com/wp-content/uploads/wor kshopzf1.8forms.zip

Zend Framework Form: Mastering Decorators

Technology

Transcript of Zend Framework Form: Mastering Decorators