View Source

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

{zone-data:component-name}
Zend_Dojo -- Extended Dijit Support
{zone-data}

{zone-data:proposer-list}
[~matthew]
{zone-data}

{zone-data:liaison}
[~ralph]
{zone-data}

{zone-data:revision}
1.0 - 14 January 2009: Initial Draft.
{zone-data}

{zone-data:overview}
Zend_Dojo was introduced in ZF 1.6.0, and offers support for most form dijits and all layout dijits. A number of dijits are still missing, and the goal of this proposal is to add support for the majority of them.
{zone-data}

{zone-data:references}
* [Dijit API docs|http://api.dojotoolkit.org/jsdoc/dijit/HEAD/dijit]
* [DojoCampus explorer|http://dojocampus.org/explorer/]
* [Zend_Dojo documentation|http://framework.zend.com/manual/en/zend.dojo.html]
{zone-data}

{zone-data:requirements}
* This proposal *will* add support for the following top-level dijits:
** dijit.ColorPalette
** dijit.Dialog
** dijit.Menu (and implicitly MenuItem and MenuSeparator)
** dijit.ProgressBar
** dijit.TitlePane
** dijit.Tooltip
** dijit.TooltipDialog
** dijit.Tree
* This proposal *will* add support for the following form dijits:
** dijit.form.MultiSelect
* This proposal *will NOT* add support for:
** dijit.form.ComboButton
** dijit.form.DropDownButton
** dijit.form.MappedTextBox
** dijit.form.RangeBoundTextBox
{zone-data}

{zone-data:dependencies}
* Zend_Dojo
{zone-data}

{zone-data:operation}
In all cases, the various dijits will follow the conventions and API of existing dijits supported by Zend_Dojo, including view helpers and form elements and decorators (where applicable).

In the case of dijit.Menu, the view helper will return an instance of itself, and allow the developer to programmatically add menu items and separators.

We are omitting support for several dijits that we will re-evaulate in the future. Amongst these are dijit.Toolbar, dijit.form.ComboButton, and dijit.form.DropDownButton. In these particular cases, functionality developed for this proposal will act as a pre-requisite for supporting these items in the future(in particular, dijit.Menu support and dijit.TooltipDialog).
{zone-data}

{zone-data:milestones}
* Milestone 1: \[DONE\] Identify dijits for which to add support
* Milestone 2: Create proposal
* Milestone 3: Create master issue and sub issues to track development of each dijit
* Milestone 4: Dijit development (including unit tests and documentation)
{zone-data}

{zone-data:class-list}
* Zend_Dojo_View_Helper_:
** MultiSelect
** ColorPalette
** Dialog
** Menu
** ProgressBar
** TitlePane
** Tooltip
** TooltipDialog
** Tree
* Zend_Dojo_Form_:
** Element_:
*** MultiSelect
** Decorator_:
*** TitlePane
*** Dialog
*** Tooltip
*** TooltipDialog
{zone-data}

{zone-data:use-cases}
*NOTE:* In all cases, "$this" is a Zend_View instance within a view script.

||UC-01||
h4. Creating menus using accessors
{code:php}
$menu = $this->menu();
$menu->addItem('Cut', array(
'iconClass' => array('dijitEditorIcon', 'dijitEditorIconCut')
'onClick' => 'foo.cut();',
))
->addItem('Copy', array(
'iconClass' => array('dijitEditorIcon', 'dijitEditorIconCopy')
'onClick' => 'foo.copy();',
))
->addSeparator()
->addItem('Paste', array(
'disabled' => true,
'iconClass' => array('dijitEditorIcon', 'dijitEditorIconCopy')
'onClick' => 'foo.paste();',
));
echo $menu;
{code}

||UC-02||
h4. Creating a dialog
{code:php}
echo $this->dialog('myDialog', $contentForDialog, array(
'title' => 'My Dialog',
));
{code}

||UC-03||
h4. Creating a tooltip

dijit.Tooltip expects a "label" attribute which contains the text of the tooltip. For consistency in the Zend_Dojo API, we pass this as the "content" argument (the second argument).

{code:php}
<?php echo $this->tooltip('tooltip', $tooltipContent, array(
'connectId' => 'foo',
)); ?>
<div id="foo">This will have a tooltip</div>
{code}

||UC-04||
h4. Creating a tooltip dialog
{code:php}
echo $this->tooltipDialog('tooltipDialog', $contentForDialog, array(
'title' => 'My Tooltip Dialog',
'showDelay' => 100,
));
{code}

||UC-05||
h4. Rendering a tree

dijit.Tree is a dojo.data-powered widget, and as such has relatively little setup other than indicating the dojo.data store object that it will populate itself from.

We _may_ add support for creating dojo.data stores and models; please comment if you would like to see this support.

{code:php}
<div dojoType="dojo.data.ItemFileReadStore" jsId="treeStore"
url="/api/tree/countries.json"></div>
<div dojoType="dijit.tree.ForestStoreModel" jsId="treeModel"
store="treeStore" query="{type:'leaf'}"
rootId="treeRoot" rootLabel="Leaves" childrenAttrs="children"></div>
<?php echo $this->tree('myTree', '', array(
'model' => 'treeModel',
'openOnClick' => true,
)); ?>
{code}

||UC-06||
h4. Creating a TitlePane

dijit.TitlePane is simply a content container with a title. You can click on the title bar to open or close the container.

{code:php}
// from a view script:
echo $this->titlePane('foo', $containerContent, array(
'title' => 'I can collapse and expand',
));

// As a form decorator:
$subForm->setDecorators(array(
'FormElements',
array('HtmlTag', array('tag' => 'dl')),
array('TitlePane', array('title' => 'More options')),
));
{code}

||UC-07||
h4. Creating progress bars

While the proposed view helper can create the ProgressBar dijit, it will still be up to the developer to programatically interact with it.

By default, the id (first argument) will also be used as the jsId of the dijit.

{code:php}
echo $this->progressBar('downloadProgress', '', array('style' => 'width: 300px'));
{code}

||UC-08||
h4. Color palettes

One unanswered question is if, by default, this should update a hidden form element; please leave a comment if you have an opinion.

{code:php}
echo $this->colorPalette('colors', '', array(
'palette' => '7x10', // rows and columns
'onChange' => 'function(val) \{ alert(val); \}',
));
{code}
{zone-data}

{zone-data:skeletons}
{code}
TBD; will mostly follow conventions already established in Zend_Dojo.
{code}
{zone-data}

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