Zend_Form_Element: create your element

0. Intro.

the development process, often need to use different custom selects, input, zagruzki files and so on. In this case, it is necessary to write additional handlers on the client side, as the ZF out of the box knows nothing besides standard form elements (captcha is an exception). In this article we will create a element based on facebook-like TextboxList plugin for jQuery that looks like this:

habr 1

1. Theory.

Actually, that would create a new item, you need to observe two conditions:
    the
  1. element class that inherit from Zend_Form_Element_Xhtml;
    2. the
  2. view helper that will be responsible for rendering;
    3. the
  3. element name must be in our namespace (in this case Eve_) and it should be setup correctly.

2. Practice.

2.1. Create Eve_Form_Element_TextboxList
the class Structure consists of the following main parts:
    the
  1. specify the view helper, which trendedit element;
    2. the
  2. set default options;
    3. the
  3. overload method to set (or combination) of options (optional)
    4. the
  4. other options\methods at this stage not needed, and can see into the Zend_Form_Element.
the Main objectives of the class element is the control validators\decorators\filters and treatment options with their subsequent transfer to the view helper.
The source class in listing with comments:
the 
 
class Eve_Form_Element_TextboxList extends Zend_Form_Element_Xhtml 
{ 
/** 
* The name of the helper 
* @var string 
*/ 
public $helper = 'formTextboxList'; 

/** 
* Options by default 
* @var array 
*/ 
public $options = array( 
'js_main' => '/js/jquery.textboxlist.js', // path to the main plugin script 
'js_autocomplete' => '/js/jquery.textboxlist.autocomplete.js', // path to the plugin script to the plugin (support tips) 
'js_growinginput' => '/js/jquery.growinginput.js', // dependence of the script 
'use_autocompletion' = > '0', // use hints or not 
'autocomplete_script' => null, // backend, how to take tips 
'css_main' => '/css/textboxlist.css', // styles 
'css_autocomplete' => '/css/textboxlist.autocomplete.css', 
); 

/** 
* Calculates only the user-specified options and sets them 
* 
* @param array $options 
* @return Eve_Form_Element_TextboxList 
*/ 
public function setOptions(array $options) 
{ 
/** 
* Unlike the framework, this example selects only options that were specified 
* at the stage of the description of element 
*/ 
$diff = array_intersect_key($options, $this->options); 
$this->options = array_merge($this->options, $diff); 

/** 
* then all the custom options you want to remove, otherwise they will be in html as attributes of the element 
*/ 
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 matching the name of the class that will be called automatically when you access the assistant.
The code in 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) . '"'; 
// setting default values 
if (!empty($value)) { 
$xhtml .= 'value="' . $this->view->escape($value) . '"'; 
} 

// assigning attributes already to the html element 
$xhtml .= $this->_htmlAttribs($attribs); 
$xhtml .= '/>' . PHP_EOL; 

/** 
* It's worth noting that the code needs to be addition, because if the page will 
* more than one element, then there is no need to re-initialize. 
*/ 
// 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->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. Initializes using the config.
It is no different from usual:
 
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, was created as a separate element, which draws a completely new type inputo.
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
Article based on information from habrahabr.ru

Comments

Post a Comment

Popular posts from this blog

Powershell and Cyrillic in the console (updated)

Image
In the development process is very often necessary to run a powershell script from a console application. What could be easier? the #test.ps1 & $PSScriptRoot\ConsoleApp.exe Examine the behavior of console applications when running them from the command line, using PowerShell and using PowerShell ISE: execution Result In PowerShell ISE, there is a problem with encoding, as the ISE expects the output to the encoding 1251. Use Google and find two problem solving: c use [Console]::OutputEncoding and through the powershell pipeline. Let's use the first solution: test2.ps1 $ErrorActionPreference = "Stop" function RunConsole($scriptBlock) { $encoding = [Console]::OutputEncoding [Console]::OutputEncoding = [System.Text.Encoding]::GetEncoding("cp866") try { &$scriptBlock } finally { [Console]::OutputEncoding = $encoding } } RunConsole { & $PSScriptRoot\ConsoleApp1.exe } execution Result At the command prompt, all is well, bu
Read more

Active/Passive PostgreSQL Cluster, using Pacemaker, Corosync

Image
Description This article describes an example of configuring Active/Passive PostgreSQL cluster, using Pacemaker, Corosync. As the disk subsystem is considered the drive from the system data storage (CSV). Similar to the Windows Failover Cluster from Microsoft. Technical details: OS Version — CentOS 7.1 Version package pacemaker — 1.1.13-10 Package version pcs — 0.9.143 PostgreSQL — 9.4.6 As servers(2pcs) — iron server 2*12 CPU/ memory 94GB As a CSV(Cluster Shared Volume) — an array of class Mid-Range Hitachi RAID 1+0 Preparation of cluster nodes Rule /etc/hosts on both hosts and make the visibility of hosts to each other by short names, for example: the [root@node1 ~]# cat /etc/hosts 127.0.0.1 localhost localhost.localdomain localhost4 localhost4.localdomain4 ::1 localhost localhost.localdomain localhost6 localhost6.localdomain6 10.1.66.23 node1.local.lan node1 10.1.66.24 node2.local.lan node2 Also make exchange between servers using SSH keys and
Read more

Automatic deployment ElasticBeanstalk using Bitbucket Pipelines

Image
bitbucket is a service ( Bitbucket Pipelines), which among other things allows extremely simple to automate the deployment of applications in the Amazon cloud, in particular using ElasticBeanstallk. To whom interesting, I ask under kat. the Prerequirements You should already be created ElasticBeanstalk application and deployed environments (in order to do this, refer to the official AWS documentation for, so, for example, unfolds Django ). Since the service is still undergoing testing, you need to request access to it here . the project setup Let's say we have two branches, master and we want to deplot on production environment and development — development environment. Create in the root of the project file bitbucket-pipelines.yml with the following content: the image: python:2.7.11 pipelines: branches: master: - step: script: - apt-get update # to install required zip - apt-get install -y zip # required for packaging up the application - pip install b
Read more