From 53ef46637f49ba745bb43c891cae593454502979 Mon Sep 17 00:00:00 2001 From: Fabio Bas Date: Wed, 15 Jan 2014 00:24:58 +0100 Subject: Added basic events for JuiControls, added quickstart demos --- demos/quickstart/protected/controls/TopicList.tpl | 1 + .../protected/pages/JuiControls/Home.page | 49 +++++++++++++++ .../JuiControls/Samples/TJuiDraggable/Home.page | 25 ++++++++ .../JuiControls/Samples/TJuiDroppable/Home.page | 48 +++++++++++++++ .../JuiControls/Samples/TJuiDroppable/Home.php | 16 +++++ .../JuiControls/Samples/TJuiResizable/Home.page | 25 ++++++++ .../JuiControls/Samples/TJuiSelectable/Home.page | 38 ++++++++++++ .../JuiControls/Samples/TJuiSelectable/Home.php | 32 ++++++++++ .../JuiControls/Samples/TJuiSortable/Home.page | 32 ++++++++++ .../JuiControls/Samples/TJuiSortable/Home.php | 31 ++++++++++ .../protected/pages/JuiControls/Samples/config.xml | 8 +++ framework/Web/UI/JuiControls/TJuiDroppable.php | 5 +- framework/Web/UI/JuiControls/TJuiSelectable.php | 57 +++++++++++++++++- framework/Web/UI/JuiControls/TJuiSortable.php | 69 +++++++++++++++++++--- 14 files changed, 423 insertions(+), 13 deletions(-) create mode 100644 demos/quickstart/protected/pages/JuiControls/Home.page create mode 100644 demos/quickstart/protected/pages/JuiControls/Samples/TJuiDraggable/Home.page create mode 100644 demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.page create mode 100644 demos/quickstart/protected/pages/JuiControls/Samples/TJuiDroppable/Home.php create mode 100644 demos/quickstart/protected/pages/JuiControls/Samples/TJuiResizable/Home.page create mode 100644 demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.page create mode 100644 demos/quickstart/protected/pages/JuiControls/Samples/TJuiSelectable/Home.php create mode 100644 demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.page create mode 100644 demos/quickstart/protected/pages/JuiControls/Samples/TJuiSortable/Home.php create mode 100644 demos/quickstart/protected/pages/JuiControls/Samples/config.xml 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 @@
  • Data Controls
  • AJAX: Introduction
  • Active Controls (AJAX)
    • +
  • Jui Controls (jQuery UI)
  • Writing New Controls
    • 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 @@ + +

    Jui Controls (jQuery UI)

    +

    +Jui controls are the PRADO port of the standard jQuery UI widgets. They can be used as standard Active Controls, but will automatically load the needed jQuery UI javascript libraries. Jui controls have a Options property used to pass options to the underlying javascript object. For informations of the specific options of each widget, follow the API Documentation for the specific widget. +

    + +

    PRADO Jui interactions controls

    + + +

    PRADO Jui controls

    + + +     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 @@ + +

    TJuiDraggable Samples

    + + + .ui-draggable { + width: 100px; + height:100px; + background-color: lime; + border: 1px solid black; + padding: 1em; + } + + + + + +
    +Default options with a little css applied: + + + Drag me around + +
    + +     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 @@ + +

    TJuiDraggable Samples

    + + + .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; + } + + + + + +
    +Default options with a little css applied: + + + Drag me around + + + + Drop it here! +
    +     + + + Drop it here! +
    +     +
    + +     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 @@ +getDroppedControl()->ID; + $this->label1->Text="Dropped ".$draggable." at:
    Top=".$param->getOffsetTop()." Left=".$param->getOffsetLeft(); + } + + public function drop2_ondrop($sender, $param) + { + $draggable=$param->getDroppedControl()->ID; + $this->label2->Text="Dropped ".$draggable." at:
    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 @@ + +

    TJuiResizable Samples

    + + + .resizable { + width: 150px; + height: 150px; + padding: 0.5em; + background: #fff; + border: 1px solid #000; + } + + + + + +
    +Default options with a little css applied: + + + Resize me! + +
    + +     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 @@ + +

    TJuiSelectable Samples

    + + + .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; + } + + + + + +
    +Default options with a little css applied: + + + +
    + +     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 @@ +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 @@ + +

    TJuiSortable Samples

    + + + .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; + } + + + + + +
    +Default options with a little css applied: + + + +
    + +     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 @@ +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 @@ + + + + + + + + \ 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 OnDrop event of TJuiDroppable components * - * @author Christophe BOULAIN (Christophe.Boulain@ceram.fr) - * @copyright Copyright © 2008, PradoSoft + * @author Fabio Bas * @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; } @@ -88,6 +89,43 @@ class TJuiSelectable extends TActivePanel implements IJuiOptions $cs->registerEndScript(sprintf('%08X', crc32($code)), $code); } + /** + * 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 */ @@ -130,7 +168,7 @@ class TJuiSelectable extends TActivePanel implements IJuiOptions $repeater = Prado::createComponent('System.Web.UI.WebControls.TRepeater'); $repeater->setHeaderTemplate(new TJuiSelectableTemplate('')); - $repeater->setItemTemplate(new TTemplate('
  • <%# $this->DataItem %>
    • ',null)); + $repeater->setItemTemplate(new TTemplate('
  • <%# $this->DataItem %>
    • ',null)); $repeater->setEmptyTemplate(new TJuiSelectableTemplate('')); $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 OnSelectedIndexChanged event of TJuiSelectable components + * + * @author Fabio Bas + * @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; } @@ -85,34 +86,71 @@ class TJuiSortable extends TActivePanel implements IJuiOptions $cs->registerEndScript(sprintf('%08X', crc32($code)), $code); } + /** + * 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('
      ')); $repeater->setFooterTemplate(new TJuiSortableTemplate('
    ')); - $repeater->setItemTemplate(new TTemplate('
  • <%# $this->DataItem %>
    • ',null)); + $repeater->setItemTemplate(new TTemplate('
  • <%# $this->Data %>
    • ',null)); $repeater->setEmptyTemplate(new TJuiSortableTemplate('
      ')); $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 OnSort event of TJuiSortable components + * + * @author Fabio Bas + * @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 -- cgit v1.2.3