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.
ServerGrove is giving Zendcast viewers a coupon! ServerGrove specializes in Zend Framework hosting and they’ve offered a 10% rebate on hosting with coupon code “zc”. If you’re looking for a host, be sure to check them out (referral). They’ve also added an additional coupon for “Mini Hosting” plans, get $2 off by using code “zcmini”.
I revised and rewrote my series of blog posts as a tutorial for the manual as of 1.10.0: http://framework.zend.com/manual/en/learning.form.decorators.html
Hey.
I found the ViewScript decorator a really big help, when I had to work with forms that would be very hard to design with normal form decorators.(Like images, separators, etc. in all the weird places…)
You might want to shred some light on that too in the next video, since that would probably help a lot to people who are new to the whole form decorator business.
Nice tutorial but form elements error messages don’t show up.
Regarding my above mentioned comment, all errors show up fine if I remove all the decorators.
Ohh, I see. I had to include ‘FormErrors’ decorators.
Great screencast. Learn a lot about decorators. Have always wanted to know how to change the forms.
Thanks:)
Thanks for great screencast agean. But i agree with David Danyi. Its hard to create complicate form with many div around it and inside it and bunch ot images.
Thanks for the great tutorial which was really simple to understand and useful.. But I have a question.. I have a form with three select elements, say, year, month and day which is a way to select the Date of Birth. I need them to be grouped into a single line or how do I put all the three in a single td element? Any advice would be really helpful.. Thanks again..
Hi Sathesh,
I’m going to make a video about creating custom form elements. Hopefully, that will help answer your question!
@Sathesh: You may want to look in the manual, as we cover this in a tutorial: http://framework.zend.com/manual/en/learning.form.decorators.composite.html
Hi, I’ve just a lot of troubles with
a captcha element.
The element is put to the top and the
description to the end
I don’t know which way to turn.
Here the form
setMethod(‘post’);
$this->setAttrib(‘enctype’, ‘application/x-www-form-urlencoded’);
$this->setAttrib(‘id’,'frmUserRegister’);
$this->setAttrib(‘class’,”);
$translator = $this->getTranslator();
// Email
$this->addElement(‘text’, ‘email’, array(
‘required’ => true,
‘maxlength’ => 255,
‘title’ => $translator->translate(‘Your email’),
‘label’ => ‘Email :’,
‘filters’ => array(‘StringTrim’),
‘validators’ => array(
array(‘EmailAddress’,true),
array(‘Db_NoRecordExists’, false, array(‘table’ => ‘tn_user’,
‘field’ => ‘email’)))
));
// Password
$this->addElement(‘password’, ‘password’, array(
‘required’ => true,
‘maxlength’ => 30,
‘title’ => $translator->translate(‘Choose your password’),
‘label’ => ‘Password :’,
‘filters’ => array(‘StringTrim’),
‘validators’ => array(
array(‘stringLength’,true, array(3, 30)))
));
//Re-Password
$this->addElement(‘password’, ‘repassword’, array(
‘required’ => true,
‘maxlength’ => 30,
‘title’ => $translator->translate(‘Re-type your password’),
‘label’ => ‘Re-type password :’,
‘filters’ => array(‘StringTrim’),
‘validators’ => array(
array(‘stringLength’,true, array(3, 30)))
));
// Firstname
$this->addElement(‘text’, ‘first_name’, array(
‘required’ => true,
‘maxlength’ => 30,
‘title’ => $translator->translate(‘Your first name’),
‘label’ => ‘First name :’,
‘filters’ => array(‘StringTrim’,'StringtoLower’,'StripTags’),
‘validators’ => array(
array(‘stringLength’,true, array(3, 30)))
));
// Lastname
$this->addElement(‘text’, ‘last_name’, array(
‘required’ => true,
‘maxlength’ => 30,
‘title’ => $translator->translate(‘Your last name’),
‘label’ => ‘Last name :’,
‘filters’ => array(‘StringTrim’,'StringtoLower’,'StripTags’),
‘validators’ => array(
array(‘stringLength’,true, array(3, 30)))
));
//Captcha
$this->addElement(‘captcha’, ‘captchaRegister’, array(
‘required’ => true,
‘label’ => ‘Please enter the 5 letters displayed aside:’,
‘title’ => $translator->translate(‘Please enter the 5 letters displayed above’),
‘captcha’ => array(
‘captcha’ => ‘Figlet’,
‘wordLen’ => 5,
‘timeout’ => 300
)
));
// Csrf
$this->addElement(‘hash’, ‘userRegisterHash’, array(
‘ignore’ => true,
));
// Submit
$this->addElement(‘submit’, ‘userRegisterSubmit’, array(
‘ignore’ => true,
‘label’ => ‘Sign up’,
));
$this->setElementDecorators(array(
‘ViewHelper’,
array(array(‘data’ => ‘HtmlTag’), array(‘tag’ =>’td’, ‘class’=> ‘element’)),
array(‘Label’, array(‘tag’ => ‘td’)),
array(array(‘row’ => ‘HtmlTag’), array(‘tag’ => ‘tr’))
));
$captcha = $this->getElement(‘captchaRegister’);
$captcha->setDecorators(array(
array(array(‘data’ => ‘HtmlTag’), array(‘tag’ =>’td’, ‘class’=> ‘element’)),
array(‘Label’, array(‘tag’ => ‘td’)),
array(array(‘row’ => ‘HtmlTag’), array(‘tag’ => ‘tr’))
));
$submit = $this->getElement(‘userRegisterSubmit’);
$submit->setDecorators(array(‘ViewHelper’,
array(array(‘data’ => ‘HtmlTag’), array(‘tag’ =>’td’, ‘class’=> ‘element’)),
array(array(‘emptyrow’ => ‘HtmlTag’), array(‘tag’ =>’td’, ‘class’=> ‘element’, ‘placement’ => ‘PREPEND’)),
array(array(‘row’ => ‘HtmlTag’), array(‘tag’ => ‘tr’))
));
$this->setDecorators(array(
‘FormElements’,
array(‘HtmlTag’, array(‘tag’ => ‘table’)),
‘Form’
));
}
}
Can you help me, please ?
Sorry here the form
(I pasted also the php tag)
class Form_Test extends Zend_Form
{
public function init()
{
$this->setMethod(‘post’);
$this->setAttrib(‘enctype’, ‘application/x-www-form-urlencoded’);
$this->setAttrib(‘id’,'frmUserRegister’);
$this->setAttrib(‘class’,”);
$translator = $this->getTranslator();
// Email
$this->addElement(‘text’, ‘email’, array(
‘required’ => true,
‘maxlength’ => 255,
‘title’ => $translator->translate(‘Your email’),
‘label’ => ‘Email :’,
‘filters’ => array(‘StringTrim’),
‘validators’ => array(
array(‘EmailAddress’,true),
array(‘Db_NoRecordExists’, false, array(‘table’ => ‘tn_user’,
‘field’ => ‘email’)))
));
// Password
$this->addElement(‘password’, ‘password’, array(
‘required’ => true,
‘maxlength’ => 30,
‘title’ => $translator->translate(‘Choose your password’),
‘label’ => ‘Password :’,
‘filters’ => array(‘StringTrim’),
‘validators’ => array(
array(‘stringLength’,true, array(3, 30)))
));
//Re-Password
$this->addElement(‘password’, ‘repassword’, array(
‘required’ => true,
‘maxlength’ => 30,
‘title’ => $translator->translate(‘Re-type your password’),
‘label’ => ‘Re-type password :’,
‘filters’ => array(‘StringTrim’),
‘validators’ => array(
array(‘stringLength’,true, array(3, 30)))
));
// Firstname
$this->addElement(‘text’, ‘first_name’, array(
‘required’ => true,
‘maxlength’ => 30,
‘title’ => $translator->translate(‘Your first name’),
‘label’ => ‘First name :’,
‘filters’ => array(‘StringTrim’,'StringtoLower’,'StripTags’),
‘validators’ => array(
array(‘stringLength’,true, array(3, 30)))
));
// Lastname
$this->addElement(‘text’, ‘last_name’, array(
‘required’ => true,
‘maxlength’ => 30,
‘title’ => $translator->translate(‘Your last name’),
‘label’ => ‘Last name :’,
‘filters’ => array(‘StringTrim’,'StringtoLower’,'StripTags’),
‘validators’ => array(
array(‘stringLength’,true, array(3, 30)))
));
//Captcha
$this->addElement(‘captcha’, ‘captchaRegister’, array(
‘required’ => true,
‘label’ => ‘Please enter the 5 letters displayed aside:’,
‘title’ => $translator->translate(‘Please enter the 5 letters displayed above’),
‘captcha’ => array(
‘captcha’ => ‘Figlet’,
‘wordLen’ => 5,
‘timeout’ => 300
)
));
// Csrf
$this->addElement(‘hash’, ‘userRegisterHash’, array(
‘ignore’ => true,
));
// Submit
$this->addElement(‘submit’, ‘userRegisterSubmit’, array(
‘ignore’ => true,
‘label’ => ‘Sign up’,
));
$this->setElementDecorators(array(
‘ViewHelper’,
array(array(‘data’ => ‘HtmlTag’), array(‘tag’ =>’td’, ‘class’=> ‘element’)),
array(‘Label’, array(‘tag’ => ‘td’)),
array(array(‘row’ => ‘HtmlTag’), array(‘tag’ => ‘tr’))
));
$captcha = $this->getElement(‘captchaRegister’);
$captcha->setDecorators(array(
array(array(‘data’ => ‘HtmlTag’), array(‘tag’ =>’td’, ‘class’=> ‘element’)),
array(‘Label’, array(‘tag’ => ‘td’)),
array(array(‘row’ => ‘HtmlTag’), array(‘tag’ => ‘tr’))
));
$submit = $this->getElement(‘userRegisterSubmit’);
$submit->setDecorators(array(‘ViewHelper’,
array(array(‘data’ => ‘HtmlTag’), array(‘tag’ =>’td’, ‘class’=> ‘element’)),
array(array(‘emptyrow’ => ‘HtmlTag’), array(‘tag’ =>’td’, ‘class’=> ‘element’, ‘placement’ => ‘PREPEND’)),
array(array(‘row’ => ‘HtmlTag’), array(‘tag’ => ‘tr’))
));
$this->setDecorators(array(
‘FormElements’,
array(‘HtmlTag’, array(‘tag’ => ‘table’)),
‘Form’
));
}
}
How would i get rid of separators from radios or checkboxes?
hey john!
in my app.ini i have
appnamespace = “Application”
which i cant change for legacy issues
which since youre asking im assuming is the culprit?
out of all the statements in my app.ini
this is the one line i didnt really understand
ok – so i tried it anyways and changed it over to
appnamespace = “”
and still got the same error
btw – apologies for posting in the wrong episode
i thought i was over the composite form episode
hey john!
in my app.ini i have
appnamespace = “Application”
which i cant change for legacy issues
which since youre asking im assuming is the culprit?
out of all the statements in my app.ini
this is the one line i didnt really understand
ok – so i tried it anyways and changed it over to
appnamespace = “”
and still got the same error
btw – apologies for posting in the wrong episode
i thought i was over the composite form episode
also i just found out this is a double-0post as well
ugh!
Hi
It was helpful.
Thanks for this video
I have a question related to this:
How do i add the reset button next to submit button?
I tried but can’t align them next to each other!
Thanks
Hey Jon, thank you for this and the other useful examples!
It helped me a lot to understand!
It’s very friendly that you take so much time creating these videos.
Hello Jon, I have a problem, when I add the addvalidators, its doesn’t work
Why?
I try to modify the code by all method but nothing
Thank in advance !
Hello,
I am trying to create a printable representations of a completed form.
So, instead of a input field, I have add a form element called Note
class SF_Form_Element_Note extends Zend_Form_Element_Xhtml
{
public $helper = ‘formNote’;
}
My problem is that I am trying to place a span tag around the data text
my decorator for this field is as follows:
public function printDecorators ($id)
{
return array(
array(‘ViewHelper’, array(array(‘data’ => ‘HtmlTag’), array(‘tag’ =>’span’)),
array(array(‘data2′ => ‘HtmlTag’), array(‘tag’ =>’span’, ‘id’ => $id))),
array(‘Label’, array(‘tag’ =>’span’)),
array(‘Errors’),
array(‘HtmlTag’)
);
I get
First Name
Jeffery
Last Name
Shipman
what I would like is
First Name
Jeffery
Last Name
Shipman
Hello,
Sorry about the last post.
I am trying to create a printable representations of a completed form.
So, instead of a input field, I have add a form element called Note
class SF_Form_Element_Note extends Zend_Form_Element_Xhtml
{
public $helper = ‘formNote’;
}
My problem is that I am trying to place a span tag around the data text
my decorator for this field is as follows:
public function printDecorators ($id)
{
return array(
array(‘ViewHelper’, array(array(‘data’ => ‘HtmlTag’), array(‘tag’ =>’span’)),
array(array(‘data2′ => ‘HtmlTag’), array(‘tag’ =>’span’, ‘id’ => $id))),
array(‘Label’, array(‘tag’ =>’span’)),
array(‘Errors’),
array(‘HtmlTag’)
);
I get
<div>
</div><span id="printtab-first_name-label"><label for="printtab-first_name" class="optional">First Name</label></span>
Jeffery</div>
<div><span id="printtab-last_name-label"><label for="printtab-last_name" class="optional">Last Name</label></span>
Shipman</div>
</div>
what I would like is
<div>
</div><span id="printtab-first_name-label"><label for="printtab-first_name" class="optional">First Name</label></span>
<span id="first">Jeffery</span></div>
<div><span id="printtab-last_name-label"><label for="printtab-last_name" class="optional">Last Name</label></span>
<span id="last">Shipman</span></div>
</div>
Zendcasts.com is one of my top 5 favorite websites. THANK YOU FOR THIS TUTORIAL! I am a front-end designer jumping into OOP and Zend Framework for the first time. You helped me come leaps and bounds! KEEP UP THE GOOD WORK.
This tut was helpful. It was somewhat distracting noting that the author/speaking didn’t really seem to know Form Decorators himself all that well.
I was turned off of Zend Form Decorators at first because it was hard to understand them and how they work. Slowly but surely the light is coming on they are indeed powerful and slick. However, the folks and Zend REALLY need to get their act together with regard to documenting these things.
Even now the docs are substandard and it’s hard to find real-world examples.
Thank you
Nice Training Video…
The video seems no longer to be available …
Absolutely brilliant. Thank you very much! Just what i needed to pull me out of the Decorators swamp
very nice tutorial.. thanks