diff options
14 files changed, 423 insertions, 13 deletions
diff --git a/demos/quickstart/protected/controls/TopicList.tpl b/demos/quickstart/protected/controls/TopicList.tpl index 3c2198b1..a44e56eb 100644 --- a/demos/quickstart/protected/controls/TopicList.tpl +++ b/demos/quickstart/protected/controls/TopicList.tpl @@ -59,6 +59,7 @@ <li><a href="?page=Controls.Data">Data Controls</a></li>
<li><a href="?page=ActiveControls.Introduction">AJAX: Introduction</a></li>
<li><a href="?page=ActiveControls.Home">Active Controls (AJAX)</a></li>
+ <li><a href="?page=JuiControls.Home">Jui Controls (jQuery UI)</a></li>
<li><a href="?page=Controls.NewControl">Writing New Controls</a></li>
</ul>
</div>
diff --git a/demos/quickstart/protected/pages/JuiControls/Home.page b/demos/quickstart/protected/pages/JuiControls/Home.page new file mode 100644 index 00000000..dee08dfe --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Home.page @@ -0,0 +1,49 @@ +<com:TContent ID="body" > +<h1>Jui Controls (jQuery UI)</h1> +<p class="block-content"> +Jui controls are the PRADO port of the standard <a href="http://jqueryui.com/">jQuery UI</a> widgets. They can be used as standard <a href="?page=ActiveControls.Introduction">Active Controls</a>, but will automatically load the needed jQuery UI javascript libraries. Jui controls have a <tt>Options</tt> property used to pass options to the underlying javascript object. For informations of the specific options of each widget, follow the <a href="http://api.jqueryui.com/category/widgets/">API Documentation</a> for the specific widget. +</p> + +<h2>PRADO Jui interactions controls</h2> +<ul id="u1" class="block-content"> + <li> + <a href="?page=JuiControls.TJuiDraggable">TJuiDraggable</a> + is an element that can be moved using the mouse. + <com:RunBar PagePath="JuiControls.Samples.TJuiDraggable.Home" /> + </li> + + <li> + <a href="?page=JuiControls.TJuiDroppable">TJuiDroppable</a> + is an area where TJuiDraggable elements can be released. + <com:RunBar PagePath="JuiControls.Samples.TJuiDroppable.Home" /> + </li> + + <li> + <a href="?page=JuiControls.TJuiResizable">TJuiResizable</a> + is an element that cna be resized using the mouse. + <com:RunBar PagePath="JuiControls.Samples.TJuiResizable.Home" /> + </li> + + <li> + <a href="?page=JuiControls.TJuiSelectable">TJuiSelectable</a> + displays a list of elements that can be selected individually. + <com:RunBar PagePath="JuiControls.Samples.TJuiSelectable.Home" /> + </li> + + <li> + <a href="?page=JuiControls.TJuiSortable">TJuiSortable</a> + displays a list of elements that can be selected individually. + <com:RunBar PagePath="JuiControls.Samples.TJuiSortable.Home" /> + </li> +</ul> + +<h2>PRADO Jui controls</h2> +<ul id="u2" class="block-content"> + <li> + <a href="?page=JuiControls.TJuiAutocomplete">TJuiAutocomplete</a> + displays a textbox where the user can choose from a list of suggestions. + <com:RunBar PagePath="JuiControls.Samples.TJuiAutocomplete.Home" /> + </li> +</ul> + +</com:TContent> diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.page new file mode 100644 index 00000000..6912389d --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.page @@ -0,0 +1,25 @@ +<com:TContent ID="body"> +<h1>TJuiDraggable Samples</h1> + +<com:TStyleSheet> + .ui-draggable { + width: 100px; + height:100px; + background-color: lime; + border: 1px solid black; + padding: 1em; + } +</com:TStyleSheet> +<table class="sampletable"> + +<tr><td class="samplenote"> +Default options with a little css applied: +</td><td class="sampleaction" style="height:600px"> + <com:TJuiDraggable> + Drag me around + </com:TJuiDraggable> +</td></tr> + +</table> + +</com:TContent> diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.page new file mode 100644 index 00000000..59cd3838 --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.page @@ -0,0 +1,48 @@ +<com:TContent ID="body"> +<h1>TJuiDraggable Samples</h1> + +<com:TStyleSheet> + .ui-draggable { + width: 100px; + height:100px; + background-color: lime; + border: 1px solid black; + padding: 1em; + } + .ui-droppable { + width: 150px; + height:150px; + border: 1px solid black; + padding: 1em; + margin: 1em; + } + .drop-yellow { + background-color: yellow; + } + .drop-red { + background-color: red; + } +</com:TStyleSheet> +<table class="sampletable"> + +<tr><td class="samplenote"> +Default options with a little css applied: +</td><td class="sampleaction" style="height:600px"> + <com:TJuiDraggable> + Drag me around + </com:TJuiDraggable> + + <com:TJuiDroppable OnDrop="drop1_ondrop" CssClass="drop-yellow"> + Drop it here! + <br/><com:TActiveLabel ID="label1" /> + </com:TJuiDroppable ID="drop1"> + + <com:TJuiDroppable OnDrop="drop2_ondrop" CssClass="drop-red"> + Drop it here! + <br/><com:TActiveLabel ID="label2" /> + </com:TJuiDroppable ID="drop1"> +</td></tr> + +</table> + +</com:TContent> diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.php b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.php new file mode 100644 index 00000000..cdbe85ba --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.php @@ -0,0 +1,16 @@ +<?php + +class Home extends TPage +{ + public function drop1_ondrop($sender, $param) + { + $draggable=$param->getDroppedControl()->ID; + $this->label1->Text="Dropped ".$draggable." at: <br/>Top=".$param->getOffsetTop()." Left=".$param->getOffsetLeft(); + } + + public function drop2_ondrop($sender, $param) + { + $draggable=$param->getDroppedControl()->ID; + $this->label2->Text="Dropped ".$draggable." at: <br/>Top=".$param->getOffsetTop()." Left=".$param->getOffsetLeft(); + } +} diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.page new file mode 100644 index 00000000..b5a207c0 --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.page @@ -0,0 +1,25 @@ +<com:TContent ID="body"> +<h1>TJuiResizable Samples</h1> + +<com:TStyleSheet> + .resizable { + width: 150px; + height: 150px; + padding: 0.5em; + background: #fff; + border: 1px solid #000; + } + </com:TStyleSheet> +<table class="sampletable"> + +<tr><td class="samplenote"> +Default options with a little css applied: +</td><td class="sampleaction"> + <com:TJuiResizable CssClass="resizable"> + Resize me! + </com:TJuiResizable> +</td></tr> + +</table> + +</com:TContent> diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.page new file mode 100644 index 00000000..4af5d637 --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.page @@ -0,0 +1,38 @@ +<com:TContent ID="body"> +<h1>TJuiSelectable Samples</h1> + +<com:TStyleSheet> + .ui-selectable { + list-style: none; + cursor: pointer; + } + .ui-selectable li { + border: 1px solid transparent; + padding: 3px; + border-radius:3px; + } + + .ui-selectable li:hover { + background: #FECA40; + border: 1px solid black; + } + + .ui-selecting { + background: #FECA40; + } + .ui-selected { + background: #F39814; color: white; + } +</com:TStyleSheet> +<table class="sampletable"> + +<tr><td class="samplenote"> +Default options with a little css applied: +</td><td class="sampleaction"> + <com:TJuiSelectable ID="repeater1" onSelectedIndexChanged="repeater1_onSelectedIndexChanged"/> + <com:TActiveLabel ID="label1" /> +</td></tr> + +</table> + +</com:TContent> diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.php b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.php new file mode 100644 index 00000000..cf8d40f1 --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.php @@ -0,0 +1,32 @@ +<?php + +class Home extends TPage +{ + protected $data = array( + 'PRADO', + 'quickstart', + 'tutorial', + 'sample', + 'for the', + 'TJuiSortable', + 'control', + ); + + public function onLoad($param) + { + if(!$this->IsPostback) + { + $this->repeater1->DataSource=$this->data; + $this->repeater1->dataBind(); + } + } + + public function repeater1_onSelectedIndexChanged($sender, $param) + { + $this->label1->Text="Selected items:"; + $items = $param->getSelectedIndexes(); + + foreach($items as $index) + $this->label1->Text.=' '.$this->data[$index]; + } +} diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.page b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.page new file mode 100644 index 00000000..2e1d2f55 --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.page @@ -0,0 +1,32 @@ +<com:TContent ID="body"> +<h1>TJuiSortable Samples</h1> + +<com:TStyleSheet> + .ui-sortable { + list-style: none; + cursor: pointer; + } + + .ui-sortable li { + border: 1px solid transparent; + padding: 3px; + border-radius:3px; + } + + .ui-sortable li:hover { + background: lime; + border: 1px solid black; + } +</com:TStyleSheet> +<table class="sampletable"> + +<tr><td class="samplenote"> +Default options with a little css applied: +</td><td class="sampleaction"> + <com:TJuiSortable ID="repeater1" onSort="repeater1_onSort"/> + <com:TActiveLabel ID="label1" /> +</td></tr> + +</table> + +</com:TContent> diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.php b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.php new file mode 100644 index 00000000..4b3a0ff4 --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.php @@ -0,0 +1,31 @@ +<?php + +class Home extends TPage +{ + protected $data = array( + 'PRADO', + 'quickstart', + 'tutorial', + 'sample', + 'for the', + 'TJuiSortable', + 'control', + ); + + public function onLoad($param) + { + if(!$this->IsPostback) + { + $this->repeater1->DataSource=$this->data; + $this->repeater1->dataBind(); + } + } + + public function repeater1_onSort($sender, $param) + { + $this->label1->Text="Items order:"; + $order = $param->getOrder(); + foreach($order as $index) + $this->label1->Text.=' '.$this->data[$index]; + } +} diff --git a/demos/quickstart/protected/pages/JuiControls/Samples/config.xml b/demos/quickstart/protected/pages/JuiControls/Samples/config.xml new file mode 100644 index 00000000..315e42af --- /dev/null +++ b/demos/quickstart/protected/pages/JuiControls/Samples/config.xml @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- $Id: config.xml 1405 2006-09-10 01:03:56Z wei $ --> +<configuration> + <paths> + <using namespace="System.Web.UI.JuiControls.*" /> + </paths> + <pages MasterClass="SampleLayout" /> +</configuration>
\ No newline at end of file diff --git a/framework/Web/UI/JuiControls/TJuiDroppable.php b/framework/Web/UI/JuiControls/TJuiDroppable.php index 49fc1e96..6c07e49c 100644 --- a/framework/Web/UI/JuiControls/TJuiDroppable.php +++ b/framework/Web/UI/JuiControls/TJuiDroppable.php @@ -106,7 +106,7 @@ class TJuiDroppable extends TActivePanel implements IJuiOptions, ICallbackEventH /** * Raises the onDrop event. - * The drop parameters are encapsulated into a {@link TDropContainerEventParameter} + * The drop parameters are encapsulated into a {@link TJuiDroppableEventParameter} * * @param object $dropControlId */ @@ -150,8 +150,7 @@ class TJuiDroppable extends TActivePanel implements IJuiOptions, ICallbackEventH * TJuiDroppableEventParameter encapsulate the parameter * data for <b>OnDrop</b> event of TJuiDroppable components * - * @author Christophe BOULAIN (Christophe.Boulain@ceram.fr) - * @copyright Copyright © 2008, PradoSoft + * @author Fabio Bas <ctrlaltca[at]gmail[dot]com> * @license http://www.pradosoft.com/license * @package System.Web.UI.JuiControls */ diff --git a/framework/Web/UI/JuiControls/TJuiSelectable.php b/framework/Web/UI/JuiControls/TJuiSelectable.php index 6c020951..e895c1f8 100644 --- a/framework/Web/UI/JuiControls/TJuiSelectable.php +++ b/framework/Web/UI/JuiControls/TJuiSelectable.php @@ -31,7 +31,7 @@ Prado::using('System.Web.UI.JuiControls.TJuiControlAdapter'); * @package System.Web.UI.JuiControls * @since 3.3 */ -class TJuiSelectable extends TActivePanel implements IJuiOptions +class TJuiSelectable extends TActivePanel implements IJuiOptions, ICallbackEventHandler { /** * Creates a new callback control, sets the adapter to @@ -71,6 +71,7 @@ class TJuiSelectable extends TActivePanel implements IJuiOptions protected function getPostBackOptions() { $options = $this->getOptions()->toArray(); + $options['stop'] = new TJavaScriptLiteral('function( event, ui ) { var selected = new Array(); jQuery(\'#'.$this->getClientID().' .ui-selected\').each(function(idx, item){ selected.push(item.id) }); Prado.Callback('.TJavascript::encode($this->getUniqueID()).', { \'indexes\' : selected }) }'); return $options; } @@ -89,6 +90,43 @@ class TJuiSelectable extends TActivePanel implements IJuiOptions } /** + * Raises callback event. This method is required bu {@link ICallbackEventHandler} + * interface. + * It raises the {@link onSelectedIndexChanged onSelectedIndexChanged} event, then, the {@link onCallback OnCallback} event + * This method is mainly used by framework and control developers. + * @param TCallbackEventParameter the parameter associated with the callback event + */ + public function raiseCallbackEvent($param) + { + $this->onSelectedIndexChanged($param->getCallbackParameter()); + $this->onCallback($param); + } + + /** + * Raises the onSelect event. + * The selection parameters are encapsulated into a {@link TJuiSelectableEventParameter} + * + * @param object $params + */ + public function onSelectedIndexChanged($params) + { + $this->raiseEvent('onSelectedIndexChanged', $this, new TJuiSelectableEventParameter ($this->getResponse(), $params)); + + } + + /** + * This method is invoked when a callback is requested. The method raises + * 'OnCallback' event to fire up the event handlers. If you override this + * method, be sure to call the parent implementation so that the event + * handler can be invoked. + * @param TCallbackEventParameter event parameter to be passed to the event handlers + */ + public function onCallback($param) + { + $this->raiseEvent('OnCallback', $this, $param); + } + + /** * @var ITemplate template for repeater items */ private $_repeater=null; @@ -130,7 +168,7 @@ class TJuiSelectable extends TActivePanel implements IJuiOptions $repeater = Prado::createComponent('System.Web.UI.WebControls.TRepeater'); $repeater->setHeaderTemplate(new TJuiSelectableTemplate('<ul id="'.$this->getClientId().'_0'.'">')); $repeater->setFooterTemplate(new TJuiSelectableTemplate('</ul>')); - $repeater->setItemTemplate(new TTemplate('<li><%# $this->DataItem %></li>',null)); + $repeater->setItemTemplate(new TTemplate('<li id="<%# $this->ItemIndex %>"><%# $this->DataItem %></li>',null)); $repeater->setEmptyTemplate(new TJuiSelectableTemplate('<ul></ul>')); $this->getControls()->add($repeater); return $repeater; @@ -165,4 +203,19 @@ class TJuiSelectableTemplate extends TComponent implements ITemplate { $parent->getControls()->add($this->_template); } +} + +/** + * TJuiSelectableEventParameter class + * + * TJuiSelectableEventParameter encapsulate the parameter + * data for <b>OnSelectedIndexChanged</b> event of TJuiSelectable components + * + * @author Fabio Bas <ctrlaltca[at]gmail[dot]com> + * @license http://www.pradosoft.com/license + * @package System.Web.UI.JuiControls + */ +class TJuiSelectableEventParameter extends TCallbackEventParameter +{ + public function getSelectedIndexes() { return $this->getCallbackParameter()->indexes; } }
\ No newline at end of file diff --git a/framework/Web/UI/JuiControls/TJuiSortable.php b/framework/Web/UI/JuiControls/TJuiSortable.php index 87e4237e..557d62ba 100644 --- a/framework/Web/UI/JuiControls/TJuiSortable.php +++ b/framework/Web/UI/JuiControls/TJuiSortable.php @@ -28,7 +28,7 @@ Prado::using('System.Web.UI.JuiControls.TJuiControlAdapter'); * @package System.Web.UI.JuiControls * @since 3.3 */ -class TJuiSortable extends TActivePanel implements IJuiOptions +class TJuiSortable extends TActivePanel implements IJuiOptions, ICallbackEventHandler { /** * Creates a new callback control, sets the adapter to @@ -68,6 +68,7 @@ class TJuiSortable extends TActivePanel implements IJuiOptions protected function getPostBackOptions() { $options = $this->getOptions()->toArray(); + $options['stop'] = new TJavaScriptLiteral("function( event, ui ) { Prado.Callback(".TJavascript::encode($this->getUniqueID()).", { 'order' : jQuery(this).sortable('toArray') }) }"); return $options; } @@ -86,33 +87,70 @@ class TJuiSortable extends TActivePanel implements IJuiOptions } /** + * Raises callback event. This method is required bu {@link ICallbackEventHandler} + * interface. + * It raises the {@link onSort onSort} event, then, the {@link onCallback OnCallback} event + * This method is mainly used by framework and control developers. + * @param TCallbackEventParameter the parameter associated with the callback event + */ + public function raiseCallbackEvent($param) + { + $this->onSort($param->getCallbackParameter()); + $this->onCallback($param); + } + + /** + * Raises the onSort event. + * The order parameters are encapsulated into a {@link TJuiSortableEventParameter} + * + * @param object $params + */ + public function onSort($params) + { + $this->raiseEvent('onSort', $this, new TJuiSortableEventParameter ($this->getResponse(), $params)); + + } + + /** + * This method is invoked when a callback is requested. The method raises + * 'OnCallback' event to fire up the event handlers. If you override this + * method, be sure to call the parent implementation so that the event + * handler can be invoked. + * @param TCallbackEventParameter event parameter to be passed to the event handlers + */ + public function onCallback($param) + { + $this->raiseEvent('OnCallback', $this, $param); + } + + /** * @var ITemplate template for repeater items */ private $_repeater=null; /** - * @param array data source for Selectables. + * @param array data source for Sortables. */ public function setDataSource($data) { - $this->getSelectables()->setDataSource($data); + $this->getSortables()->setDataSource($data); } /** - * Overrides parent implementation. Callback {@link renderSelectables()} when + * Overrides parent implementation. Callback {@link renderSortables()} when * page's IsCallback property is true. */ public function dataBind() { parent::dataBind(); if($this->getPage()->getIsCallback()) - $this->renderSelectables($this->getResponse()->createHtmlWriter()); + $this->renderSortables($this->getResponse()->createHtmlWriter()); } /** * @return TRepeater suggestion list repeater */ - public function getSelectables() + public function getSortables() { if($this->_repeater===null) $this->_repeater = $this->createRepeater(); @@ -120,14 +158,14 @@ class TJuiSortable extends TActivePanel implements IJuiOptions } /** - * @return TRepeater new instance of TRepater to render the list of Selectables. + * @return TRepeater new instance of TRepater to render the list of Sortables. */ protected function createRepeater() { $repeater = Prado::createComponent('System.Web.UI.WebControls.TRepeater'); $repeater->setHeaderTemplate(new TJuiSortableTemplate('<ul id="'.$this->getClientId().'_0'.'">')); $repeater->setFooterTemplate(new TJuiSortableTemplate('</ul>')); - $repeater->setItemTemplate(new TTemplate('<li><%# $this->DataItem %></li>',null)); + $repeater->setItemTemplate(new TTemplate('<li id="<%# $this->ItemIndex %>"><%# $this->Data %></li>',null)); $repeater->setEmptyTemplate(new TJuiSortableTemplate('<ul></ul>')); $this->getControls()->add($repeater); return $repeater; @@ -162,4 +200,19 @@ class TJuiSortableTemplate extends TComponent implements ITemplate { $parent->getControls()->add($this->_template); } +} + +/** + * TJuiSortableEventParameter class + * + * TJuiSortableEventParameter encapsulate the parameter + * data for <b>OnSort</b> event of TJuiSortable components + * + * @author Fabio Bas <ctrlaltca[at]gmail[dot]com> + * @license http://www.pradosoft.com/license + * @package System.Web.UI.JuiControls + */ +class TJuiSortableEventParameter extends TCallbackEventParameter +{ + public function getOrder() { return $this->getCallbackParameter()->order; } }
\ No newline at end of file |