Previous Next

ZendX_JQuery Form Elements and Decorators

All View Helpers are pressed into Zend_Form elements or decorators also. They can even be easily integrated into your already existing forms. To enable a Form for Zend_JQuery support you can use two ways: Init your form as $form = new ZendX_JQuery_Form(); or use the static method ZendX_JQuery::enableForm($form) to enable jQuery element support.

General Elements and Decorator Usage

Both elements and decorators of the Zend jQuery Form set can be initialized with the option key jQueryParams to set certain jQuery object related parameters. This jQueryParams array of options matches to the $params variable of the corresponding view helpers. For example:

$element = new ZendX_JQuery_Form_Element_DatePicker(
                    'dp1',
                    array('jQueryParams' => array('defaultDate' => '2007/10/10'))
                );
// would internally call to:
$view->datePicker("dp1", "", array('defaultDate' => '2007/10/10'), array());

Additionally elements jQuery options can be customized by the following methods:

  • setJQueryParam($name, $value): Set the jQuery option $name to the given value.

  • setJQueryParams($params): Set key value pairs of jQuery options and merge them with the already set options.

  • getJQueryParam($name): Return the jQuery option with the given name.

  • getJQueryParams(): Return an array of all currently set jQuery options.

Each jQuery related Decorator also owns a getJQueryParams() method, to set options you have to use the setDecorators(), addDecorator() or addDecorators() functionality of a form element and set the jQueryParams key as option:

$form->setDecorators(array(
    'FormElements',
    array('AccordionContainer', array(
        'id'          => 'tabContainer',
        'style'       => 'width: 600px;',
        'jQueryParams' => array(
            'alwaysOpen' => false,
            'animated'   => "easeslide"
        ),
    )),
    'Form'
));

Form Elements

The Zend Framework jQuery Extras Extension comes with the following Form Elements:

  • ZendX_JQuery_Form_Element_AutoComplete: Proxy to AutoComplete View Helper

  • ZendX_JQuery_Form_Element_ColorPicker: Proxy to ColorPicker View Helper

  • ZendX_JQuery_Form_Element_DatePicker: Proxy to DatePicker View Helper

  • ZendX_JQuery_Form_Element_Slider: Proxy to Slider View Helper

  • ZendX_JQuery_Form_Element_Spinner: Proxy to Spinner View Helper

Note: jQuery Decorators: Beware the Marker Interface for UiWidgetElements

By default all the jQuery Form elements use the ZendX_JQuery_Form_Decorator_UiWidgetElement decorator for rendering the jQuery element with its specific view helper. This decorator is inheritly different from the ViewHelper decorator that is used for most of the default form elements in Zend_Form. To ensure that rendering works correctly for jQuery form elements at least one decorator has to implement the ZendX_JQuery_Form_Decorator_UiWidgetElementMarker interface, which the default decorator does. If no marker interface is found an exception is thrown. Use the marker interface if you want to implement your own decorator for the jQuery form element specific rendering.

Form Decorators

The following Decorators come with the Zend Framework jQuery Extension:

  • ZendX_JQuery_Form_Decorator_AccordionContainer: Proxy to AccordionContainer View Helper

  • ZendX_JQuery_Form_Decorator_AccordionPane: Proxy to AccordionPane View Helper

  • ZendX_JQuery_Form_Decorator_DialogContainer: Proxy to DialogContainer View Helper

  • ZendX_JQuery_Form_Decorator_TabContainer: Proxy to TabContainer View Helper

  • ZendX_JQuery_Form_Decorator_TabPane: Proxy to TabPane View Helper

  • ZendX_JQuery_Form_Decorator_UiWidgetElement: Decorator to Display jQuery Form Elements

Utilizing the Container elements is a bit more complicated, the following example builds a Form with 2 SubForms in a TabContainer:

Example #1 SubForms with TabContainer Decorator

The following example makes use of all Form elements and wraps them into 2 subforms that are decorated with a tab container. First we build the basic ZendX_JQuery_Form:

$form = new ZendX_JQuery_Form();
$form->setAction('formdemo.php');
$form->setAttrib('id', 'mainForm');
$form->setAttrib('class', 'flora');

$form->setDecorators(array(
    'FormElements',
    array('TabContainer', array(
        'id'          => 'tabContainer',
        'style'       => 'width: 600px;',
    )),
    'Form',
));

Setting the Form Id (in this case to 'mainForm') is an important step for the TabContainer. It is needed that the subforms can relate to the Container Id in a later form building stage. We now initialize two SubForms that will be decorated with the TabPane decorators:

$subForm1 = new ZendX_JQuery_Form();
$subForm1->setDecorators(array(
    'FormElements',
    array('HtmlTag',
          array('tag' => 'dl')),
    array('TabPane',
          array('jQueryParams' => array('containerId' => 'mainForm',
                                        'title' => 'DatePicker and Slider')))
));

$subForm2 = new ZendX_JQuery_Form();
$subForm2->setDecorators(array(
   'FormElements',
   array('HtmlTag',
         array('tag' => 'dl')),
   array('TabPane',
         array('jQueryParams' => array('containerId' => 'mainForm',
                                       'title' => 'AutoComplete and Spinner')))
));

In this stage it is important that the 'containerId' option is set in each SubForm TabPane, or the subforms cannot relate back to the tab Container and would not be displayed. To enforce this setting, an exception of the type ZendX_JQuery_Exception is thrown if the option is not set. We can now add all the desired elements to the subforms:

// Add Element Date Picker
$elem = new ZendX_JQuery_Form_Element_DatePicker(
                "datePicker1", array("label" => "Date Picker:")
            );
$elem->setJQueryParam('dateFormat', 'dd.mm.yy');
$subForm1->addElement($elem);

// Add Element Spinner
$elem = new ZendX_JQuery_Form_Element_Spinner(
                "spinner1", array('label' => 'Spinner:')
            );
$elem->setJQueryParams(array('min' => 0, 'max' => 1000, 'start' => 100));
$subForm1->addElement($elem);

// Add Slider Element
$elem = new ZendX_JQuery_Form_Element_Slider(
                "slider1", array('label' => 'Slider:')
            );
$elem->setJQueryParams(array('defaultValue' => '75'));
$subForm2->addElement($elem);

// Add Autocomplete Element
$elem = new ZendX_JQuery_Form_Element_AutoComplete(
                "ac1", array('label' => 'Autocomplete:')
            );
$elem->setJQueryParams(array('source' => array('New York',
                                             'Berlin',
                                             'Bern',
                                             'Boston')));
$subForm2->addElement($elem);

// Submit Button
$elem = new Zend_Form_Element_Submit("btn1", array('value' => 'Submit'));
$subForm1->addElement($elem);

Three additional lines are missing to put it all together and we have a jQuery animated form:

$form->addSubForm($subForm1, 'subform1');
$form->addSubForm($subForm2, 'subform2');

$formString = $form->render($view);

Example #2 Wrapping a Form into the Dialog Container

The only use for the Dialog Container in Zend Form context is to wrap itself around a form and display it in a dialog. Its important to remember that the order of the decorators has to be different than in the Accordion and Tab Container examples.

// Create new jQuery Form
$form = new ZendX_JQuery_Form();
$form->setAction('formdemo.php');

// Wrap the complete form inside a Dialog box
$form->setDecorators(array(
    'FormElements',
    'Form',
    array('DialogContainer', array(
        'id'          => 'tabContainer',
        'style'       => 'width: 600px;',
        'jQueryParams' => array(
            'tabPosition' => 'top'
        ),
    )),
));

// Add Element Spinner
$elem = new ZendX_JQuery_Form_Element_Spinner("spinner1", array('label' => 'Spinner:', 'attribs' => array('class' => 'flora')));
$elem->setJQueryParams(array('min' => 0, 'max' => 1000, 'start' => 100));

$form->addElement($elem);
Previous Next
Introdução ao Zend Framework
Resumo
Instalação
Conhecendo o Zend Framework
Guia Rápido do Zend Framework
Zend Framework & MVC Introduction
Create Your Project
Create A Layout
Create a Model and Database Table
Create A Form
Congratulations!
Auto-carregamento no Zend Framework
Introduction
Goals and Design
Basic Autoloader Usage
Resource Autoloading
Conclusion
Plugins no Zend Framework
Introduction
Using Plugins
Conclusion
Iniciando com o Zend_Layout
Introduction
Using Zend_Layout
Zend_Layout: Conclusions
Iniciando com os Marcadores do Zend_View
Introduction
Basic Placeholder Usage
Standard Placeholders
View Placeholders: Conclusion
Entendendo e Usando os Decoradores do Zend Form
Introduction
Decorator Basics
Layering Decorators
Rendering Individual Decorators
Creating and Rendering Composite Elements
Conclusion
Iniciando com o Zend_Session, Zend_Auth, e Zend_Acl
Building Multi-User Applications With Zend Framework
Managing User Sessions In ZF
Authenticating Users in Zend Framework
Building an Authorization System in Zend Framework
Iniciando com o Zend_Search_Lucene
Zend_Search_Lucene Introduction
Lucene Index Structure
Index Opening and Creation
Indexing
Searching
Supported queries
Search result pagination
Iniciando com o Zend_Paginator
Introduction
Simple Examples
Pagination Control and ScrollingStyles
Putting it all Together
Referência do Zend Framework
Zend_Acl
Introduction
Refining Access Controls
Advanced Usage
Zend_Amf
Introdução
Zend_Amf_Server
Zend_Application
Introdução
Zend_Application Quick Start
Theory of Operation
Examples
Core Functionality
Available Resource Plugins
Zend_Auth
Introduction
Database Table Authentication
Digest Authentication
HTTP Authentication Adapter
LDAP Authentication
Open ID Authentication
Zend_Barcode
Introdução
Criação de código de barras usando a classe Zend_Barcode
Objetos Zend_Barcode
Renderizadores do Zend_Barcode
Zend_Cache
Introduction
The Theory of Caching
Zend_Cache Frontends
Zend_Cache Backends
The Cache Manager
Zend_Captcha
Introdução
Captcha Operation
CAPTCHA Adapters
Zend_CodeGenerator
Introduction
Zend_CodeGenerator Examples
Zend_CodeGenerator Reference
Zend_Config
Introdução
Teoria de Operação
Zend_Config_Ini
Zend_Config_Xml
Zend_Config_Writer
Zend_Config_Writer
Zend_Console_Getopt
Introduction
Declaring Getopt Rules
Fetching Options and Arguments
Configuring Zend_Console_Getopt
Zend_Controller
Guia de Início Rápido do Zend_Controller
O Básico de Zend_Controller
O Front Controller
The Request Object
The Standard Router
The Dispatcher
Action Controllers
Action Helpers
The Response Object
Plugins
Using a Conventional Modular Directory Structure
MVC Exceptions
Zend_Currency
Introduction to Zend_Currency
Using Zend_Currency
Options for currencies
What makes a currency?
Where is the currency?
How does the currency look like?
How much is my currency?
Calculating with currencies
Exchanging currencies
Additional informations on Zend_Currency
Zend_Date
Introduction
Theory of Operation
Basic Methods
Zend_Date API Overview
Creation of Dates
Constants for General Date Functions
Working Examples
Zend_Db
Zend_Db_Adapter
Zend_Db_Statement
Zend_Db_Profiler
Zend_Db_Select
Zend_Db_Table
Zend_Db_Table_Row
Zend_Db_Table_Rowset
Zend_Db_Table Relationships
Zend_Db_Table_Definition
Zend_Debug
Dumping Variables
Zend_Dojo
Introduction
Zend_Dojo_Data: dojo.data Envelopes
Dojo View Helpers
Dojo Form Elements and Decorators
Zend_Dojo build layer support
Zend_Dom
Introdução
Zend_Dom_Query
Zend_Exception
Usando as Exceções
Uso básico
Exceções Anteriores
Zend_Feed
Introduction
Importing Feeds
Retrieving Feeds from Web Pages
Consuming an RSS Feed
Consuming an Atom Feed
Consuming a Single Atom Entry
Modifying Feed and Entry structures
Custom Feed and Entry Classes
Zend_Feed_Reader
Zend_Feed_Writer
Zend_Feed_Pubsubhubbub
Zend_File
Zend_File_Transfer
Validators for Zend_File_Transfer
Filters for Zend_File_Transfer
Zend_Filter
Introduction
Standard Filter Classes
Filter Chains
Writing Filters
Zend_Filter_Input
Zend_Filter_Inflector
Zend_Form
Zend_Form
Zend_Form Quick Start
Creating Form Elements Using Zend_Form_Element
Creating Forms Using Zend_Form
Creating Custom Form Markup Using Zend_Form_Decorator
Standard Form Elements Shipped With Zend Framework
Standard Form Decorators Shipped With Zend Framework
Internationalization of Zend_Form
Advanced Zend_Form Usage
Zend_Gdata
Introduction
Authenticating with AuthSub
Using the Book Search Data API
Authenticating with ClientLogin
Using Google Calendar
Using Google Documents List Data API
Using Google Health
Using Google Spreadsheets
Using Google Apps Provisioning
Using Google Base
Using Picasa Web Albums
Using the YouTube Data API
Catching Gdata Exceptions
Zend_Http
Introduction
Zend_Http_Client - Advanced Usage
Zend_Http_Client - Connection Adapters
Zend_Http_Cookie and Zend_Http_CookieJar
Zend_Http_Response
Zend_InfoCard
Introduction
Zend_Json
Introdução
Uso Básico
Uso Avançado do Zend_Json
Conversão de XML para JSON
Zend_Json_Server - JSON-RPC server
Zend_Layout
Introdução
Guia Rápido Zend_Layout
Opções de Configuração Zend_Layout
Uso Avançado de Zend_Layout
Zend_Ldap
Introduction
API overview
Usage Scenarios
Tools
Object oriented access to the LDAP tree using Zend_Ldap_Node
Getting information from the LDAP server
Serializing LDAP data to and from LDIF
Zend_Loader
Loading Files and Classes Dynamically
The Autoloader
Resource Autoloaders
Loading Plugins
Zend_Locale
Introduction
Using Zend_Locale
Normalization and Localization
Working with Dates and Times
Supported locales
Zend_Log
Overview
Writers
Formatters
Filters
Using the Factory to Create a Log
Zend_Mail
Introduction
Sending via SMTP
Sending Multiple Mails per SMTP Connection
Using Different Transports
HTML E-Mail
Attachments
Adding Recipients
Controlling the MIME Boundary
Additional Headers
Character Sets
Encoding
SMTP Authentication
Securing SMTP Transport
Reading Mail Messages
Zend_Markup
Introduction
Getting Started With Zend_Markup
Zend_Markup Parsers
Zend_Markup Renderers
Zend_Measure
Introduction
Creation of Measurements
Outputting measurements
Manipulating Measurements
Types of measurements
Zend_Memory
Overview
Memory Manager
Memory Objects
Zend_Mime
Zend_Mime
Zend_Mime_Message
Zend_Mime_Part
Zend_Navigation
Introduction
Pages
Containers
Zend_Oauth
Introduction to OAuth
Zend_OpenId
Introduction
Zend_OpenId_Consumer Basics
Zend_OpenId_Provider
Zend_Paginator
Introdução
Usage
Configuração
Advanced usage
Zend_Pdf
Introdução.
Criando e Carregando documentos PDF.
Salvar mudanças no documento PDF.
Document pages.
Drawing.
Interactive Features
Informação do Documento e Metadados.
Zend_Pdf module usage example
Zend_ProgressBar
Zend_ProgressBar
Zend_Queue
Introduction
Example usage
Framework
Adapters
Customizing Zend_Queue
Stomp
Zend_Reflection
Introduction
Zend_Reflection Examples
Zend_Reflection Reference
Zend_Registry
Using the Registry
Zend_Rest
Introduction
Zend_Rest_Client
Zend_Rest_Server
Zend_Search_Lucene
Resumo
Construindo Índices
Pesquisando em um Índice
Query Language
Tipos de Consulta
Conjuntos de Caracteres
Extensibilidade
Interoperando com Java Lucene
Advanced
Best Practices
Zend_Serializer
Introduction
Zend_Serializer_Adapter
Zend_Server
Introdução
Zend_Server_Reflection
Zend_Service
Introdução
Zend_Service_Akismet
Zend_Service_Amazon
Zend_Service_Amazon_Ec2
Zend_Service_Amazon_Ec2: Instances
Zend_Service_Amazon_Ec2: Windows Instances
Zend_Service_Amazon_Ec2: Reserved Instances
Zend_Service_Amazon_Ec2: CloudWatch Monitoring
Zend_Service_Amazon_Ec2: Amazon Machine Images (AMI)
Zend_Service_Amazon_Ec2: Elastic Block Storage (EBS)
Zend_Service_Amazon_Ec2: Elastic IP Addresses
Zend_Service_Amazon_Ec2: Keypairs
Zend_Service_Amazon_Ec2: Regions and Availability Zones
Zend_Service_Amazon_Ec2: Security Groups
Zend_Service_Amazon_S3
Zend_Service_Amazon_Sqs
Zend_Service_Audioscrobbler
Zend_Service_Delicious
Zend_Service_DeveloperGarden
Zend_Service_Flickr
Zend_Service_LiveDocx
Zend_Service_Nirvanix
Zend_Service_ReCaptcha
Zend_Service_Simpy
Zend_Service_SlideShare
Zend_Service_StrikeIron
Zend_Service_StrikeIron: Bundled Services
Zend_Service_StrikeIron: Advanced Uses
Zend_Service_Technorati
Zend_Service_Twitter
Zend_Service_WindowsAzure
Zend_Service_Yahoo
Zend_Session
Introduction
Basic Usage
Advanced Usage
Global Session Management
Zend_Session_SaveHandler_DbTable
Zend_Soap
Zend_Soap_Server
Zend_Soap_Client
WSDL Accessor
AutoDiscovery
Zend_Tag
Introduction
Zend_Tag_Cloud
Zend_Test
Introdução
Zend_Test_PHPUnit
Zend_Test_PHPUnit_Db
Zend_Text
Zend_Text_Figlet
Zend_Text_Table
Zend_TimeSync
Introduction
Working with Zend_TimeSync
Zend_Tool
Using Zend_Tool On The Command Line
Extending Zend_Tool
Zend_Tool_Framework
Introduction
Using the CLI Tool
Architecture
Creating Providers to use with Zend_Tool_Framework
Shipped System Providers
Extending and Configuring Zend_Tool_Framework
Zend_Tool_Project
Introduction
Create A Project
Zend_Tool Project Providers
Zend_Tool_Project Internals
Zend_Translate
Introduction
Adapters for Zend_Translate
Using Translation Adapters
Creating source files
Additional features for translation
Plural notations for Translation
Zend_Uri
Zend_Uri
Zend_Validate
Introduction
Standard Validation Classes
Validator Chains
Writing Validators
Validation Messages
Zend_Version
Obtendo a Versão do Zend Framework
Zend_View
Introdução
Scripts Controladores
Scripts de Visualização
Assistentes de Visualização (Modificadores)
Zend_View_Abstract
Zend_Wildfire
Zend_Wildfire
Zend_XmlRpc
Introduction
Zend_XmlRpc_Client
Zend_XmlRpc_Server
ZendX_Console_Process_Unix
ZendX_Console_Process_Unix
ZendX_JQuery
Introduction
ZendX_JQuery View Helpers
ZendX_JQuery Form Elements and Decorators
Pré-requisitos do Zend Framework
Introdução
Notas de Migração do Zend Framework
Zend Framework 1.10
Zend Framework 1.9
Zend Framework 1.8
Zend Framework 1.7
Zend Framework 1.6
Zend Framework 1.5
Zend Framework 1.0
Zend Framework 0.9
Zend Framework 0.8
Zend Framework 0.6
Padrões de Codificação do Framework Zend para PHP
Visão Geral
Formato do Arquivo PHP
Convenções de Nomes
Estilo de Código
Zend Framework Documentation Standard
Overview
Documentation File Formatting
Recommendations
Recommended Project Structure for Zend Framework MVC Applications
Overview
Recommended Project Directory Structure
Module Structure
Rewrite Configuration Guide
Guia de Desempenho do Zend Framework
Introdução
Class Loading
Zend_Db Performance
Internationalization (i18n) and Localization (l10n)
View Rendering
Informações Sobre Direitos Autorais