From 1d729693961dfa4cf4da45a05d703b392dbcb47f Mon Sep 17 00:00:00 2001 From: Fabio Bas Date: Sun, 12 Jan 2014 23:45:18 +0100 Subject: Quickstart Doc overhaul, pt. 2: active controls + minor fixes --- .../pages/ActiveControls/Introduction.page | 203 ++++++++++++++++++++- 1 file changed, 200 insertions(+), 3 deletions(-) (limited to 'demos/quickstart/protected/pages/ActiveControls/Introduction.page') diff --git a/demos/quickstart/protected/pages/ActiveControls/Introduction.page b/demos/quickstart/protected/pages/ActiveControls/Introduction.page index 70cb9cbf..edc0b5bc 100755 --- a/demos/quickstart/protected/pages/ActiveControls/Introduction.page +++ b/demos/quickstart/protected/pages/ActiveControls/Introduction.page @@ -1,7 +1,204 @@ -

Overview of Active Controls

- -TODO: +

AJAX: Introduction

+

+A classic webpage can only transfer data back to the server using an http postback request that requires a full page reload. This is a problem for web applications, since a synchronous page reload breaks the user interaction: the user must wait for the response to arrive and the page will lose its current status (the scrolling position, the currently focused control, etc..). +

class="figure" /> +

+A common solution to this problem is the use of AJAX (Asynchronous JavaScript and XML) callbacks. After the first full page load, the web application can make subsequents requests using javascript. The callback requests are asynchronous, so the user can continue to interact with the page while the response is loading. The response contains a list of changes that will be applied to the page "on the fly", like replacing existing elements with new content or add some css style to an existing element. +

+ +

Interacting with a page on callback

+ +

+PRADO has builtin support for AJAX callbacks in the form of Active Controls. These controls can trigger a callback request and have their properties (value, css style, attributes, ..) updated during a callback. +Before digging inside the list of Active Controls, it's good to have a look to how a page can be aware if the current request is a callback and how to interact with the page rendered on the client browser. +
+The IsCallBack property of the TPage class exposes whether the current request being handled is the consequence of a callback, and the CallbackClient property provides many methods to update and alter the client-side content during a callback request. +

+ + +public function onClick($sender, $param) +{ + if($this->IsCallback) + { + $this->getCallbackClient()->hide($this->TextBox1); + } +} + + +

Active Controls (AJAX enabled Controls)

+

+Active controls extends standard PRADO controls adding the ability to automatically update themselves on callbacks without the need of ad-hoc javascript calls. Active controls are reliant on a collection of javascript classes that gets added to the page automatically when needed. +

+ +

+Most active controls have a ActiveControl.EnableUpdate property that determines whether the active control is allowed to update the contents of the client-side when the callback response returns. Depending on the control different properties can be updated. +

+ +

+Some active controls can trigger a callback as a consequence of a clientside event (a button click, a checkbox being checked, a DOM event). The callback will first raise the normal serverside event associated to the control (eg: OnClick for a TButton or OnSelectedIndexChanged for a TRadioButtonList) and then the OnCallBack event. +The AutoPostBack property typically defaults to true for these controls. +

+

+ +

+Active controls have a ClientSide property that provides many subproperties to customize the controls and to hook some javascript code to the callback lifecycle, like showing a "Loading" logo at the start of a callback and hide it at the end. +

+ +

TActiveButton Class Diagram

+

The class diagram for TActiveButton is illustrated in the figure below. +Most active control that can perform callback request have a similar structure. +

+ + class="figure" + alt="TActiveButton class diagram" title="TActiveButton class diagram" /> + +

TActiveButton is an extension of TButton +and implements two additional interfaces ICallbackEventHandler and +IActiveControl. The TActiveButton contains an instance of +TBaseActiveCallbackControl +available through the ActiveControl property of TActiveButton. +The following example set the callback parameter of the TActiveButton when +a callback request is dispatched. +

+ +<com:TActiveButton + Text="Click Me" + OnCallback="button_callback" + ActiveControl.CallbackParameter="value" /> + +

In the OnCallback event handler method, the CallbackParameter +is available in the $param object.

+ +public function button_callback($sender, $param) +{ + echo $param->CallbackParameter; //outputs "value" +} + + +

Adding Client Side Behaviour

+ +

With in the ActiveControl property is an instance of +TCallbackClientSide available +as a property ClientSide of TActiveButton. +The ClientSide property contains sub-properties, such as RequestTimeOut, +and client-side javascript event handler, such as OnLoading, +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. +

+ + +<com:TClientScript PradoScripts="effects" /> +Loading... + +<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> + + +

The example loads the "effects" javascript library using the +TClientScript component. +The ClientSide.OnLoading property value contains +javascript statement that uses the "effects" library to show the "Loading..." +span tag. Similarly, ClientSide.OnComplete property +value contains the javascript statement that hides the "Loading..." span tag. +See TCallbackClientSide for +further details on client-side property details. +

+ +

Active Control Basic Infrastructure Classes

+

The following classes provide the basic infrastructure classes required to +realize the active controls. They can be useful to develop new active controls, but Prado users tipically don't need +to use them.

+ + +

Active Control Infrastructure Advanced Classes

+

The following classes provide advanced properties and events needed to realize the active controls. +A Prado user can use them to customize active controls behaviour and interact directly with the client side during a callback. +

+ -- cgit v1.2.3 From 0c5026b55cde5c104f10686afd8b441568175d38 Mon Sep 17 00:00:00 2001 From: Fabio Bas Date: Tue, 26 Aug 2014 16:57:44 +0200 Subject: Added dist-created ids for quickstart demo --- .../protected/pages/ActiveControls/Introduction.page | 4 ++-- demos/quickstart/protected/pages/Controls/HtmlArea4.page | 2 +- demos/quickstart/protected/pages/Controls/Markdown.page | 2 +- demos/quickstart/protected/pages/Fundamentals/Pages.page | 2 +- .../protected/pages/GettingStarted/CommandLine.page | 12 ++++++------ .../protected/pages/GettingStarted/Installation.page | 4 ++-- demos/quickstart/protected/pages/GettingStarted/Wsat.page | 10 +++++----- 7 files changed, 18 insertions(+), 18 deletions(-) (limited to 'demos/quickstart/protected/pages/ActiveControls/Introduction.page') diff --git a/demos/quickstart/protected/pages/ActiveControls/Introduction.page b/demos/quickstart/protected/pages/ActiveControls/Introduction.page index edc0b5bc..7edb96d2 100755 --- a/demos/quickstart/protected/pages/ActiveControls/Introduction.page +++ b/demos/quickstart/protected/pages/ActiveControls/Introduction.page @@ -9,7 +9,7 @@ A classic webpage can only transfer data back to the server using an http postba A common solution to this problem is the use of AJAX (Asynchronous JavaScript and XML) callbacks. After the first full page load, the web application can make subsequents requests using javascript. The callback requests are asynchronous, so the user can continue to interact with the page while the response is loading. The response contains a list of changes that will be applied to the page "on the fly", like replacing existing elements with new content or add some css style to an existing element.

-

Interacting with a page on callback

+

Interacting with a page on callback

PRADO has builtin support for AJAX callbacks in the form of Active Controls. These controls can trigger a callback request and have their properties (value, css style, attributes, ..) updated during a callback. @@ -28,7 +28,7 @@ public function onClick($sender, $param) } -

Active Controls (AJAX enabled Controls)

+

Active Controls (AJAX enabled Controls)

Active controls extends standard PRADO controls adding the ability to automatically update themselves on callbacks without the need of ad-hoc javascript calls. Active controls are reliant on a collection of javascript classes that gets added to the page automatically when needed.

diff --git a/demos/quickstart/protected/pages/Controls/HtmlArea4.page b/demos/quickstart/protected/pages/Controls/HtmlArea4.page index 1fa33424..f7092230 100755 --- a/demos/quickstart/protected/pages/Controls/HtmlArea4.page +++ b/demos/quickstart/protected/pages/Controls/HtmlArea4.page @@ -1,6 +1,6 @@ -

THtmlArea4

+

THtmlArea4

diff --git a/demos/quickstart/protected/pages/Controls/Markdown.page b/demos/quickstart/protected/pages/Controls/Markdown.page index d7cc00c6..2fea9fc2 100644 --- a/demos/quickstart/protected/pages/Controls/Markdown.page +++ b/demos/quickstart/protected/pages/Controls/Markdown.page @@ -1,6 +1,6 @@ -

TMarkdown

+

TMarkdown

diff --git a/demos/quickstart/protected/pages/Fundamentals/Pages.page b/demos/quickstart/protected/pages/Fundamentals/Pages.page index 58f4f06d..d52dccf5 100755 --- a/demos/quickstart/protected/pages/Fundamentals/Pages.page +++ b/demos/quickstart/protected/pages/Fundamentals/Pages.page @@ -15,7 +15,7 @@ A form submission is called postback if the submission is made to the pag TPage has a IsPostBack property exposing whether the current request being handled is the first request for this page or the consequence of a postback.

-

CallBack

+

CallBack

A callback is a special form submission that, instead of requiring a full page reload on the browser, gets executed in the background through an ajax call. So, a callback is considered a postback too, but not vice versa.
diff --git a/demos/quickstart/protected/pages/GettingStarted/CommandLine.page b/demos/quickstart/protected/pages/GettingStarted/CommandLine.page index 018a493e..e3626bcc 100755 --- a/demos/quickstart/protected/pages/GettingStarted/CommandLine.page +++ b/demos/quickstart/protected/pages/GettingStarted/CommandLine.page @@ -110,22 +110,22 @@ PostRecord#1

-

Creating Active Record Classes

-

+

Creating Active Record Classes

+

In the blog demo project, we need to create two Active Record classes, UserRecord and PostRecord, to represent data records in the users and posts tables, respectively. Active Record classes must extend from the base class ActiveRecord, and must define property names that matches with the field names of the corresponding table.

-

+

To better organize our directories, we create a new directory protected/database to hold the class files. We also modify our application configuration by inserting the following lines. It is equivalent to adding the directory protected/database to PHP include_path, which allows us to use the classes without explicitly including them.

- + -

+

At the prompt, enter the following two commands to create UserRecord and PostRecord classes:

@@ -135,7 +135,7 @@ At the prompt, enter the following two commands to create UserRecord an >> generate posts Application.database.PostRecord -

+

Here we used the namespace format again to specify the classes to be created. The path Application.database.UserRecord indicates that we want the UserRecord class file to be protected/database/UserRecord.php.

diff --git a/demos/quickstart/protected/pages/GettingStarted/Installation.page b/demos/quickstart/protected/pages/GettingStarted/Installation.page index 956f53c2..f59eed70 100755 --- a/demos/quickstart/protected/pages/GettingStarted/Installation.page +++ b/demos/quickstart/protected/pages/GettingStarted/Installation.page @@ -13,7 +13,7 @@ The minimum requirement by PRADO is that the Web server support PHP 5.3.3. PRADO PRADO can be installed as a standalone package or using composer

-

Standalone package

+

Standalone package

  1. Go to pradosoft.com to grab the latest version of PRADO.
  2. Unpack the PRADO release file to a Web-accessible directory. @@ -28,7 +28,7 @@ If you encounter any problems with the demo applications, please use the PRADO r

    -

    Composer install

    +

    Composer install

    1. If you don't have installed composer already, install it globally: diff --git a/demos/quickstart/protected/pages/GettingStarted/Wsat.page b/demos/quickstart/protected/pages/GettingStarted/Wsat.page index f9395aa0..6d7ddb37 100644 --- a/demos/quickstart/protected/pages/GettingStarted/Wsat.page +++ b/demos/quickstart/protected/pages/GettingStarted/Wsat.page @@ -1,5 +1,5 @@ -

      Web Site Administration Tool

      +

      Web Site Administration Tool

      Web Site Administration Tool (WSAT) is a development tool which allows you to perform several tedious tasks of a PRADO project in a GUI fashion. Its inspired in both Asp.Net - Web Site Administration Tool and Yii's Gii. @@ -12,12 +12,12 @@

      -

      Requirements

      +

      Requirements

      To use WSAT, you need to add in your project configuration file: application.xml, in the services section the wsat service like follows: - + ... @@ -25,7 +25,7 @@

      -

      Usage

      +

      Usage

      Then you are ready to go to: http://localhost/yoursite/index.php?wsat=TWsatLogin and doing so you should see the following page: @@ -36,7 +36,7 @@ is part of a basic security system to avoid undesirable persons to use this tool.

      -

      Active Record classes generation

      +

      Active Record classes generation

      In order to generate AR classes you need to go to: http://localhost/yoursite/index.php?wsat=TWsatGenerateAR by clicking the proper links in the welcome page. Then you should see the following page: -- cgit v1.2.3