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

注意: 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:

例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);

例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
Zend Framework の紹介
概要
インストール
Learning Zend Framework
Zend Framework Quick Start
Zend Framework & MVC Introduction
Create Your Project
Create A Layout
Create a Model and Database Table
Create A Form
Congratulations!
Autoloading in Zend Framework
Introduction
Goals and Design
Basic Autoloader Usage
Resource Autoloading
Conclusion
Plugins in Zend Framework
Introduction
Using Plugins
Conclusion
Getting Started with Zend_Layout
Introduction
Using Zend_Layout
Zend_Layout: Conclusions
Getting Started Zend_View Placeholders
Introduction
Basic Placeholder Usage
Standard Placeholders
View Placeholders: Conclusion
Understanding and Using Zend Form Decorators
Introduction
Decorator Basics
Layering Decorators
Rendering Individual Decorators
Creating and Rendering Composite Elements
Conclusion
Getting Started with Zend_Session, Zend_Auth, and 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
Getting Started with Zend_Search_Lucene
Zend_Search_Lucene Introduction
Lucene Index Structure
Index Opening and Creation
Indexing
Searching
Supported queries
Search result pagination
Getting Started with Zend_Paginator
Introduction
Simple Examples
Pagination Control and ScrollingStyles
Putting it all Together
Zend Framework リファレンス
Zend_Acl
導入
アクセス制御の洗練
高度な使用法
Zend_Amf
導入
Zend_Amf_Server
Zend_Application
導入
Zend_Application クイックスタート
Theory of Operation
コア機能
利用できるリソースプラグイン
Zend_Auth
導入
データベースのテーブルでの認証
ダイジェスト認証
HTTP 認証アダプタ
LDAP 認証
Open ID 認証
Zend_Barcode
導入
Barcode creation using Zend_Barcode class
Zend_Barcode Objects
Zend_Barcode Renderers
Zend_Cache
導入
キャッシュの仕組み
Zend_Cache のフロントエンド
Zend_Cache のバックエンド
The Cache Manager
Zend_Captcha
導入
Captcha の方法
CAPTCHA アダプタ
Zend_CodeGenerator
導入
Zend_CodeGeneratorサンプル
Zend_CodeGenerator リファレンス
Zend_Config
導入
動作原理
Zend_Config_Ini
Zend_Config_Xml
Zend_Config_Writer
Zend_Config_Writer
Zend_Console_Getopt
導入
Getopt の規則の宣言
オプションおよび引数の取得
Zend_Console_Getopt の設定
Zend_Controller
Zend_Controller クイックスタート
Zend_Controller の基本
フロントコントローラ
リクエストオブジェクト
標準のルータ
ディスパッチャ
アクションコントローラ
アクションヘルパー
レスポンスオブジェクト
プラグイン
モジュラーディレクトリ構造の規約の使用
MVC での例外
Zend_Currency
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
導入
動作原理
基本メソッド
Zend_Date API の概要
日付の作成
日付関数全般用の定数
動作例
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_Definition
Zend_Debug
変数の出力
Zend_Dojo
導入
Zend_Dojo_Data: dojo.data エンベロープ
Dojo ビューヘルパー
Dojoフォーム要素とデコレーター
Zend_Dojo build layer support
Zend_Dom
導入
Zend_Dom_Query
Zend_Exception
例外の使用法
基本的な使用法
Previous Exceptions (前の例外)
Zend_Feed
導入
フィードの読み込み
ウェブページからのフィードの取得
RSS フィードの使用
Atom フィードの使用
単一の Atom エントリの処理
フィードおよびエントリの構造の変更
独自のフィードクラスおよびエントリクラス
Zend_Feed_Reader
Zend_Feed_Writer
Zend_Feed_Pubsubhubbub
Zend_File
Zend_File_Transfer
Zend_File_Transfer 用のバリデータ
Filters for Zend_File_Transfer
Zend_Filter
導入
標準のフィルタクラス群
フィルタチェイン
フィルタの書き方
Zend_Filter_Input
Zend_Filter_Inflector
Zend_Form
Zend_Form
Zend_Form クイックスタート
Zend_Form_Element を用いたフォーム要素の作成
Zend_Form によるフォームの作成
Zend_Form_Decorator による独自のフォームマークアップの作成
Zend Framework に同梱されている標準のフォーム要素
Zend Framework に同梱されている標準のデコレータ
Zend_Form の国際化
Zend_Form の高度な使用法
Zend_Gdata
導入
AuthSub による認証
Using the Book Search Data API
ClientLogin による認証
Google Calendar の使用法
Google Documents List Data API の使用法
Using Google Health
Google Spreadsheets の使用法
Google Apps Provisioning の使用法
Google Base の使用法
Picasa Web Albums の使用法
YouTube Data API の使用法
Gdata の例外処理
Zend_Http
導入
Zend_Http_Client - 高度な使用法
Zend_Http_Client - 接続アダプタ
Zend_Http_Cookie および Zend_Http_CookieJar
Zend_Http_Response
Zend_InfoCard
導入
Zend_Json
導入
Basic Usage
Zend_Json の高度な使用法
XML から JSON への変換
Zend_Json_Server - JSON-RPCサーバー
Zend_Layout
導入
Zend_Layout クイックスタート
Zend_Layout の設定オプション
Zend_Layout の高度な使用法
Zend_Ldap
導入
API概要
利用シナリオ
ツール
Zend_Ldap_Nodeを使用してLDAPツリーへのオブジェクト指向アクセス
LDAPサーバから情報を取得
LDIFへ、または、からのLDAPデータシリアライズ
Zend_Loader
ファイルやクラスの動的な読み込み
The Autoloader
Resource Autoloaders
プラグインのロード
Zend_Locale
導入
Zend_Locale の使用法
正規化および地域化
日付および時刻の扱い
サポートするロケール
Zend_Log
概要
ライター
フォーマッタ
フィルタ
Using the Factory to Create a Log
Zend_Mail
導入
SMTP 経由での送信
SMTP 接続による複数のメールの送信
異なる転送手段の使用
HTML メール
ファイルの添付
受信者の追加
MIME バウンダリの制御
追加のヘッダ
文字セット
エンコーディング
SMTP 認証
セキュアな SMTP トランスポート
メールメッセージの読み込み
Zend_Markup
導入
さあ始めましょう
Zend_Markup パーサー
Zend_Markup レンダラー
Zend_Measure
導入
計測値の作成
計測値の出力
計測値の操作
計測値の型
Zend_Memory
概要
メモリマネージャ
メモリオブジェクト
Zend_Mime
Zend_Mime
Zend_Mime_Message
Zend_Mime_Part
Zend_Navigation
導入
画面
Containers
Zend_Oauth
Introduction to OAuth
Zend_OpenId
導入
Zend_OpenId_Consumer の基本
Zend_OpenId_Provider
Zend_Paginator
導入
使用法
設定
高度な使用法
Zend_Pdf
導入
PDF ドキュメントの作成および読み込み
PDF ドキュメントへの変更内容の保存
ページの操作
描画
Interactive Features
ドキュメントの情報およびメタデータ
Zend_Pdf モジュールの使用例
Zend_ProgressBar
Zend_ProgressBar
Zend_Queue
導入
使用例
フレームワーク
アダプタ
Zend_Queueのカスタマイズ
Stomp
Zend_Reflection
導入
Zend_Reflectionサンプル
Zend_Reflectionリファレンス
Zend_Registry
レジストリの使用法
Zend_Rest
導入
Zend_Rest_Client
Zend_Rest_Server
Zend_Search_Lucene
概要
インデックスの構築
インデックスの検索
クエリ言語
クエリ作成用の API
文字セット
拡張性
Java Lucene との相互運用
応用
ベストプラクティス
Zend_Serializer
Introduction
Zend_Serializer_Adapter
Zend_Server
導入
Zend_Server_Reflection
Zend_Service
導入
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:リージョンおよび利用可能ゾーン
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_StrikeIron
Zend_Service_StrikeIron: バンドルされているサービス
Zend_Service_StrikeIron: 応用編
Zend_Service_Technorati
Zend_Service_Twitter
Zend_Service_WindowsAzure
Zend_Service_Yahoo
Zend_Session
導入
基本的な使用法
高度な使用法
グローバルセッションの管理
Zend_Session_SaveHandler_DbTable
Zend_Soap
Zend_Soap_Server
Zend_Soap_Client
WSDLアクセッサ
自動検出
Zend_Tag
導入
Zend_Tag_Cloud
Zend_Test
導入
Zend_Test_PHPUnit
Zend_Test_PHPUnit_Db
Zend_Text
Zend_Text_Figlet
Zend_Text_Table
Zend_TimeSync
導入
Zend_TimeSync の動作
Zend_Tool
Using Zend_Tool On The Command Line
Extending Zend_Tool
Zend_Tool_Framework
導入
CLIツールの使用
アーキテクチャ
Zend_Tool_Frameworkを利用してプロバイダを作成する
出荷されたシステムプロバイダー
Extending and Configuring Zend_Tool_Framework
Zend_Tool_Project
導入
プロジェクトを作成
Zend Toolプロジェクトプロバイダー
Zend_Tool_Project内部
Zend_Translate
導入
Zend_Translate のアダプタ
翻訳アダプタの使用法
ソースファイルの作成
翻訳用の追加機能
Plural notations for Translation
Zend_Uri
Zend_Uri
Zend_Validate
導入
標準のバリデーションクラス群
バリデータチェイン
バリデータの書き方
検証メッセージ
Zend_Version
Zend Framework のバージョンの取得
Zend_View
導入
コントローラスクリプト
ビュースクリプト
ビューヘルパー
Zend_View_Abstract
Zend_Wildfire
Zend_Wildfire
Zend_XmlRpc
導入
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
Zend Framework のシステム要件
導入
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
Zend Framework PHP 標準コーディング規約
概要
PHP ファイルの書式
命名規約
コーディングスタイル
Zend Framework Documentation Standard
Overview
Documentation File Formatting
Recommendations
Zend Framework MVC アプリケーションのために推奨されるプロジェクト構造
概要
推奨されるプロジェクト・ディレクトリ構造
モジュール構造
リライト設定ガイド
Zend Framework パフォーマンスガイド
導入
クラスの読み込み
Zend_Dbパフォーマンス
国際化(i18n)とローカライズ(l10n)
ビューのレンダリング
著作権に関する情報