Zend_Form_Element: creating your item

0. Intro.

In the development process, quite often you need to use different custom selects, inputs, file downloaders, and so on. In this case, you have to write additional handlers on the client side, since ZF out of the box does not know anything except the standard form elements (captcha is an exception). This article will look at creating an element based on the facebook-like TextboxList plugin for jQuery, which looks like this:

1. Theory.

Actually, in order to create a new element, you need to observe two conditions:

1. an element class inherited from Zend_Form_Element_Xhtml is needed;
2. view helper, which will be responsible for rendering;
3. the name of the element must be in our namespace (in this case, Eve_) and it must be correctly configured.

2. Practice.

2.1. Create Eve_Form_Element_TextboxList

The class structure consists of the following main parts:

1. specifying the view helper that the item will render;
2. setting defaults;
3. method overloading for setting (or combining) options (optional);
4. the remaining options \ methods are not needed at this stage and can be found in Zend_Form_Element.

The main tasks of the element class are to manage validators \ decorators \ filters and process options with their subsequent transfer to the view helper.

The class source in the listing with comments:

class Eve_Form_Element_TextboxList extends Zend_Form_Element_Xhtml { /** *   * @var string */ public $helper = 'formTextboxList'; /** *  - * @var array */ public $options = array( 'js_main' => '/js/jquery.textboxlist.js', //      'js_autocomplete' => '/js/jquery.textboxlist.autocomplete.js', //       ( ) 'js_growinginput' => '/js/jquery.growinginput.js', //   'use_autocompletion' => '0', //     'autocomplete_script' => null, // backend,    'css_main' => '/css/textboxlist.css', //  'css_autocomplete' => '/css/textboxlist.autocomplete.css', ); /** *         * * @param array $options * @return Eve_Form_Element_TextboxList */ public function setOptions(array $options) { /** *     ,    ,    *     */ $diff = array_intersect_key($options, $this->options); $this->options = array_merge($this->options, $diff); /** *      ,     html    */ foreach ($diff as $key => $option) { unset ($options[$key]); } parent::setOptions($options); return $this; } } 

2.2. Create a view helper Eve_View_Helper_FormTextboxList

The class must have a method that matches the class name, which will be called automatically when the helper is accessed.

Code listing + comments:

 class Eve_View_Helper_FormTextboxList extends Zend_View_Helper_FormElement { /** * Generates a 'textboxList' element. * * @access public * * @param string|array $name If a string, the element name. If an * array, all other parameters are ignored, and the array elements * are extracted in place of added parameters. * * @param mixed $value The element value. * * @param array $attribs Attributes for the element tag. * * @return string The element XHTML. */ public function formTextboxList($name, $value = '', $attribs = null, $options = null) { $id = $name; $elemId = $this->view->escape($id); $xhtml = '<input type="text" name="' . $this->view->escape($name) . '" id="' . $this->view->escape($id) . '"'; //     if (!empty($value)) { $xhtml .= ' value="' . $this->view->escape($value) . '"'; } //     html  $xhtml .= $this->_htmlAttribs($attribs); $xhtml .= '/>' . PHP_EOL; /** *   ,     , ..  ,     *    ,      . */ // add content and end tag $xhtml .= $content . ($this->view->doctype()->isXhtml() ? '/>' : '>') . PHP_EOL; $this->view->headScript->appendFile($options['js_growinginput']); $this->view->headScript->appendFile($options['js_main']); $this->view->headScript->appendFile($options['js_autocomplete']); $this->view->headLink->appendStylesheet($options['css_main']); $this->view->headLink->appendStylesheet($options['css_autocomplete']); $xhtml .= '<script type="text/javascript"> var tl_' . $elemId . ' = new $.TextboxList("#' . $elemId. '", {unique: true, plugins: {autocomplete: {}}}); '; if ((int) $options['use_autocompletion'] == 1) { if (!$options['autocomplete_script']) { throw new Zend_View_Exception('No autocompletion backend is set for ' . __CLASS__ . ' plugin.'); } else { $.getJSON('" . $options['autocomplete_script'] . "', null, function (data) { tl.plugins['autocomplete'].setValues(data); tl.getContainer().removeClass('textboxlist-loading'); });"; } } $xhtml .= '</script>'; return $xhtml; } } 

2.3. Initialization via config.

It is no different from many things:

 elements.categories.type = textboxList elements.categories.options.label = Categories elements.categories.options.use_autocompletion = 1 elements.categories.options.autocomplete_script = /categories/ajax/get-all/ 

3. Outro.

Thus, a separate element was created that draws a completely new type of input.

Jquery plugin can be found over there - http://devthought.com/projects/jquery/textboxlist/ .

The plugin has enough options that were not implemented under this component. And yes, the plugin is not under a free license.



UPD: 1. updated (see this comment