diff options
| author | ctrlaltca@gmail.com <> | 2011-06-02 16:03:13 +0000 |
|---|---|---|
| committer | ctrlaltca@gmail.com <> | 2011-06-02 16:03:13 +0000 |
| commit | 6818eb71061580a636831b8e6c0ba8aca2c3420b (patch) | |
| tree | 696ad78fbf4607f50b570e835e55859f3b3a5d04 /demos | |
| parent | ffc9318788952a879815cfa01a8b17b7ddae89b1 (diff) | |
documentation galore: TCallbackClientSide, TCallbackOptions and TCallbackClientScript
Diffstat (limited to 'demos')
10 files changed, 411 insertions, 8 deletions
diff --git a/demos/quickstart/protected/pages/ActiveControls/CallbackClientScript.page b/demos/quickstart/protected/pages/ActiveControls/CallbackClientScript.page new file mode 100644 index 00000000..7ffd2db9 --- /dev/null +++ b/demos/quickstart/protected/pages/ActiveControls/CallbackClientScript.page @@ -0,0 +1,30 @@ +<com:TContent ID="body" >
+
+<h1>TCallbackClientScript</h1>
+<com:DocLink ClassPath="System.Web.UI.ActiveControls.TCallbackClientScript" />
+
+<p class="block-content">
+The <tt>TCallbackClientScript</tt> class provides corresponding methods that can be
+executed on the client-side (i.e. the browser client that is viewing
+the page) during a callback response.
+For a complete list of available client side methods, consult the
+<com:DocLink ClassPath="System.Web.UI.ActiveControls.TCallbackClientScript" />
+</p>
+
+<p class="block-content">
+The available methods includes setting/clicking input elements, changing Css
+styles, hiding/showing elements, and adding visual effects to elements on the
+page. The client-side methods can be access through the <tt>CallbackClient</tt>
+property available in <tt>TPage</tt>.
+</p>
+
+<p class="block-content">
+For example, to hide "$myTextBox" element during callback response, do:
+</p>
+<com:TTextHighlighter Language="prado" CssClass="source block-content">
+$this->getPage()->getCallbackClient()->hide($myTextBox);
+</com:TTextHighlighter>
+
+<com:RunBar PagePath="ActiveControls.Samples.TCallbackClientScript.Home" />
+
+<div class="last-modified">$Id: CallbackClientSide.page -1 $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/ActiveControls/CallbackClientSide.page b/demos/quickstart/protected/pages/ActiveControls/CallbackClientSide.page new file mode 100644 index 00000000..c8e52585 --- /dev/null +++ b/demos/quickstart/protected/pages/ActiveControls/CallbackClientSide.page @@ -0,0 +1,79 @@ +<com:TContent ID="body" >
+
+<h1>TCallbackClientSide</h1>
+<com:DocLink ClassPath="System.Web.UI.ActiveControls.TCallbackClientSide" />
+
+<p class="block-content">
+<tt>TCallbackClientSide</tt> is used to specify client-side callback request options and client-side event handlers.
+Each active control that inherits from <tt>TActiveBaseCallbackControl</tt> has a ClientSide property.
+The ClientSide property is an instance <tt>TCallbackClientSide</tt> containing the actual options and event handlers
+that are used by the client-side when that control is 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 block-content">
+<com:TClientScript PradoScripts="effects" />
+<span id="callback_status">Loading...</span>
+
+<com:TActiveButton
+ Text="Click Me"
+ OnCallback="button_callback"
+ ActiveControl.CallbackParameter="value" >
+ <prop:ClientSide
+ OnLoading="Element.show('callback_status')"
+ OnComplete="Element.hide('callback_status')" />
+</com:TActiveButton>
+</com:TTextHighlighter>
+
+<h3>Events</h3>
+
+<p class="block-content">
+The following client side events are executing in order if the callback
+request and response are send and received successfuly.
+</p>
+
+<ul>
+ <li><tt>onPreDispatch</tt>: executed before a request is dispatched;</li>
+ <li><tt>onUninitialized</tt>: executed when callback request is uninitialized;</li>
+ <li><tt>onLoading</tt>* : executed when callback request is initiated;</li>
+ <li><tt>onLoaded</tt>* : executed when callback request begins;</li>
+ <li><tt>onInteractive</tt>: executed when callback request is in progress;</li>
+ <li><tt>onComplete</tt>: executed when callback response returns;</li>
+ <li><tt>onSuccess</tt> executed when callback request returns and is successful;</li>
+ <li><tt>onFailure</tt> executed when callback request fails (only for communication errors);</li>
+ <li><tt>onException</tt> raised when callback request fails due to request/response errors.</li>
+</ul>
+
+<p class="block-content">
+* Note that theses 2 events are not fired correctly by Opera. To make
+ them work in this browser, Prado will fire them just after <tt>onPreDispatch</tt>.
+</p>
+
+<p class="block-content">
+In a general way, onUninitialized, onLoading, onLoaded and onInteractive events
+are not implemented consistently in all browsers. When cross browser compatibility is
+needed, it is best to avoid use them.
+<br/>The OnSuccess and OnFailure events are raised when the
+response is returned. A successful request/response will raise
+OnSuccess event otherwise OnFailure will be raised.
+</p>
+
+<h3>Properties</h3>
+
+<p class="block-content">
+The following properties can be used to change the way the callback request is performed.
+</p>
+
+<ul>
+ <li><tt>PostState</tt>: true to collect the form inputs and post them during callback (default: true);</li>
+ <li><tt>RequestTimeOut</tt> The request timeout in milliseconds (default: 30000, i.e. 30 seconds);</li>
+ <li><tt>HasPriority</tt> true to ensure that the callback request will be sent
+ immediately and will abort existing prioritized requests. It does not affect
+ callbacks that are not prioritized (default: true);</li>
+ <li><tt>EnablePageStateUpdate</tt> enable the callback response to enable the
+ viewstate update. This will automatically set HasPriority to true when enabled. (default: true).</li>
+</ul>
+
+<com:RunBar PagePath="ActiveControls.Samples.TCallbackClientSide.Home" />
+
+<div class="last-modified">$Id$</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/ActiveControls/CallbackOptions.page b/demos/quickstart/protected/pages/ActiveControls/CallbackOptions.page new file mode 100644 index 00000000..184c116c --- /dev/null +++ b/demos/quickstart/protected/pages/ActiveControls/CallbackOptions.page @@ -0,0 +1,52 @@ +<com:TContent ID="body" >
+
+<h1 id="154012">TCallbackOptions</h1>
+<com:DocLink ClassPath="System.Web.UI.ActiveControls.TCallbackOptions" />
+
+<p class="block-content">
+<tt>TCallbackOptions</tt> allows a common set of callback client-side options
+to be attached to one or more active controls.
+This can be useful if a lot of active controls on the same page are sharing the same callback client-side options.
+Instead of specifying the same set of options again and again inside each control, these can be written once
+inside a <tt>TCallbackOptions</tt>; this <tt>TCallbackOptions</tt> can be then attached to each control using the
+<tt>ActiveControl.CallbackOptions</tt> property. For a full list of assignable properties, please check the
+<a href="?page=ActiveControls.CallbackClientSide">TCallbackClientSide</a> documentation.
+</p>
+
+<p class="block-content">
+The typical scenario of use for a <tt>TCallbackOptions</tt> is a page where a lot of active controls needs to
+pause the user interaction with a "Please wait" style message until callback completion.
+First create a single <tt>TCallbackOptions</tt> control, assign it an ID and the the needed properties:
+</p>
+
+<com:TTextHighlighter Language="text" CssClass="source block-content" >
+<com:TCallbackOptions
+ ID="MyOptions"
+ ClientSide.OnLoading="... kindly inform the user that he should wait ..."
+ ClientSide.OnComplete="... callback completed, ready to serve the user again ..."
+/>
+</com:TTextHighlighter>
+
+<p class="block-content">
+Then, share this set of options to one or more active controls; each control will follow them:
+</p>
+
+<com:TTextHighlighter Language="text" CssClass="source block-content" >
+<com:TActiveButton
+ Text="simple button"
+ OnCallback="..."
+ ActiveControl.CallbackOptions="MyOptions"
+ ...
+/>
+
+<com:TActiveCheckBox
+ Text="simple checkbox"
+ OnCallback="..."
+ ActiveControl.CallbackOptions="MyOptions"
+ ...
+/>
+</com:TTextHighlighter>
+
+<com:RunBar PagePath="ActiveControls.Samples.TCallbackOptions.Home" />
+
+<div class="last-modified">$Id$</div></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 a658aa16..7834cc1d 100644 --- a/demos/quickstart/protected/pages/ActiveControls/Home.page +++ b/demos/quickstart/protected/pages/ActiveControls/Home.page @@ -97,11 +97,6 @@ TActiveButton</a> control. See also the later part of the <a href="?page=Tutoria It can be used to perform a callback request.
</li>
- <li>
- * <a href="?page=ActiveControls.CallbackOptions">TCallbackOptions</a>
- callback options such as <tt>OnLoading</tt> client-side event handlers.
- </li>
-
</ul>
<h2 id="128033">Active List Controls</h2>
@@ -387,14 +382,19 @@ realize the active controls.</p> </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>
- common client-side callback request options, and client-side event handlers.
+ <a href="?page=ActiveControls.CallbackClientSide">TCallbackClientSide</a>
+ is used to specify client-side callback request options and client-side event handlers.
+ </li>
+
+ <li>
+ <a href="?page=ActiveControls.CallbackOptions">TCallbackOptions</a>
+ allows a common set of callback client-side options to be attached to one or more active controls.
</li>
<li>
diff --git a/demos/quickstart/protected/pages/ActiveControls/Samples/TCallbackClientScript/Home.page b/demos/quickstart/protected/pages/ActiveControls/Samples/TCallbackClientScript/Home.page new file mode 100644 index 00000000..49baa47c --- /dev/null +++ b/demos/quickstart/protected/pages/ActiveControls/Samples/TCallbackClientScript/Home.page @@ -0,0 +1,39 @@ +<com:TContent ID="body">
+<h1>TCallbackClientScript Samples</h1>
+
+<p>
+ Choose an action from the list and click the button; the server-side php code will get the selected value and
+ force the execution of some clientside js code in the callback response.
+</p>
+
+<h2>Actions</h2>
+<com:TRadioButtonList ID="radio1">
+ <com:TListItem Value="1" Text="alert() me of something" />
+ <com:TListItem Value="2" Text="toggle Checkbox 1" />
+ <com:TListItem Value="3" Text="hide Label 1" />
+ <com:TListItem Value="4" Text="show Label 1" />
+ <com:TListItem Value="5" Text="focus TextBox 1" />
+</com:TRadioButtonList>
+
+<br/><com:TActiveButton ID="button1" OnCallback="buttonCallback" Text="callback!" />
+
+<h2>Results</h2>
+
+<table>
+ <tr>
+ <td>Checkbox 1:</td>
+ <td><com:TCheckBox ID="check1" Text="Checkbox 1" /></td>
+ </tr>
+ <tr>
+ <td>Label 1:</td>
+ <td><com:TLabel ID="label1" ForeColor="Red" Text="Text of Label 1" /></td>
+ </tr>
+ <tr>
+ <td>TextBox 1:</td>
+ <td><com:TTextBox ID="txt1" Text="Sample text" /></td>
+ </tr>
+</table>
+
+<com:TJavascriptLogger />
+
+<div class="last-modified">$Id: Home.page -1 $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/ActiveControls/Samples/TCallbackClientScript/Home.php b/demos/quickstart/protected/pages/ActiveControls/Samples/TCallbackClientScript/Home.php new file mode 100644 index 00000000..500d7987 --- /dev/null +++ b/demos/quickstart/protected/pages/ActiveControls/Samples/TCallbackClientScript/Home.php @@ -0,0 +1,29 @@ +<?php
+
+// $Id: Home.php -1 $
+class Home extends TPage
+{
+ public function buttonCallback ($sender, $param)
+ {
+ switch($this->radio1->SelectedValue)
+ {
+ case 1:
+ $this->getCallbackClient()->evaluateScript("<script> alert('something'); </script>");
+ break;
+ case 2:
+ $this->getCallbackClient()->check($this->check1, !$this->check1->Checked);
+ break;
+ case 3:
+ $this->getCallbackClient()->hide($this->label1);
+ break;
+ case 4:
+ $this->getCallbackClient()->show($this->label1);
+ break;
+ case 5:
+ $this->getCallbackClient()->focus($this->txt1);
+ break;
+ }
+ }
+}
+
+?>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/ActiveControls/Samples/TCallbackClientSide/Home.page b/demos/quickstart/protected/pages/ActiveControls/Samples/TCallbackClientSide/Home.page new file mode 100644 index 00000000..4540dd91 --- /dev/null +++ b/demos/quickstart/protected/pages/ActiveControls/Samples/TCallbackClientSide/Home.page @@ -0,0 +1,73 @@ +<com:TContent ID="body">
+<h1>TCallbackClientSide Samples</h1>
+
+<table class="sampletable">
+
+<tr><td class="samplenote">
+A callback button with attached client side options:
+</td><td class="sampleaction">
+<com:TActiveButton
+ Text="click me"
+ OnCallback="buttonCallback"
+>
+ <prop:ClientSide
+ OnLoading="$('callback_status2').hide(); new Effect.BlindDown('callback_status', { duration: 1 });"
+ OnComplete="new Effect.BlindUp('callback_status', { duration: 1 }); $('callback_status2').show();"
+ />
+</com:TActiveButton>
+<div id="callback_status" style="display:none;">please wait 5 seconds for the callback to complete...</div>
+<div id="callback_status2" style="display:none;">callback completed!</div>
+</td></tr>
+
+<tr><td class="samplenote">
+A callback button logging all callback events (5 seconds delay):
+</td><td class="sampleaction">
+<com:TActiveButton
+ Text="click me"
+ OnCallback="buttonCallback"
+>
+ <prop:ClientSide
+ onPreDispatch = "new Insertion.Bottom('<%= $this->label1->ClientID %>', '<br/>onPreDispatch');"
+ onUninitialized = "new Insertion.Bottom('<%= $this->label1->ClientID %>', '<br/>onUninitialized');"
+ onLoading = "new Insertion.Bottom('<%= $this->label1->ClientID %>', '<br/>onLoading');"
+ onLoaded = "new Insertion.Bottom('<%= $this->label1->ClientID %>', '<br/>onLoaded');"
+ onInteractive = "new Insertion.Bottom('<%= $this->label1->ClientID %>', '<br/>onInteractive');"
+ onComplete = "new Insertion.Bottom('<%= $this->label1->ClientID %>', '<br/>onComplete');"
+ onSuccess = "new Insertion.Bottom('<%= $this->label1->ClientID %>', '<br/>onSuccess');"
+ onFailure = "new Insertion.Bottom('<%= $this->label1->ClientID %>', '<br/>onFailure');"
+ onException = "new Insertion.Bottom('<%= $this->label1->ClientID %>', '<br/>onException');"
+ />
+</com:TActiveButton>
+<br/><com:TLabel ID="label1" ForeColor="Red" Text="waiting for button click.." />
+</td></tr>
+
+<tr><td class="samplenote">
+A callback with RequestTimeout="3000" (3 seconds). Since the callback will take 5 seconds to complete, the clientside will timeout.
+This will cause a "missing page state" error; note that the callback is not considered failed, since no
+connection error has occured.
+</td><td class="sampleaction">
+<com:TActiveButton
+ Text="click me"
+ OnCallback="buttonCallback"
+>
+ <prop:ClientSide
+ onPreDispatch = "new Insertion.Bottom('<%= $this->label2->ClientID %>', '<br/>onPreDispatch');"
+ onUninitialized = "new Insertion.Bottom('<%= $this->label2->ClientID %>', '<br/>onUninitialized');"
+ onLoading = "new Insertion.Bottom('<%= $this->label2->ClientID %>', '<br/>onLoading');"
+ onLoaded = "new Insertion.Bottom('<%= $this->label2->ClientID %>', '<br/>onLoaded');"
+ onInteractive = "new Insertion.Bottom('<%= $this->label2->ClientID %>', '<br/>onInteractive');"
+ onComplete = "new Insertion.Bottom('<%= $this->label2->ClientID %>', '<br/>onComplete');"
+ onSuccess = "new Insertion.Bottom('<%= $this->label2->ClientID %>', '<br/>onSuccess');"
+ onFailure = "new Insertion.Bottom('<%= $this->label2->ClientID %>', '<br/>onFailure');"
+ onException = "new Insertion.Bottom('<%= $this->label2->ClientID %>', '<br/>onException');"
+ RequestTimeOut = "3000"
+ />
+</com:TActiveButton>
+<br/><com:TLabel ID="label2" ForeColor="Red" Text="waiting for button click.." />
+</td></tr>
+
+</table>
+
+<com:TJavascriptLogger />
+
+<div class="last-modified">$Id: Home.page -1 $</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/ActiveControls/Samples/TCallbackClientSide/Home.php b/demos/quickstart/protected/pages/ActiveControls/Samples/TCallbackClientSide/Home.php new file mode 100644 index 00000000..8dd794fe --- /dev/null +++ b/demos/quickstart/protected/pages/ActiveControls/Samples/TCallbackClientSide/Home.php @@ -0,0 +1,12 @@ +<?php
+
+// $Id: Home.php -1 $
+class Home extends TPage
+{
+ public function buttonCallback ($sender, $param)
+ {
+ sleep(5);
+ }
+}
+
+?>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/ActiveControls/Samples/TCallbackOptions/Home.page b/demos/quickstart/protected/pages/ActiveControls/Samples/TCallbackOptions/Home.page new file mode 100644 index 00000000..9cc2f155 --- /dev/null +++ b/demos/quickstart/protected/pages/ActiveControls/Samples/TCallbackOptions/Home.page @@ -0,0 +1,77 @@ +<com:TContent ID="body">
+<h1>TCallbackOptions Samples</h1>
+
+<table class="sampletable">
+
+<tr><td class="samplenote">
+A callback button with attached client side options:
+</td><td class="sampleaction">
+<com:TActiveButton
+ Text="click me"
+ OnCallback="buttonCallback"
+ ActiveControl.CallbackOptions="options"
+/>
+<com:TCallbackOptions
+ ID="options"
+ ClientSide.OnLoading="$('callback_status2').hide(); new Effect.BlindDown('callback_status', { duration: 1 });"
+ ClientSide.OnComplete="new Effect.BlindUp('callback_status', { duration: 1 }); $('callback_status2').show();"
+/>
+<div id="callback_status" style="display:none;">please wait 5 seconds for the callback to complete...</div>
+<div id="callback_status2" style="display:none;">callback completed!</div>
+</td></tr>
+
+<tr><td class="samplenote">
+Same example as before, but this time interacting with another Prado control:
+</td><td class="sampleaction">
+<com:TActiveButton
+ Text="click me"
+ OnCallback="buttonCallback"
+ ActiveControl.CallbackOptions="options2"
+/>
+<com:TCallbackOptions
+ ID="options2"
+ ClientSide.OnLoading="$('<%= $this->label1->ClientID %>').innerHTML='please wait 5 seconds for the callback to complete....';"
+ ClientSide.OnComplete="$('<%= $this->label1->ClientID %>').innerHTML='callback completed!';"
+/>
+<br/><com:TLabel ID="label1" ForeColor="Red" Text="waiting for button click.." />
+</td></tr>
+
+<tr><td class="samplenote">
+The same TCallbackOptions can be shared among different controls, even of different types:
+</td><td class="sampleaction">
+<com:TActiveButton
+ Text="simple button"
+ OnCallback="buttonCallback"
+ ActiveControl.CallbackOptions="options3"
+/>
+
+<br/><com:TActiveCheckBox
+ Text="simple checkbox"
+ OnCallback="buttonCallback"
+ ActiveControl.CallbackOptions="options3"
+/>
+
+<br/><com:TActiveDropDownList
+ OnCallback="buttonCallback"
+ ActiveControl.CallbackOptions="options3"
+>
+ <com:TListItem Value="value 1" Text="item 1" />
+ <com:TListItem Value="value 2" Text="item 2" Selected="true" />
+ <com:TListItem Value="value 3" Text="item 3" />
+ <com:TListItem Value="value 4" Text="item 4" />
+</com:TActiveDropDownList>
+
+<br/><com:TLabel ID="label2" ForeColor="Red" Text="waiting for any control to callback.." />
+
+<com:TCallbackOptions
+ ID="options3"
+ ClientSide.OnLoading="$('<%= $this->label2->ClientID %>').innerHTML='please wait 5 seconds for the callback to complete....';"
+ ClientSide.OnComplete="$('<%= $this->label2->ClientID %>').innerHTML='callback completed!';"
+/>
+
+</td></tr>
+</table>
+
+<com:TJavascriptLogger />
+
+<div class="last-modified">$Id$</div></com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/ActiveControls/Samples/TCallbackOptions/Home.php b/demos/quickstart/protected/pages/ActiveControls/Samples/TCallbackOptions/Home.php new file mode 100644 index 00000000..6f101107 --- /dev/null +++ b/demos/quickstart/protected/pages/ActiveControls/Samples/TCallbackOptions/Home.php @@ -0,0 +1,12 @@ +<?php
+
+// $Id$
+class Home extends TPage
+{
+ public function buttonCallback ($sender, $param)
+ {
+ sleep(5);
+ }
+}
+
+?>
\ No newline at end of file |