About IT and Sports

My Web development experiences and sports encounters


Posts Tagged ‘table’

Understanding Zend Framework form decorators

I just watched a very good screen cast on zendcast.com about form decorators. It points out the essences of the zend form decorators which you might not grab right away when reading the reference guide or copying away from examples on the net.

There are 3 important aspects which you need to keep in mind when working with decorators. First of all form decorators change a piece of content, for instance a form element, which is of course what you might expect from the decorator design pattern. Try to picture this piece of content in its simplest form. For instance a <input> element. Your goal is to place this element somewhere in your html content, say a table.

The imput element can be created by instantiating a Zend_Form_Element_Text class. By adding decorators to this object you can influence how the input element is shown. Decorators can change content in 3 ways: prepending the content, replacing the content or appending the content. If you want to render the input element in table cell, you should use a decorator which replaces the content punting <td> tags around it:

<? $content = “<td>” . $content . ” </td>”; ?>

The second important thing to understand is that decorators are rendered in the order they are added to the Zend_Form_Element. This way you are able to render the content in a hierarchical way. Which is also the case in building up html content. You start which a leaf element and wrap around, prepend or append content until the last decorator is reached.Let’s look at the an example:

array(array(‘data’ => ‘HtmlTag’), ¬†array(‘tag’ =>’td’, ‘class’=> ‘element’)),
array(‘Label’, array(‘tag’ => ‘td’)),
array(array(‘row’ => ‘HtmlTag’), array(‘tag’ => ‘tr’))

The example above creates a 2 column table structure. The first decorator (ViewHelper) renders the <input> element, the second puts it in a table cell, the third prepends a label which is also put in a separate table cell, the fourth wraps around a <tr> tag and the last decorator puts the rendered content within <table> tags.

The third important thing to keep in mind is that you can do most of the html rendering with the decorators Zend Framework already offers in its library. You don’t need to make many of your own decorators. The decorator you are going to use frequently is the HtmlTag decorator. Use this decorator to change the html tags you want to use. For instance if you want your content to be inside <div>’s. The example uses the HtmlTag decorator 2 times. For this reason you need to use an alias to identify the decorator. In the example the aliases are ‘ row’ and ‘ data’.

Understanding decorators will save you a lot of trial and error programming. So put some time in learning what decorators do. The webcast on zendcast is a good starting point: Zend_Form Decorators explained.