diff options
| author | wei <> | 2006-09-10 01:03:56 +0000 |
|---|---|---|
| committer | wei <> | 2006-09-10 01:03:56 +0000 |
| commit | f1f33db1f85c0893205a4a00c203d884dc1af1a5 (patch) | |
| tree | de0fd5a1b52572708209c98370c9061a19ec5193 /demos/quickstart/protected/pages/ActiveControls | |
| parent | fa760c403236b6fe7fdfd5785e2cd34764c24755 (diff) | |
Changed TCallbackEventParameter::Parameter to TCallbackEventParameter::CallbackParameter
Add TActiveButton and TActiveCheckBox quickstart docs.
Diffstat (limited to 'demos/quickstart/protected/pages/ActiveControls')
9 files changed, 342 insertions, 36 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 diff --git a/demos/quickstart/protected/pages/ActiveControls/ActiveCheckBox.page b/demos/quickstart/protected/pages/ActiveControls/ActiveCheckBox.page new file mode 100644 index 00000000..d66c48f5 --- /dev/null +++ b/demos/quickstart/protected/pages/ActiveControls/ActiveCheckBox.page @@ -0,0 +1,23 @@ +<com:TContent ID="body">
+<!-- $Id$ -->
+<h1>TActiveCheckBox</h1>
+<com:DocLink ClassPath="System.Web.UI.ActiveControls.TActiveCheckBox" />
+
+<p>
+<tt>TActiveCheckBox</tt> is the active control counter part to
+<a href="?page=Controls.CheckBox">TCheckbox</a>. The <tt>AutoPostBack</tt>
+ property of <tt>TActiveCheckBox</tt> is set to true by default.
+ Thus, when the checkbox is clicked the
+ <tt>OnCallback</tt> event is raise after the <tt>OnCheckedChanged</tt> event.
+ </p>
+
+ <p>
+ The <tt>Text</tt> and <tt>Checked</tt> properties of <tt>TActiveCheckBox</tt>
+ can be changed during a callback request. The <tt>TextAlign</tt> property
+ of <tt>TActiveCheckBox</tt> <strong>can not</strong> be changed during
+ a callback request.
+</p>
+
+<com:RunBar PagePath="ActiveControls.Samples.TActiveCheckBox.Home" />
+
+</com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/ActiveControls/Home.page b/demos/quickstart/protected/pages/ActiveControls/Home.page index e3f13640..9b9e3067 100644 --- a/demos/quickstart/protected/pages/ActiveControls/Home.page +++ b/demos/quickstart/protected/pages/ActiveControls/Home.page @@ -1,7 +1,22 @@ <com:TContent ID="body" >
-<h1>ActiveControls (AJAX)</h1>
-<p>Active Controls allows the browser to communicate with server
-without refreshing the current page.
+<!-- $Id$ -->
+<h1>Active Controls (AJAX enabled Controls)</h1>
+<p>See the <a href="?page=ActiveControls.Introduction">Introduction</a>
+for a quick overview of the concept behind active controls (AJAX enabled controls).
+Most active controls have a property of
+<a href="?page=ActiveControls.BaseActiveControl">ActiveControl</a> and
+a sub-property <a href="?page=ActiveControls.CallbackClientSide">ActiveControl.ClientSide</a>
+that provides many properties to customize the controls. The
+<a href="?page=TCallbackClientScript">CallbackClient</a> property of the
+<tt>TPage</tt> class provides many methods to update and alter the client-side content
+during a callback request. Active controls is reliant on a collection
+of <a href="?page=ActiveControl.ClientSideJavascript">javascript classes</a>.
+</p>
+
+<p>For a quick demo of active controls, try the <a href="?page=ActiveControls.ActiveButton">
+TActiveButton</a> control.</p>
+
+<p>* the tutorial for this control is not completed yet.</p>
<h2>Standard Active Controls</h2>
<ul>
@@ -17,60 +32,60 @@ without refreshing the current page. </li>
<li>
- <a href="?page=ActiveControls.ActiveCustomValidator">TActiveCustomValidator</a>
+ * <a href="?page=ActiveControls.ActiveCustomValidator">TActiveCustomValidator</a>
validates a particular control using a callback request.
</li>
<li>
- <a href="?page=ActiveControls.ActiveHyperLink">TActiveHyperLink</a>
+ * <a href="?page=ActiveControls.ActiveHyperLink">TActiveHyperLink</a>
represents a hyperlink on a Web page.
</li>
<li>
- <a href="?page=ActiveControls.ActiveImage">TActiveImage</a>
+ * <a href="?page=ActiveControls.ActiveImage">TActiveImage</a>
represents an image on a Web page.
</li>
<li>
- <a href="?page=ActiveControls.ActiveImageButton">TActiveImageButton</a>
+ * <a href="?page=ActiveControls.ActiveImageButton">TActiveImageButton</a>
represents a click button that has an image as the background.
It is can be used to trigger a callback request.
</li>
<li>
- <a href="?page=ActiveControls.ActiveLabel">TActiveLabel</a>
+ * <a href="?page=ActiveControls.ActiveLabel">TActiveLabel</a>
represents a label on a Web page.
The label can be customized via various CSS attributes.
</li>
<li>
- <a href="?page=ActiveControls.ActiveLinkButton">TActiveLinkButton</a>
+ * <a href="?page=ActiveControls.ActiveLinkButton">TActiveLinkButton</a>
represents a hyperlink that can perform a callback request.
</li>
<li>
- <a href="?page=ActiveControls.ActivePanel">TActivePanel</a>
+ * <a href="?page=ActiveControls.ActivePanel">TActivePanel</a>
represents a container for other controls on a Web page. In HTML,
it is displayed as a <div> element. The panel's contents
can be replaced during a callback request.
</li>
<li>
- <a href="?page=ActiveControls.ActiveRadioButton">TActiveRadioButton</a>
+ * <a href="?page=ActiveControls.ActiveRadioButton">TActiveRadioButton</a>
represents a radiobutton on a Web page.
It is mainly used in a group from which users make a choice. It can
be used to perform a callback request.
</li>
<li>
- <a href="?page=ActiveControls.ActiveTextBox">TActiveTextBox</a>
+ * <a href="?page=ActiveControls.ActiveTextBox">TActiveTextBox</a>
represents a text input field on a Web page.
It can collect single-line, multi-line or password text input from users.
It can be used to perform a callback request.
</li>
<li>
- <a href="?page=ActiveControls.CallbackOptions">TCallbackOptions</a>
+ * <a href="?page=ActiveControls.CallbackOptions">TCallbackOptions</a>
callback options such as <tt>OnLoading</tt/> client-side event handlers.
</li>
@@ -79,26 +94,26 @@ without refreshing the current page. <h2>Active List Controls</h2>
<ul>
<li>
- <a href="?page=ActiveControls.ActiveCheckBoxList">TActiveCheckBoxList</a>
+ * <a href="?page=ActiveControls.ActiveCheckBoxList">TActiveCheckBoxList</a>
displays a list of checkboxes on a Web page and each checkbox
can trigger a callback request.
</li>
<li>
- <a href="?page=ActiveControls.ActiveDropDownList">TActiveDropDownList</a>
+ * <a href="?page=ActiveControls.ActiveDropDownList">TActiveDropDownList</a>
displays a dropdown list box that allows users to select a
single option from a few prespecified ones. It can be used
to perform a callback request.
</li>
<li>
- <a href="?page=ActiveControls.ActiveListBox">TActiveListBox</a>
+ * <a href="?page=ActiveControls.ActiveListBox">TActiveListBox</a>
displays a list box that allows single or multiple selection. It can be used
to perform a callback request.
</li>
<li>
- <a href="?page=ActiveControls.ActiveRadioButtonList">TActiveRadioButtonList</a>
+ * <a href="?page=ActiveControls.ActiveRadioButtonList">TActiveRadioButtonList</a>
is similar to TActiveCheckBoxList in every aspect except that each
TActiveRadioButtonList displays a group of radiobuttons. Each radio button
can perform a callback request.
@@ -110,32 +125,32 @@ without refreshing the current page. <ul>
<li>
- <a href="?page=ActiveControls.AutoComplete">TAutoComplete</a>
+ * <a href="?page=ActiveControls.AutoComplete">TAutoComplete</a>
extends TActiveTextBox to offer text completion suggestions.
</li>
<li>
- <a href="?page=ActiveControls.Callback">TCallback</a>
+ * <a href="?page=ActiveControls.Callback">TCallback</a>
a generic control that can perform callback requests.
</li>
<li>
- <a href="?page=ActiveControls.EventTriggeredCallback">TEventTriggeredCallback</a>
+ * <a href="?page=ActiveControls.EventTriggeredCallback">TEventTriggeredCallback</a>
triggers a callback request based on HTML DOM events.
</li>
<li>
- <a href="?page=ActiveControls.InPlaceTextBox">TInPlaceTextBox</a>
+ * <a href="?page=ActiveControls.InPlaceTextBox">TInPlaceTextBox</a>
represents a label that can be edited by clicked.
</li>
<li>
- <a href="?page=ActiveControls.TimeTriggeredCallback">TTimeTriggeredCallback</a>
+ * <a href="?page=ActiveControls.TimeTriggeredCallback">TTimeTriggeredCallback</a>
triggers a callback request based on time elapsed.
</li>
<li>
- <a href="?page=ActiveControls.ValueTriggeredCallback">TValueTriggeredCallback</a>
+ * <a href="?page=ActiveControls.ValueTriggeredCallback">TValueTriggeredCallback</a>
monitors (using a timer) an attribute of an HTML element and triggers a callback request
when the attribute value changes.
</li>
@@ -291,48 +306,43 @@ without refreshing the current page. realize the active controls.</p>
<ul>
<li>
- <a href="?page=ActiveControls.ActiveControlAdapter">TActiveControlAdapter</a>
+ * <a href="?page=ActiveControls.ActiveControlAdapter">TActiveControlAdapter</a>
tracks the viewstate values of the control and update differences of the client-side HTML
element attributes.
</li>
<li>
- <a href="?page=ActiveControls.ActiveListControlAdapter">TActiveListControlAdapter</a>
+ * <a href="?page=ActiveControls.ActiveListControlAdapter">TActiveListControlAdapter</a>
allows the adapted list controls to change the selections on the client-side during
a callback request.
</li>
<li>
- <a href="?page=ActiveControls.ActivePageAdapter">TActivePageAdapter</a>
+ * <a href="?page=ActiveControls.ActivePageAdapter">TActivePageAdapter</a>
process the page life-cycle for callback requests.
</li>
<li>
- <a href="?page=ActiveControls.BaseActiveControl">TBaseActiveControl</a>
+ * <a href="?page=ActiveControls.BaseActiveControl">TBaseActiveControl</a>
common active control methods and options.
</li>
<li>
- <a href="?page=ActiveControls.CallbackClientScript">TCallbackClientScript</a>
+ * <a href="?page=ActiveControls.CallbackClientScript">TCallbackClientScript</a>
methods to manipulate the client-side HTML elements, also includes methods
to invoke javascript Effects on HTML elements.
</li>
<li>
- <a href="?page=ActiveControls.CallbackClientSide">TCallbackClientSide</a>
+ * <a href="?page=ActiveControls.CallbackClientSide">TCallbackClientSide</a>
common client-side callback request options, and client-side event handlers.
</li>
<li>
- <a href="?page=ActiveControls.CallbackResponseAdapter">TCallbackResponseAdapter</a>
+ * <a href="?page=ActiveControls.CallbackResponseAdapter">TCallbackResponseAdapter</a>
HTTP response for callback requests.
</li>
</ul>
-<p>
-<img src="<%~ postback-callback.png %>" class="figure" />
-</p>
-<p>
-<img src="<%~ TActiveButtonClass.png %>" class="figure"/>
-</p>
+
</com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/ActiveControls/Introduction.page b/demos/quickstart/protected/pages/ActiveControls/Introduction.page new file mode 100644 index 00000000..08edac33 --- /dev/null +++ b/demos/quickstart/protected/pages/ActiveControls/Introduction.page @@ -0,0 +1,8 @@ +<com:TContent ID="body">
+<!-- $Id$ -->
+<h1>Overview of Active Controls</h1>
+
+TODO:
+
+<img src=<%~ postback-callback.png %> class="figure" />
+</com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/ActiveControls/Samples/TActiveButton/Home.page b/demos/quickstart/protected/pages/ActiveControls/Samples/TActiveButton/Home.page new file mode 100644 index 00000000..259541a2 --- /dev/null +++ b/demos/quickstart/protected/pages/ActiveControls/Samples/TActiveButton/Home.page @@ -0,0 +1,49 @@ +<com:TContent ID="body">
+<!-- $Id$ -->
+<h1>TActiveButton Samples (AJAX)</h1>
+
+<table class="sampletable">
+
+<tr><td class="samplenote">
+A click button with <tt>OnClick</tt> event handler:
+</td><td class="sampleaction">
+<com:TActiveButton
+ Text="click me"
+ OnClick="buttonClicked" />
+</td></tr>
+
+<tr><td class="samplenote">
+A command button with <tt>OnCallback</tt>:
+</td><td class="sampleaction">
+<com:TActiveButton
+ Text="click me"
+ OnCommand="buttonClicked"
+ CommandName="test"
+ ActiveControl.CallbackParameter="value"
+ CommandParameter="value"
+ OnCallback="buttonCallback"
+ />
+</td></tr>
+
+<tr><td class="samplenote">
+A button causing validation with <tt>OnCallback</tt>:
+</td><td class="sampleaction">
+<com:TTextBox ID="TextBox" />
+<com:TRequiredFieldValidator
+ ControlToValidate="TextBox"
+ Display="Dynamic"
+ ErrorMessage="input required in the textbox"
+ ValidationGroup="Group"
+ />
+<com:TActiveButton
+ Text="submit"
+ OnClick="buttonClicked"
+ OnCallback="buttonCallback"
+ ValidationGroup="Group" />
+</td></tr>
+
+</table>
+
+<com:TJavascriptLogger />
+
+</com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/ActiveControls/Samples/TActiveButton/Home.php b/demos/quickstart/protected/pages/ActiveControls/Samples/TActiveButton/Home.php new file mode 100644 index 00000000..4a4e23ca --- /dev/null +++ b/demos/quickstart/protected/pages/ActiveControls/Samples/TActiveButton/Home.php @@ -0,0 +1,20 @@ +<?php
+
+// $Id$
+class Home extends TPage
+{
+ public function buttonClicked($sender, $param)
+ {
+ if($param instanceof TCommandEventParameter)
+ $sender->Text="Name: {$param->CommandName}, Param: {$param->CommandParameter}";
+ else
+ $sender->Text="I'm clicked";
+ }
+
+ public function buttonCallback($sender, $param)
+ {
+ $sender->Text .= ' using callback';
+ }
+}
+
+?>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/ActiveControls/Samples/TActiveCheckBox/Home.page b/demos/quickstart/protected/pages/ActiveControls/Samples/TActiveCheckBox/Home.page new file mode 100644 index 00000000..cbe58134 --- /dev/null +++ b/demos/quickstart/protected/pages/ActiveControls/Samples/TActiveCheckBox/Home.page @@ -0,0 +1,77 @@ +<com:TContent ID="body">
+<!-- $Id$ -->
+<h1>TActiveCheckBox Samples (AJAX)</h1>
+
+<table class="sampletable">
+
+<tr><td class="samplenote">
+An active checkbox with <tt>OnCallback</tt>:
+</td><td class="sampleaction">
+<com:TActiveCheckBox
+ AutoPostBack="true"
+ Text="click me"
+ OnCheckedChanged="checkboxClicked"
+ OnCallback="checkboxCallback"
+ />
+</td></tr>
+
+<tr><td class="samplenote">
+A checkbox causing validation on a textbox:
+</td><td class="sampleaction">
+<com:TTextBox ID="TextBox" />
+<com:TRequiredFieldValidator
+ ControlToValidate="TextBox"
+ Display="Dynamic"
+ ErrorMessage="input required in the textbox"
+ ValidationGroup="Group"
+ />
+<com:TActiveCheckBox
+ Text="submit"
+ ValidationGroup="Group"
+ OnCheckedChanged="checkboxClicked"
+ OnCallback="checkboxCallback"
+ />
+</td></tr>
+
+<tr><td class="samplenote">
+A checkbox validated by a required field validator:
+</td><td class="sampleaction">
+<com:TActiveCheckBox
+ ID="CheckBox"
+ Text="Consent"
+ AutoPostBack="false"
+ OnCheckedChanged="checkboxClicked"
+ ValidationGroup="Group2"
+ />
+<com:TActiveButton Text="Submit" ValidationGroup="Group2" />
+<com:TRequiredFieldValidator
+ ControlToValidate="CheckBox"
+ Display="Dynamic"
+ ErrorMessage="You must consent."
+ ValidationGroup="Group2"
+ />
+</td></tr>
+
+<tr><td class="samplenote">
+A checkbox validated by a required field validator:
+</td><td class="sampleaction">
+<com:TActiveCheckBox
+ ID="CheckBox2"
+ Text="Agree"
+ Checked="true"
+ OnCheckedChanged="checkboxClicked"
+ ValidationGroup="Group3"
+ />
+<com:TRequiredFieldValidator
+ ControlToValidate="CheckBox2"
+ Display="Dynamic"
+ ErrorMessage="You must agree."
+ ValidationGroup="Group3"
+ />
+</td></tr>
+
+</table>
+
+<com:TJavascriptLogger />
+
+</com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/ActiveControls/Samples/TActiveCheckBox/Home.php b/demos/quickstart/protected/pages/ActiveControls/Samples/TActiveCheckBox/Home.php new file mode 100644 index 00000000..f0543695 --- /dev/null +++ b/demos/quickstart/protected/pages/ActiveControls/Samples/TActiveCheckBox/Home.php @@ -0,0 +1,16 @@ +<?php
+// $Id$
+class Home extends TPage
+{
+ public function checkboxClicked($sender,$param)
+ {
+ $sender->Text= $sender->ClientID . " clicked";
+ }
+
+ public function checkboxCallback($sender, $param)
+ {
+ $sender->Text .= ' using callback';
+ }
+}
+
+?>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/ActiveControls/Samples/config.xml b/demos/quickstart/protected/pages/ActiveControls/Samples/config.xml new file mode 100644 index 00000000..d30f3ca6 --- /dev/null +++ b/demos/quickstart/protected/pages/ActiveControls/Samples/config.xml @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="utf-8"?>
+<!-- $Id$ -->
+<configuration>
+ <paths>
+ <using namespace="System.Web.UI.ActiveControls.*" />
+ </paths>
+ <pages MasterClass="SampleLayout" />
+</configuration>
\ No newline at end of file |