View Source

<ac:macro ac:name="unmigrated-inline-wiki-markup"><ac:plain-text-body><![CDATA[{zone-template-instance:ZFPROP:Proposal Zone Template}
{composition-setup}

{zone-data:component-name}
ZendX_JQuery UI Widgets View and Form Helpers
{zone-data}

{zone-data:proposer-list}
[Benjamin Eberlei|mailto:kontakt@beberlei.de]
{zone-data}

{zone-data:liaison}
TBD
{zone-data}

{zone-data:revision}
1.0 - 17.08.2008: Initial Draft.
{zone-data}

{zone-data:overview}
The jQuery UI extension adds several view helpers and form elements, aswell
as a jQuery Form Extension that combines these elements that use the functionality
of the jQuery UI Widget Library.
{zone-data}

{zone-data:references}
* ZendX JQuery Helper
* [jQuery UI Library|http://ui.jquery.com]
* [Demo showing jQuery UI Widgets + View Helpers integration|http://www.beberlei.de/jquery/demo/]
{zone-data}

{zone-data:requirements}
* *MUST* utilize the jQuery helper
* *SHOULD* allow to specify all possible options of jQuery UI widgets
* *SHOULD* offer both form and view helpers for usage
* *SHOULD* match Dojo naming/functionality scheme as near as possible
{zone-data}

{zone-data:dependencies}
* ZendX_JQuery_View_Helper_JQuery
* Zend_Form
* Zend_View_Helper_HtmlElement
{zone-data}

{zone-data:operation}
The jQuery UI Widget Library is a jQuery extension that offers a (currently)
small range of widgets for UI development, Accordion, DatePicker, Dialog,
Slider and Tabs. The development pace is very fast, and the next version
that includes new widgets (for example Autocomplete) is due to be released in the next
weeks. As development of jQuery UI goes on additional helpers and form
elements will be added.

This extension offers View helpers for all those widgets and integrates them
into the form building process. It uses the jQuery Helper to stack required javascript
code onto the jQuery onLoad stack. It can optionally use the Helpers
method to include the jQuery UI library from the Google CDN to simplify
the usage of the helpers.

The DatePicker Helper will be combined with Zend Translate and Zend Locale
to offer translated date naming strings and default date display format.

Accordion and Tabs will become Decorators to group form parts together.

Slider will be an additional input field works with a hidden field to
transport the chosen slider data.

Dialog will allow to render content in a Dialog box, which includes adding
forms to a dialog box, by default dialog opens on load. But it should also
be possible to combine it with events that are triggerd by css selectors.

Autocomplete will extend an input text field to offer auto complete functionality.
{zone-data}

{zone-data:milestones}
* Milestone 1: Finish First Proposal
* Milestone 2: Community Review
* Milestone 3: Unit Tests that cover Use-Cases
* Milestone 4: Implementation
* Milestone 5: Full Unit-Test Coverage
* Milestone 6: Documentation
{zone-data}

{zone-data:class-list}
* ZendX_JQuery_View_Helper_Accordion
* ZendX_JQuery_View_Helper_Autocomplete
* ZendX_JQuery_View_Helper_DatePicker
* ZendX_JQuery_View_Helper_Dialog
* ZendX_JQuery_View_Helper_Slider
* ZendX_JQuery_View_Helper_Tabs
* ZendX_JQuery_Form
* ZendX_JQuery_Form_Element_Autocomplete
* ZendX_JQuery_Form_Element_DatePicker
* ZendX_JQuery_Form_Element_Slider
* ZendX_JQuery_Form_Decorator_Accordion
* ZendX_JQuery_Form_Decorator_Tabs
* ZendX_JQuery_Form_Decorator_Dialog
{zone-data}

{zone-data:use-cases}
I have a demo up and running of all current UI widgets, showing the PHP
code to initialize them: [View Helpers Demo|http://www.beberlei.de/jquery/demo/]

{deck:id=UseCases}
{card:label=UC-01 Init jQuery Helpers}
{code}
<?php
$view = new Zend_View();
$view->addHelperPath("ZendX/JQuery/View/Helper", "ZendX_JQuery_View_Helper");
?>
{code}
{card}

{card:label=UC-02 Date Picker}
{code}
<?= $this->datePicker("date1", "2008/17/08", array(), array("class" => "beautify"));
{code}
{card}

{card:label=UC-03 Dialog}
{code}
<?= $this->dialog("dialog1", "Hello Dialog!"); ?>

Render Form in Dialog:

<?= $this->dialog("dialog2", $this->form); ?>
{code}
{card}

{card:label=UC-04 Slider}
{code}
<?= $this->slider("slider1", "100"); ?>
{code}
{card}
{deck}

{deck:id=UseCases2}
{card:label=UC-05 Autocomplete}
{code}
<?php $data = array('New York', 'Sydney', 'Berlin', 'London', 'Peking'); ?>
<?= $this->autoComplete('accity1', "New York", array("data" => $data)); ?>

<?= $this->autoComplete('accity2', "Sydney", array("url" => '/from/url'), array("class" => "cityautocomplete")); ?>
{code}
{card}

{card:label=UC-06 TabsContainer}
{code}<?= $this->tabsContainer()->addTab("tab1", "Tab 1", "Lorem ipsum dolor sit amet.")
->addTab("tab1", "Tab 2", "In ac odio. Vivamus scelerisque aliquet mi.")
->addTab("tab1", "Tab 3", "Proin feugiat velit consequat lectus.")
->tabsContainer("tab1", array(), array("class" => "flora")); ?>
{code}
{card}

{card:label=UC-07 AccordionContainer}
{code}
<?= $this->accordionContainer()
->addElement("accord1", "Accord 1", "Lorem ipsum dolor sit amet.")
->addElement("accord1", "Accord 2", "In ac odio. Vivamus scelerisque aliquet mi.")
->addElement("accord1", "Accord 3", "Proin feugiat velit consequat lectus.")
->accordionContainer("accord1", array(), array("class" => "flora")); ?>
{code}
{card}

{card:label=UC-08: Spinner and Colorpicker}
{code}
<h3>Spinner</h3>
<p><?= $this->spinner("spinner2", "100", array('min' => 0, 'max' => 1000, 'start' => 100)); ?></p>

<h3>ColorPicker</h3>
<p><?= $this->colorPicker("picker1", "", array(), array()); ?></p>
{code}
{deck}
{zone-data}

{zone-data:skeletons}
no class skeletons will be provided, since they are only extensions simple View Helpers
and form elements, and extend their respective abstract helpers.
{zone-data}

{zone-template-instance}]]></ac:plain-text-body></ac:macro>