Uncategorised

Zend Form – custom decorators

So I’m learning PHP and Zend Framework and MVC stuff. And I just figured out how to do a custom decorator on Zend_Form to change the way the form is written to HTML. The default puts each element label and input box into dd and dl tags. I just wanted to put each element in a div, with the input box on the same line as the label. There may be better ways to do this, but this is what I put in the IndexController.php file:

$form = new Zend_Form(array(
    'elementDecorators'=>array(
       'ViewHelper',
       array(
          'Description',
          array(
             'tag'=>'div',
             'class'=>'help'
          )
       ),
       'Errors',
       array('Label'),
       array(
          'HtmlTag',
           array(
              'tag'=>'div',
              'class'=>'field'
           )
        )
    ),
    'decorators'=>array(
        'FormElements',
        array(
          'HtmlTag',
          array('tag' => '<div>')
        ),
        'Form',
     ),
    'method' => 'post',
    'action' =>'/url/to/form',
    'elements' => array(
        'name' => array('text', array(
            'label' => 'Name:'
        )),
        'subject' => array('text', array(
            'label' => 'Subject:'
         )),
        'submit' => array('submit', array(
            'label' => 'Add',
        ))
    ),
 ));
 $form->submit->removeDecorator('Label');
 return $form;
}
 public function formAction()
 {
      $this->view->form = $form;
 }

The $form->submit->removeDecorator(‘Label’) bit removes the extra ‘Add’ from the submit button.

Then you just put
echo $this->form;
in your form.phtml

(This form does nothing)

This results in HTML like:

<form method="post" action="/route/to/form">
   <div>
      <div class="field">
         <label for="name" class="optional">Name:</label>
         <input type="text" name="subject" id="subject" value="">
      </div>
      <div class="field">
          <label for="subject" class="optional">Subject:</label>
          <input type="text" name="subject" id="subject" value="">
      </div>
      <div class="field">
           <input name="submit" id="submit" value="Add" type="submit">
      </div>
   </div>
</form>

Instead of the default dd and dl layed out form.
Category: Uncategorised
Beth Granter has information about herself all over the internet. Just Google her.
Posts created 165

12 thoughts on “Zend Form – custom decorators

  1. Hey Beth, ha. You stole my design!!! 🙂 lol just kidding, ironically enough I am writting about the same stuff. Instead of divs i do ul/lis check it out, i’d love your feedback!

  2. Did I? I got a bit of the above from somewhere but I lost where it was, and had changed it a quite bit anyway. I’ll check yours out if you tell me where it is!

  3. Ah right ha. Yeah you have almost all the same widgets too. I’ve been doing PHP for about a month and zend framework for about 3 weeks! Never done ANY programming before so it’s a bit hard for me, particularly cos we’re doing it MVC style. (Not counting HTML and CSS as programming!). What about you?

  4. I just got back from vacation *hence my absence* but I’ve been doing web deving since I was oh, 13? Programming for the past 5 years, mainly php. ZF for about 7-8mo. It’s actually going to save you a TON of headaches by getting you feet wet with OO & MVC. It may seem challenging to pick up on it being green and all, but if you were to become a procedural pro the jump would even be harder.

    The one area that I am new to is blogging 🙂 hah. So what company do you work for up in NYC?

  5. Lovely little tutorial, Beth! This is really a confusing thing to work with, I’ve found. I was having a bit of a tough time figuring out how to wrap both the label and input in a tag.

  6. Hi,

    Nice tutorial!! I’ve tried sticking with Zend’s default dt/dd tags for a ‘Date of Birth’ select tag group (Month-Day-Year). What I’m trying to create is like this:

    DOB:

    Jan
    Feb

    01
    02

    1994
    1993

    The closest solution that I got is the reverse of it:

    Jan
    Feb

    01
    02

    1994
    1993

    DOB:

    by adding a select element like this (month only):

    $this->addElement(‘select’, ‘birthday_month’,

    array(

    ‘multioptions’ => $this->_createMonths(),
    ‘disableLoadDefaultDecorators’ => true,
    ‘decorators’ => $this->_standardElementDecorator

    )

    );

    and grouping the select elements (month day year) using this display group:

    $this->addDisplayGroup(

    array(‘birthday_month’, ‘birthday_day’, ‘birthday_year’),
    ‘birthdate_data’,
    array(

    ‘description’ => ‘DOB:’,
    ‘disableLoadDefaultDecorators’ => true,
    ‘decorators’ => $this->_standardGroupDecorator

    )

    );

    using these decorator for the select elements:

    protected $_standardElementDecorator = array(

    ‘ViewHelper’

    );

    and this decorator for the group (month day year):

    protected $_standardGroupDecorator = array(

    ‘FormElements’,
    array(‘Description’, array(‘escape’ => false, ‘tag’ => false)),
    array(‘HtmlTag’, array(‘tag’ => ‘dd’)),

    );

    I know it’s a mouthful for a post hehehe. If I change the order in the group decorator:

    protected $_standardGroupDecorator = array(

    array(‘Description’, array(‘escape’ => false, ‘tag’ => false)),
    ‘FormElements’,
    array(‘HtmlTag’, array(‘tag’ => ‘dd’)),

    );

    Alignment gets broken. Please help. I’m very close.

    Cliburn M. Solano
    Pinoy ako

Leave a Reply to unioni Cancel reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top