Quickstart documentation for Interactions

2 files changed, 131 insertions, 11 deletions

diff --git a/demos/quickstart/protected/pages/JuiControls/Home.page b/demos/quickstart/protected/pages/JuiControls/Home.page
index dee08dfe..bc087e73 100644
--- a/demos/quickstart/protected/pages/JuiControls/Home.page
+++ b/demos/quickstart/protected/pages/JuiControls/Home.page
@@ -1,39 +1,76 @@
 <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.
+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.
+</p>
+<h3>Options</h3>
+<p class="block-content">
+The <tt>Options</tt> property of PRADO Jui controls is used to pass options to the underlying javascript object. Each subproperty set on <tt>Options</tt> will be translated to a javascript property added to the object. The complete list of options available for each widget is availble at jQuery-UI's API Documentation.
 </p>
 
+<h4>Example</h4>
+<p class="block-content">
+jQuery-UI's <a href="http://jqueryui.com/resizable/">Resizable</a> adds an handle to a target element making it resizable. Its PRADO counterpart is <a href="?page=JuiControls.Interactions#TJuiResizable">TJuiResizable</a>. Resizable offers an <a href="http://api.jqueryui.com/resizable/#option-aspectRatio">aspectRatio</a> property to constrain the aspect ratio of the target element. The same property can be applied to TJuiResizable as a subproperty of the <tt>Options</tt> property:
+</p>
+<com:TTextHighlighter Language="php" CssClass="source block-content">
+  &lt;com:TJuiResizable
+    ID="resize1"
+    Options.aspectRatio="true"
+    // Additional options being set
+    Options.maxHeight="250"
+    Options.maxWidth="350"
+    Options.minHeight="150"
+    Options.minWidth="200"
+ /&gt;
+</com:TTextHighlighter>
+
+<h3>Events</h3>
+<p class="block-content">
+jQuery-UI widgets offers a lot of events that PRADO can hook up and trasmit to the serverside using a <a href="?page=ActiveControls.Introduction">callback request</a>. Event available for PRADO Jui controls inherits their names from their jQuery-UI counterparts, prefixed with "On".
+Jui controls doesn't make use of the AutoPostback property anymore, but only triggers a callback when an event handler is associated to the corresponding event.
+</p>
+
+<h4>Example</h4>
+<p class="block-content">
+jQuery's <a href="http://jqueryui.com/draggable/">Draggable</a> allows a target element to the moved using the mouse. Its PRADO counterpart is <a href="?page=JuiControls.Interactions#TJuiDraggable">TJuiDraggable</a>. Draggable exposes two useful events: <a href="http://api.jqueryui.com/draggable/#event-start">start</a> and <a href="http://api.jqueryui.com/draggable/#event-stop">stop</a>, that gets triggered respectively when the element starts to move and when the movement stops. TJuiDraggable exposes these same events:
+</p>
+<com:TTextHighlighter Language="php" CssClass="source block-content">
+  &lt;com:TJuiDraggable
+    ID="drag1"
+    OnStart="drag1_start"
+    OnStop="drag1_stop"
+ /&gt;
+</com:TTextHighlighter>
+
 <h2>PRADO Jui interactions controls</h2>
+<p class="block-content">
+Jui interactions adds basic mouse-based interactions to elements like moving, resizing or sorting. PRADO Jui interactions controls applies there interactions to a <a href="?page=ActiveControls.ActivePanel">TActivePanel</a>
+For informations of the specific options of each interaction, follow jQuery-UI Interaction <a href="http://api.jqueryui.com/category/interactions/">API Documentation</a> for the specific interaction.
+</p>
 <ul id="u1" class="block-content">
   <li>
-  <a href="?page=JuiControls.TJuiDraggable">TJuiDraggable</a>
+  <a href="?page=JuiControls.Interactions#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>
+  <a href="?page=JuiControls.Interactions#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>
+  <a href="?page=JuiControls.Interactions#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>
+  <a href="?page=JuiControls.Interactions#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>
+  <a href="?page=JuiControls.Interactions#TJuiSortable">TJuiSortable</a>
   displays a list of elements that can be selected individually.
-  <com:RunBar PagePath="JuiControls.Samples.TJuiSortable.Home" />
   </li>
 </ul>
 
diff --git a/demos/quickstart/protected/pages/JuiControls/Interactions.page b/demos/quickstart/protected/pages/JuiControls/Interactions.page
new file mode 100644
index 00000000..490daec6
--- /dev/null
+++ b/demos/quickstart/protected/pages/JuiControls/Interactions.page
@@ -0,0 +1,83 @@
+<com:TContent ID="body">
+<h1>Jui interactions controls</h1>
+<p class="block-content">
+Jui interactions adds basic mouse-based interactions to elements like moving, resizing or sorting. PRADO Jui interactions controls applies there interactions to a <a href="?page=ActiveControls.ActivePanel">TActivePanel</a>
+For informations of the specific options of each interaction, follow jQuery-UI Interaction <a href="http://api.jqueryui.com/category/interactions/">API Documentation</a> for the specific interaction.
+</p>
+
+<a name="TJuiDraggable"></a>
+<h2>TJuiDraggable</h2>
+<com:DocLink ClassPath="System.Web.UI.JuiControls.TJuiDraggable" /> - <a href="http://api.jqueryui.com/draggable/">jQuery UI API</a>
+
+<p class="block-content">
+<tt>TJuiDraggable</tt> is an extension to <a href="?page=ActiveControls.ActivePanel">TActivePanel</a> based on jQuery-UI's <a href="http://jqueryui.com/draggable/">Draggable</a> interaction.
+</p>
+
+<p class="block-content">
+The panel can be moved using the mouse, and eventually dropped over a <a href="?page=JuiControls.Interactions#TJuiDroppable">TJuiDroppable</a>.
+</p>
+
+<com:RunBar PagePath="JuiControls.Samples.TJuiDraggable.Home" />
+<br/>
+
+
+<a name="TJuiDroppable"></a>
+<h2>TJuiDroppable</h2>
+<com:DocLink ClassPath="System.Web.UI.JuiControls.TJuiDroppable" /> - <a href="http://api.jqueryui.com/droppable/">jQuery UI API</a>
+
+<p class="block-content">
+<tt>TJuiDroppable</tt> is an extension to <a href="?page=ActiveControls.ActivePanel">TActivePanel</a> based on jQuery-UI's <a href="http://jqueryui.com/draggable/">Draggable</a> interaction.
+</p>
+
+<p class="block-content">
+When a <a href="?page=JuiControls.Interactions#TJuiDroppable">TJuiDraggable</a> is dropped over a <tt>TJuiDroppable panel</tt>, the <tt>OnDrop</tt> event will be triggered. The event hanler will receive a <tt>TJuiEventParameter</tt> object containing a reference to the dropped control in the <tt>DraggableControl</tt> property.
+</p>
+
+<com:RunBar PagePath="JuiControls.Samples.TJuiDroppable.Home" />
+<br/>
+
+<a name="TJuiResizable"></a>
+<h2>TJuiResizable</h2>
+<com:DocLink ClassPath="System.Web.UI.JuiControls.TJuiResizable" /> - <a href="http://api.jqueryui.com/resizable/">jQuery UI API</a>
+<p class="block-content">
+<tt>TJuiResizable</tt> is an extension to <a href="?page=ActiveControls.ActivePanel">TActivePanel</a> based on jQuery-UI's <a href="http://jqueryui.com/resizable/">Resizable</a> interaction.
+</p>
+
+<p class="block-content">
+A small handle is shown on the bottom right corner of the panel, that permits the panel to be resized using the mouse.
+</p>
+
+<com:RunBar PagePath="JuiControls.Samples.TJuiResizable.Home" />
+<br/>
+
+
+<a name="TJuiSelectable"></a>
+<h2>TJuiSelectable</h2>
+<com:DocLink ClassPath="System.Web.UI.JuiControls.TJuiSelectable" /> - <a href="http://api.jqueryui.com/selectable/">jQuery UI API</a>
+<p class="block-content">
+<tt>TJuiSelectable</tt> is an extension to <a href="?page=ActiveControls.ActivePanel">TActivePanel</a> based on jQuery-UI's <a href="http://jqueryui.com/selectable/">Selectable</a> interaction.
+</p>
+
+<p class="block-content">
+<tt>TJuiSelectable</tt> can be feed a <tt>DataSource</tt> and will interally render a <a href="?page=Controls.Repeater">TRepeater</a> that displays items in an unordered list. Items can be selected by clicking on them, individually or in a group.
+</p>
+
+<com:RunBar PagePath="JuiControls.Samples.TJuiSelectable.Home" />
+<br/>
+
+
+<a name="TJuiSortable"></a>
+<h2>TJuiSortable</h2>
+<com:DocLink ClassPath="System.Web.UI.JuiControls.TJuiSortable" /> - <a href="http://api.jqueryui.com/sortable/">jQuery UI API</a>
+<p class="block-content">
+<tt>TJuiSortable</tt> is an extension to <a href="?page=ActiveControls.ActivePanel">TActivePanel</a> based on jQuery-UI's <a href="http://jqueryui.com/sortable/">Sortable</a> interaction.
+</p>
+
+<p class="block-content">
+<tt>TJuiSortable</tt> can be feed a <tt>DataSource</tt> and will interally render a <a href="?page=Controls.Repeater">TRepeater</a> that displays items in an unordered list. Items can be sortered dragging and dropping them.
+</p>
+
+<com:RunBar PagePath="JuiControls.Samples.TJuiSortable.Home" />
+<br/>
+
+</com:TContent>