diff options
Diffstat (limited to 'demos/quickstart/protected/pages/ActiveControls/ActiveButton.page')
| -rw-r--r-- | demos/quickstart/protected/pages/ActiveControls/ActiveButton.page | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/demos/quickstart/protected/pages/ActiveControls/ActiveButton.page b/demos/quickstart/protected/pages/ActiveControls/ActiveButton.page new file mode 100644 index 00000000..7bbe05ea --- /dev/null +++ b/demos/quickstart/protected/pages/ActiveControls/ActiveButton.page @@ -0,0 +1,95 @@ +<com:TContent ID="body">
+<!-- $Id$ -->
+<h1>TActiveButton</h1>
+<com:DocLink ClassPath="System.Web.UI.ActiveControls.TActiveButton" />
+
+<p><tt>TActiveButton</tt> is the active control counter part to
+<a href="?page=Controls.Button">TButton</a>.
+When a <tt>TActiveButton</tt> is clicked, rather than a normal post back request a
+callback request is initiated. The <tt>OnCallback</tt> event is raised
+during a callback request and it is raise <strong>after</strong>
+the <tt>OnClick</tt> event.
+</p>
+
+<p>When the <tt>ActiveControl.EnableUpdate</tt> property is true,
+changing the <tt>Text</tt> property during a callback request will update
+the button's caption on the client-side.</p>
+
+<p>Since the <tt>OnCallback</tt> event is raised only during a callback request,
+the <tt>OnCallback</tt> event handler can be used to handle logic specifically
+related to callback requests. The <tt>OnClick</tt> event handler is raised
+when ever the button is clicked, even if javascript is disabled.</p>
+
+<p>The following example the use of both the <tt>OnClick</tt> and <tt>OnCallback</tt>
+events of an <tt>TActiveButton</tt>.</p>
+
+<com:RunBar PagePath="ActiveControls.Samples.TActiveButton.Home" />
+
+<h2>TActiveButton Class Diagram</h2>
+<p>The class diagram for <tt>TActiveButton</tt> is illustrated in the figure below.
+Most active control that can perform callback request have a similar structure.
+</p>
+
+<img src=<%~ TActiveButtonClass.png %> class="figure"
+ alt="TActiveButton class diagram" title="TActiveButton class diagram" />
+
+<p><tt>TActiveButton</tt> is an extension of <a href="?page=Controls.Button">TButton</a>
+and implements two additional interfaces <tt>ICallbackEventHandler</tt> and
+<tt>IActiveControl</tt>. The <tt>TActiveButton</tt> contains an instance of
+<a href="?page=ActiveControls.BaseActiveControl">TBaseActiveCallbackControl</a>
+available through the <tt>ActiveControl</tt> property of <tt>TActiveButton</tt>.
+The following example set the callback parameter of the <tt>TActiveButton</tt> when
+a callback request is dispatched.
+</p>
+<com:TTextHighlighter Language="prado" CssClass="source">
+<com:TActiveButton
+ Text="Click Me"
+ OnCallback="button_callback"
+ ActiveControl.CallbackParameter="value" />
+</com:TTextHighlighter>
+<p>In the <tt>OnCallback</tt> event handler method, the <tt>CallbackParameter</tt>
+is available in the <tt>$param</tt> object.</p>
+<com:TTextHighlighter Language="php" CssClass="source">
+public function button_callback($sender, $param)
+{
+ echo $param->CallbackParameter; //outputs "value"
+}
+</com:TTextHighlighter>
+
+<h2>Adding Client Side Behaviour</h2>
+
+<p>With in the <tt>ActiveControl</tt> property is an instance of
+<a href="?page=ActiveControls.CallbackClientSide">TCallbackClientSide</a> available
+as a property <tt>ClientSide</tt> of <tt>ActiveControl</tt> or similarly
+as a sub-property <tt>ActiveControl.ClientSide</tt> of <tt>TActiveButton</tt>.
+The <tt>ClientSide</tt> property contains sub-properties, such as <tt>RequestTimeOut</tt>,
+and client-side javascript event handler, such as <tt>OnLoading</tt>,
+that are used by the client-side when making a callback request.
+The following example demonstrates the toggling of a "loading" indicator
+when the client-side is making a callback request.
+</p>
+
+<com:TTextHighlighter Language="prado" CssClass="source">
+<com:TClientSide PradoScripts="effects" />
+<span id="callback_status">Loading...</span>
+
+<com:TActiveButton
+ Text="Click Me"
+ OnCallback="button_callback"
+ ActiveControl.CallbackParameter="value" >
+ <prop:ActiveControl.ClientSide
+ OnLoading="Element.show('callback_status')"
+ OnComplete="Element.hide('callback_status')" />
+</com:TActiveButton>
+</com:TTextHighlighter>
+
+<p>The example loads the "effects" javascript library using the
+<a href="?page=Controls.ClientScript">TClientScript</a> component.
+The <tt>ActiveControl.ClientSide.OnLoading</tt> property value contains
+javascript statement that uses the "effects" library to show the "Loading..."
+span tag. Similarly, <tt>ActiveControl.ClientSide.OnComplete</tt> property
+value contains the javascript statement that hides the "Loading..." span tag.
+See <a href="?page=ActiveControls.CallbackClientSide">TCallbackClientSide</a> for
+further details on client-side property details.
+</p>
+</com:TContent>
\ No newline at end of file |