Added basic events for JuiControls, added quickstart demos

11 files changed, 305 insertions, 0 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