summaryrefslogtreecommitdiff
path: root/demos/quickstart
diff options
context:
space:
mode:
authorxue <>2006-03-23 13:25:09 +0000
committerxue <>2006-03-23 13:25:09 +0000
commit29d40192ed3dc0085b5e513ec071c81e03e95d3b (patch)
tree87e228522e19c93f7d9d9cda6109bc4d6421072d /demos/quickstart
parent502ef5c173b2ca1220725d9814022102ea5dd749 (diff)
Reorganized quickstart tutorial.
Diffstat (limited to 'demos/quickstart')
-rw-r--r--demos/quickstart/protected/controls/DocLink.php30
-rw-r--r--demos/quickstart/protected/controls/Layout.tpl6
-rw-r--r--demos/quickstart/protected/controls/TopicList.tpl24
-rw-r--r--demos/quickstart/protected/pages/Advanced/Auth.page (renamed from demos/quickstart/protected/pages/Security/Auth.page)0
-rw-r--r--demos/quickstart/protected/pages/Advanced/Security.page79
-rw-r--r--demos/quickstart/protected/pages/Controls/Button.page16
-rw-r--r--demos/quickstart/protected/pages/Controls/CheckBox.page14
-rw-r--r--demos/quickstart/protected/pages/Controls/ColorPicker.page10
-rw-r--r--demos/quickstart/protected/pages/Controls/Data.page19
-rw-r--r--demos/quickstart/protected/pages/Controls/DataGrid.page (renamed from demos/quickstart/protected/pages/Controls/DataGrid1.page)73
-rw-r--r--demos/quickstart/protected/pages/Controls/DataGrid2.page75
-rw-r--r--demos/quickstart/protected/pages/Controls/DatePicker.page10
-rw-r--r--demos/quickstart/protected/pages/Controls/Expression.page10
-rw-r--r--demos/quickstart/protected/pages/Controls/FileUpload.page10
-rw-r--r--demos/quickstart/protected/pages/Controls/Head.page10
-rw-r--r--demos/quickstart/protected/pages/Controls/HiddenField.page10
-rw-r--r--demos/quickstart/protected/pages/Controls/HtmlArea.page7
-rw-r--r--demos/quickstart/protected/pages/Controls/HyperLink.page11
-rw-r--r--demos/quickstart/protected/pages/Controls/Image.page11
-rw-r--r--demos/quickstart/protected/pages/Controls/ImageButton.page11
-rw-r--r--demos/quickstart/protected/pages/Controls/ImageMap.page6
-rw-r--r--demos/quickstart/protected/pages/Controls/InlineFrame.page6
-rw-r--r--demos/quickstart/protected/pages/Controls/JavascriptLogger.page6
-rw-r--r--demos/quickstart/protected/pages/Controls/Label.page11
-rw-r--r--demos/quickstart/protected/pages/Controls/LinkButton.page11
-rw-r--r--demos/quickstart/protected/pages/Controls/Literal.page6
-rw-r--r--demos/quickstart/protected/pages/Controls/MultiView.page6
-rw-r--r--demos/quickstart/protected/pages/Controls/Panel.page11
-rw-r--r--demos/quickstart/protected/pages/Controls/PlaceHolder.page6
-rw-r--r--demos/quickstart/protected/pages/Controls/RadioButton.page11
-rw-r--r--demos/quickstart/protected/pages/Controls/SafeHtml.page6
-rw-r--r--demos/quickstart/protected/pages/Controls/Standard.page120
-rw-r--r--demos/quickstart/protected/pages/Controls/Statements.page6
-rw-r--r--demos/quickstart/protected/pages/Controls/Table.page11
-rw-r--r--demos/quickstart/protected/pages/Controls/TextBox.page11
-rw-r--r--demos/quickstart/protected/pages/Controls/TextHighlighter.page6
-rw-r--r--demos/quickstart/protected/pages/Controls/Wizard.page6
-rw-r--r--demos/quickstart/protected/pages/Security/Cookie.page42
-rw-r--r--demos/quickstart/protected/pages/Security/ViewState.page26
-rw-r--r--demos/quickstart/protected/pages/Security/XSS.page13
40 files changed, 587 insertions, 176 deletions
diff --git a/demos/quickstart/protected/controls/DocLink.php b/demos/quickstart/protected/controls/DocLink.php
new file mode 100644
index 00000000..74398efb
--- /dev/null
+++ b/demos/quickstart/protected/controls/DocLink.php
@@ -0,0 +1,30 @@
+<?php
+
+class DocLink extends THyperLink
+{
+ const BASE_URL='http://www.pradosoft.com/docs/manual';
+
+ public function getClassPath()
+ {
+ return $this->getViewState('ClassPath','');
+ }
+
+ public function setClassPath($value)
+ {
+ $this->setViewState('ClassPath',$value,'');
+ }
+
+ public function onPreRender($param)
+ {
+ parent::onPreRender($param);
+ $paths=explode('.',$this->getClassPath());
+ if(count($paths)>1)
+ {
+ $classFile=array_pop($paths).'.html';
+ $this->setNavigateUrl(self::BASE_URL . '/' . implode('.',$paths) . '/' . $classFile);
+ $this->setText('API Manual');
+ }
+ }
+}
+
+?> \ No newline at end of file
diff --git a/demos/quickstart/protected/controls/Layout.tpl b/demos/quickstart/protected/controls/Layout.tpl
index ed50954e..a69d8f50 100644
--- a/demos/quickstart/protected/controls/Layout.tpl
+++ b/demos/quickstart/protected/controls/Layout.tpl
@@ -22,14 +22,14 @@
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
+<td valign="top" width="1">
+<com:TopicList ID="TopicPanel" />
+</td>
<td valign="top">
<div id="content">
<com:TContentPlaceHolder ID="body" />
</div>
</td>
-<td valign="top" width="1">
-<com:TopicList ID="TopicPanel" />
-</td>
</tr>
</table>
diff --git a/demos/quickstart/protected/controls/TopicList.tpl b/demos/quickstart/protected/controls/TopicList.tpl
index afd3380c..7b99450c 100644
--- a/demos/quickstart/protected/controls/TopicList.tpl
+++ b/demos/quickstart/protected/controls/TopicList.tpl
@@ -38,43 +38,35 @@
</div>
<div class="topic">
-<div>Controls</div>
+<div>Control Reference</div>
<ul>
<li><a href="?page=Controls.Overview">Overview</a></li>
- <li><a href="?page=Controls.Simple">Simple HTML Controls</a></li>
- <li><a href="?page=Controls.List">List Controls</a></li>
+ <li><a href="?page=Controls.Standard">Standard Controls</a></li>
<li><a href="?page=Controls.Validation">Validation Controls</a></li>
- <li><a href="?page=Controls.Repeater">TRepeater</a></li>
- <li><a href="?page=Controls.DataList">TDataList</a></li>
- <li><a href="?page=Controls.DataGrid1">TDataGrid: Part I</a></li>
- <li><a href="?page=Controls.DataGrid2">TDataGrid: Part II</a></li>
+ <li><a href="?page=Controls.List">List Controls</a></li>
+ <li><a href="?page=Controls.Data">Data Controls</a></li>
<li><a href="?page=Construction">Active Controls</a></li>
<li><a href="?page=Controls.NewControl">Writing New Controls</a></li>
</ul>
</div>
<div class="topic">
-<div>Data Access</div>
+<div>Module Reference</div>
<ul>
- <li><a href="?page=Construction">DataBinding</a></li>
- <li><a href="?page=Construction">Data Bound Controls</a></li>
- <li><a href="?page=Construction">Data Source Controls</a></li>
</ul>
</div>
<div class="topic">
-<div>Security</div>
+<div>Service Reference</div>
<ul>
- <li><a href="?page=Security.Auth">Authentication and Authorization</a></li>
- <li><a href="?page=Security.ViewState">ViewState Protection</a></li>
- <li><a href="?page=Security.XSS">Cross Site Scripting Prevention</a></li>
- <li><a href="?page=Security.Cookie">Cookie Attack Prevention</a></li>
</ul>
</div>
<div class="topic">
<div>Avanced Topics</div>
<ul>
+ <li><a href="?page=Advanced.Auth">Authentication and Authorization</a></li>
+ <li><a href="?page=Advanced.Security">Security</a></li>
<li><a href="?page=Advanced.Scripts">Client-side Scripting</a></li>
<li><a href="?page=Advanced.Assets">Assets</a></li>
<li><a href="?page=Advanced.MasterContent">Master and Content</a></li>
diff --git a/demos/quickstart/protected/pages/Security/Auth.page b/demos/quickstart/protected/pages/Advanced/Auth.page
index ec876f54..ec876f54 100644
--- a/demos/quickstart/protected/pages/Security/Auth.page
+++ b/demos/quickstart/protected/pages/Advanced/Auth.page
diff --git a/demos/quickstart/protected/pages/Advanced/Security.page b/demos/quickstart/protected/pages/Advanced/Security.page
new file mode 100644
index 00000000..b6de7251
--- /dev/null
+++ b/demos/quickstart/protected/pages/Advanced/Security.page
@@ -0,0 +1,79 @@
+<com:TContent ID="body" >
+
+<h1>Security</h1>
+
+<h2>Viewstate Protection</h2>
+<p>
+Viewstate lies at the heart of PRADO. Viewstate represents data that can be used to restore pages to the state that is last seen by end users before making the current request. By default, PRADO uses hidden fields to store viewstate information.
+</p>
+<p>
+It is extremely important to ensure that viewstate is not tampered by end users. Without protection, malicious users may inject harmful code into viewstate and unwanted instructions may be performed when page state is being restored on server side.
+</p>
+<p>
+To prevent viewstate from being tampered, PRADO enforces viewstate HMAC (Keyed-Hashing for Message Authentication) check before restoring viewstate. Such a check can detect if the viewstate has been tampered or not by end users. Should the viewstate is modified, PRADO will stop restoring the viewstate and return an error message.
+</p>
+<p>
+HMAC check requires a private key that should be secret to end users. Developers can either manually specify a key or let PRADO automatically generate a key. Manually specified key is useful when the application runs on a server farm. To do so, configure <tt>TSecurityManager</tt> in application configuration,
+</p>
+<com:TTextHighlighter Language="xml" CssClass="source">
+&lt;modules&gt;
+ &lt;module id="security"
+ class="TSecurityManager"
+ ValidationKey="my private key" /&gt;
+&lt;/modules&gt;
+</com:TTextHighlighter>
+<p>
+HMAC check does not prevent end users from reading the viewstate content. An added security measure is to encrypt the viewstate information so that end users cannot decipher it. To enable viewstate encryption, set the <tt>EnableStateEncryption</tt> of pages to true. This can be done in <a href="?page=Configurations.PageConfig">page configurations</a> or in page code. Note, encrypting viewstate may degrade the application performance. A better strategy is to store viewstate on the server side, rather than the default hidden field.
+</p>
+
+<h2>Cross Site Scripting Prevention</h2>
+<p>
+Cross site scripting (also known as XSS) occurs when a web application gathers malicious data from a user. Often attackers will inject JavaScript, VBScript, ActiveX, HTML, or Flash into a vulnerable application to fool other application users and gather data from them. For example, a poorly design forum system may display user input in forum posts without any checking. An attacker can then inject a piece of malicious JavaScript code into a post so that when other users read this post, the JavaScript runs unexpectedly on their computers.
+</p>
+<p>
+One of the most important measures to prevent XSS attacks is to check user input before displaying them. One can do HTML-encoding with the user input to achieve this goal. However, in some situations, HTML-encoding may not be preferrable because it disables all HTML tags.
+</p>
+<p>
+PRADO incorporates the work of <a href="http://pixel-apes.com/safehtml/">SafeHTML</a> and provides developers with a useful component called <tt>TSafeHtml</tt>. By enclosing content within a <tt>TSafeHtml</tt> component tag, the enclosed content are ensured to be safe to end users. In addition, the commonly used <tt>TTextBox</tt> has a <tt>SafeText</tt> property which contains user input that are ensured to be safe if displayed directly to end users.
+</p>
+
+<h2>Cookie Attack Prevention</h2>
+<p>
+Protecting cookies from being attacked is of extreme important, as session IDs are commonly stored in cookies. If one gets hold of a session ID, he essentially owns all relevant session information.
+</p>
+<p>
+There are several countermeasures to prevent cookies from being attacked.
+</p>
+<ul>
+ <li>An application can use SSL to create a secure communication channel and only pass the authentication cookie over an HTTPS connection. Attackers are thus unable to decipher the contents in the transferred cookies.</li>
+ <li>Expire sessions appropriately, including all cookies and session tokens, to reduce the likelihood of being attacked.</li>
+ <li>Prevent <a href="?page=Security.XSS">cross-site scripting (XSS)</a> which causes arbitrary code to run in a user's browser and expose his cookies.</li>
+ <li>Validate cookie data and detect if they are altered.</li>
+</ul>
+<p>
+Prado implements a cookie validation scheme that prevents cookies from being modified. In particular, it does HMAC check for the cookie values if cookie validation is enable.
+</p>
+<p>
+Cookie validation is disabled by default. To enable it, configure the <tt>THttpRequest</tt> module as follows,
+</p>
+<com:TTextHighlighter Language="xml" CssClass="source">
+<modules>
+ <module id="request" class="THttpRequest" EnableCookieValidation="true" />
+</modules>
+</com:TTextHighlighter>
+<p>
+To make use of cookie validation scheme provided by Prado, you also need to retrieve cookies through the <tt>Cookies</tt> collection of <tt>THttpRequest</tt> by using the following PHP statements,
+</p>
+<com:TTextHighlighter CssClass="source">
+foreach($this->Request->Cookies as $cookie)
+ // $cookie is of type THttpCookie
+</com:TTextHighlighter>
+<p>
+To send cookie data encoded with validation information, create new <tt>THttpCookie</tt> objects and add them to the <tt>Cookies</tt> collection of <tt>THttpResponse</tt>,
+</p>
+<com:TTextHighlighter CssClass="source">
+$cookie=new THttpCookie($name,$value);
+$this->Response->Cookies[]=$cookie;
+</com:TTextHighlighter>
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/Button.page b/demos/quickstart/protected/pages/Controls/Button.page
new file mode 100644
index 00000000..e58571d3
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/Button.page
@@ -0,0 +1,16 @@
+<com:TContent ID="body" >
+
+<h1>TButton</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TButton" />
+
+<p>
+<tt>TButton</tt> creates a click button on a Web page. The button's caption is specified by <tt>Text</tt> property. A button is used to submit data to a page. <tt>TButton</tt> raises two server-side events, <tt>Click</tt> and <tt>Command</tt>, when it is clicked on the client-side. The difference between <tt>Click</tt> and <tt>Command</tt> events is that the latter event is bubbled up to the button's ancestor controls. A <tt>Command</tt> event handler can use <tt>CommandName</tt> and <tt>CommandParameter</tt> associated with the event to perform specific actions.
+</p>
+<p>
+Clicking on button can trigger form validation, if <tt>CausesValidation</tt> is true. And the validation may be restricted within a certain group of validator controls according to <tt>ValidationGroup</tt>.
+</p>
+<com:RunBar PagePath="Controls.Samples.TButton.Home" />
+
+TODO: custom attributes
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/CheckBox.page b/demos/quickstart/protected/pages/Controls/CheckBox.page
new file mode 100644
index 00000000..77052997
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/CheckBox.page
@@ -0,0 +1,14 @@
+<com:TContent ID="body" >
+
+<h1>TCheckBox</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TCheckBox" />
+
+<p>
+<tt>TCheckBox</tt> displays a check box on a Web page. A caption can be specified via <tt>Text</tt> and displayed beside the check box. It can appear either on the right or left of the check box, which is determined by <tt>TextAlign</tt>. You may further specify attributes applied to the text by using <tt>LabelAttributes</tt>.
+</p>
+<p>
+To determine whether the check box is checked, test the <tt>Checked</tt> property. A <tt>CheckedChanged</tt> event is raised if the state of <tt>Checked</tt> is changed between posts to the server. If <tt>AutoPostBack</tt> is true, changing the check box state will cause postback action. And if <tt>CausesValidation</tt> is also true, upon postback validation will be performed for validators within the specified <tt>ValidationGroup</tt>.
+</p>
+<com:RunBar PagePath="Controls.Samples.TCheckBox.Home" />
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/ColorPicker.page b/demos/quickstart/protected/pages/Controls/ColorPicker.page
new file mode 100644
index 00000000..6e05584a
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/ColorPicker.page
@@ -0,0 +1,10 @@
+<com:TContent ID="body" >
+
+<h1>TColorPicker</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TColorPicker" />
+
+<p>
+TBD
+</p>
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/Data.page b/demos/quickstart/protected/pages/Controls/Data.page
new file mode 100644
index 00000000..36839582
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/Data.page
@@ -0,0 +1,19 @@
+<com:TContent ID="body" >
+
+<h1>Data Controls</h1>
+
+<ul>
+ <li>
+ <a href="?page=Controls.DataList">TDataList</a> is used to display or modify a list of data items.
+ </li>
+
+ <li>
+ <a href="?page=Controls.DataGrid">TDataGrid</a> displays data in a tabular format with rows and columns.
+ </li>
+
+ <li>
+ <a href="?page=Controls.Repeater">TRepeater</a> displays its content defined in templates repeatedly based on the given data.
+ </li>
+</ul>
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/DataGrid1.page b/demos/quickstart/protected/pages/Controls/DataGrid.page
index dde372f5..de6a94e9 100644
--- a/demos/quickstart/protected/pages/Controls/DataGrid1.page
+++ b/demos/quickstart/protected/pages/Controls/DataGrid.page
@@ -1,6 +1,6 @@
<com:TContent ID="body" >
-<h1>TDataGrid : Part I</h1>
+<h1>TDataGrid</h1>
<p>
TDatagrid is an important control in building complex Web applications. It displays data in a tabular format with rows (also called items) and columns. A row is composed by cells, while columns govern how cells should be displayed according to their association with the columns. Data specified via <tt>DataSource</tt> or <tt>DataSourceID</tt> are bound to the rows and feed contents to cells.
@@ -108,4 +108,75 @@ The following example uses manually specified columns to show a list of book inf
<p>Pay attention to how item (row) styles and column styles cooperate together to affect the appearance of the cells in the datagrid.</p>
<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample2" />
+
+<h2>Interacting with TDataGrid</h2>
+<p>
+Besides the rich data presentation functionalities as demonstrated in previous section, TDataGrid is also highly user interactive. An import usage of TDataGrid is editting or deleting rows of data. The <tt>TBoundColumn</tt> can adjust the associated cell presentation according to the mode of datagrid items. When an item is in browsing mode, the cell is displayed with a static text; when the item is in editting mode, a textbox is displayed to collect user inputs. TDataGrid provides <tt>TEditCommandColumn</tt> for switching item modes. In addition, <tt>TButtonColumn</tt> offers developers the flexibility of creating arbitrary buttons for various user interactions.
+</p>
+<p>
+The following example shows how to make the previous book information table an interactive one. It allows users to edit and delete book items from the table. Two additional columns are used in the example to allow users interact with the datagrid: <tt>TEditCommandColumn</tt> and <tt>TButtonColumn</tt>.
+</p>
+<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample3" />
+
+<h2>Sorting</h2>
+<p>
+TDataGrid supports sorting its items according to specific columns. To enable sorting, set <tt>AllowSorting</tt> to true. This will turn column headers into clickable buttons if their <tt>SortExpression</tt> property is not empty. When users click on the header buttons, an <tt>OnSortCommand</tt> event will be raised. Developers can write handlers to respond to the sort command and sort the data according to <tt>SortExpression</tt> which is specified in the corresponding column.
+</p>
+<p>
+The following example turns the datagrid in <a href="?page=Controls.Samples.TDataGrid.Sample2">Example 2</a> into a sortable one. Users can click on the link button displayed in the header of any column, and the data will be sorted in ascending order along that column.
+</p>
+<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample4" />
+
+<h2>Paging</h2>
+<p>
+When dealing with large datasets, paging is helpful in reducing the page size and complexity. TDataGrid has an embedded pager that allows users to specify which page of data they want to see. The pager can be customized via <tt>PagerStyle</tt>. For example, <tt>PagerStyle.Visible</tt> determines whether the pager is visible or not; <tt>PagerStyle.Position</tt> indicates where the pager is displayed; and <tt>PagerStyle.Mode</tt> specifies what type of pager is displayed, a numeric one or a next-prev one.
+</p>
+<p>
+To enable paging, set <tt>AllowPaging</tt> to true. The number of rows of data displayed in a page is specified by <tt>PageSize</tt>, while the index (zero-based) of the page currently showing to users is by <tt>CurrentPageIndex</tt>. When users click on a pager button, TDataGrid raises <tt>OnPageIndexChanged</tt> event. Typically, the event handler is written as follows,
+</p>
+<com:TTextHighlighter CssClass="source">
+public function pageIndexChanged($sender,$param) {
+ $this->DataGrid->CurrentPageIndex=$param->NewPageIndex;
+ $this->DataGrid->DataSource=$this->Data;
+ $this->DataGrid->dataBind();
+}
+</com:TTextHighlighter>
+<p>
+The following example enables the paging functionality of the datagrid shown in <a href="?page=Controls.Samples.TDataGrid.Sample1">Example 1</a>. In this example, you can set various pager styles interactively to see how they affect the pager display.
+</p>
+<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample5" />
+
+<h3>Custom Paging</h3>
+<p>
+The paging functionality shown above requires loading all data into memory, even though only a portion of them is displayed in a page. For large datasets, this is inefficient and may not always be feasible. TDataGrid provides custom paging to solve this problem. Custom paging only requires the portion of the data to be displayed to end users.
+</p>
+<p>
+To enable custom paging, set both <tt>AllowPaging</tt> and <tt>AllowCustomPaging</tt> to true. Notify TDataGrid the total number of data items (rows) available by setting <tt>VirtualItemCount</tt>. And respond to the <tt>OnPageIndexChanged</tt> event. In the event handler, use the <tt>NewPageIndex</tt> property of the event parameter to fetch the new page of data from data source. For MySQL database, this can be done by using <tt>LIMIT</tt> clause in an SQL select statement.
+</p>
+<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample6" />
+
+<h2>Extending TDataGrid</h2>
+<p>
+Besides traditional class inheritance, extensibility of TDataGrid is mainly through developing new datagrid column components. For example, one may want to display an image column. He may use <tt>TTemplateColumn</tt> to accomplish this task. A better solution is to develop an image column component so that the work can be reused easily in other projects.
+</p>
+<p>
+All datagrid column components must inherit from <tt>TDataGridColumn</tt>. The main method that needs to be overridden is <tt>initializeCell()</tt> which creates content for cells in the corresponding column. Since each cell is also in an item (row) and the item can have different types (such as <tt>Header</tt>, <tt>AltneratingItem</tt>, etc.), different content may be created according to the item type. For the image column example, one may want to create a <tt>TImage</tt> control within cells residing in items of <tt>Item</tt> and <tt>AlterantingItem</tt> types.
+</p>
+<com:TTextHighlighter CssClass="source">
+class ImageColumn extends TDataGridColumn {
+ ...
+ public function initializeCell($cell,$columnIndex,$itemType) {
+ parent::initializeCell($cell,$columnIndex,$itemType);
+ if($itemType==='Item' || $itemType==='AlternatingItem') {
+ $image=new TImage;
+ // ... customization of the image
+ $cell->Controls[]=$image;
+ }
+ }
+}
+</com:TTextHighlighter>
+<p>
+In <tt>initializeCell()</tt>, remember to call the parent implementation, as it initializes cells in items of <tt>Header</tt> and <tt>Footer</tt> types.
+</p>
+
</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/DataGrid2.page b/demos/quickstart/protected/pages/Controls/DataGrid2.page
deleted file mode 100644
index ed169b1a..00000000
--- a/demos/quickstart/protected/pages/Controls/DataGrid2.page
+++ /dev/null
@@ -1,75 +0,0 @@
-<com:TContent ID="body" >
-
-<h1>TDataGrid : Part II</h1>
-
-<h2>Interacting with TDataGrid</h2>
-<p>
-Besides the rich data presentation functionalities as demonstrated in previous section, TDataGrid is also highly user interactive. An import usage of TDataGrid is editting or deleting rows of data. The <tt>TBoundColumn</tt> can adjust the associated cell presentation according to the mode of datagrid items. When an item is in browsing mode, the cell is displayed with a static text; when the item is in editting mode, a textbox is displayed to collect user inputs. TDataGrid provides <tt>TEditCommandColumn</tt> for switching item modes. In addition, <tt>TButtonColumn</tt> offers developers the flexibility of creating arbitrary buttons for various user interactions.
-</p>
-<p>
-The following example shows how to make the previous book information table an interactive one. It allows users to edit and delete book items from the table. Two additional columns are used in the example to allow users interact with the datagrid: <tt>TEditCommandColumn</tt> and <tt>TButtonColumn</tt>.
-</p>
-<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample3" />
-
-<h2>Sorting</h2>
-<p>
-TDataGrid supports sorting its items according to specific columns. To enable sorting, set <tt>AllowSorting</tt> to true. This will turn column headers into clickable buttons if their <tt>SortExpression</tt> property is not empty. When users click on the header buttons, an <tt>OnSortCommand</tt> event will be raised. Developers can write handlers to respond to the sort command and sort the data according to <tt>SortExpression</tt> which is specified in the corresponding column.
-</p>
-<p>
-The following example turns the datagrid in <a href="?page=Controls.Samples.TDataGrid.Sample2">Example 2</a> into a sortable one. Users can click on the link button displayed in the header of any column, and the data will be sorted in ascending order along that column.
-</p>
-<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample4" />
-
-<h2>Paging</h2>
-<p>
-When dealing with large datasets, paging is helpful in reducing the page size and complexity. TDataGrid has an embedded pager that allows users to specify which page of data they want to see. The pager can be customized via <tt>PagerStyle</tt>. For example, <tt>PagerStyle.Visible</tt> determines whether the pager is visible or not; <tt>PagerStyle.Position</tt> indicates where the pager is displayed; and <tt>PagerStyle.Mode</tt> specifies what type of pager is displayed, a numeric one or a next-prev one.
-</p>
-<p>
-To enable paging, set <tt>AllowPaging</tt> to true. The number of rows of data displayed in a page is specified by <tt>PageSize</tt>, while the index (zero-based) of the page currently showing to users is by <tt>CurrentPageIndex</tt>. When users click on a pager button, TDataGrid raises <tt>OnPageIndexChanged</tt> event. Typically, the event handler is written as follows,
-</p>
-<com:TTextHighlighter CssClass="source">
-public function pageIndexChanged($sender,$param) {
- $this->DataGrid->CurrentPageIndex=$param->NewPageIndex;
- $this->DataGrid->DataSource=$this->Data;
- $this->DataGrid->dataBind();
-}
-</com:TTextHighlighter>
-<p>
-The following example enables the paging functionality of the datagrid shown in <a href="?page=Controls.Samples.TDataGrid.Sample1">Example 1</a>. In this example, you can set various pager styles interactively to see how they affect the pager display.
-</p>
-<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample5" />
-
-<h3>Custom Paging</h3>
-<p>
-The paging functionality shown above requires loading all data into memory, even though only a portion of them is displayed in a page. For large datasets, this is inefficient and may not always be feasible. TDataGrid provides custom paging to solve this problem. Custom paging only requires the portion of the data to be displayed to end users.
-</p>
-<p>
-To enable custom paging, set both <tt>AllowPaging</tt> and <tt>AllowCustomPaging</tt> to true. Notify TDataGrid the total number of data items (rows) available by setting <tt>VirtualItemCount</tt>. And respond to the <tt>OnPageIndexChanged</tt> event. In the event handler, use the <tt>NewPageIndex</tt> property of the event parameter to fetch the new page of data from data source. For MySQL database, this can be done by using <tt>LIMIT</tt> clause in an SQL select statement.
-</p>
-<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample6" />
-
-<h2>Extending TDataGrid</h2>
-<p>
-Besides traditional class inheritance, extensibility of TDataGrid is mainly through developing new datagrid column components. For example, one may want to display an image column. He may use <tt>TTemplateColumn</tt> to accomplish this task. A better solution is to develop an image column component so that the work can be reused easily in other projects.
-</p>
-<p>
-All datagrid column components must inherit from <tt>TDataGridColumn</tt>. The main method that needs to be overridden is <tt>initializeCell()</tt> which creates content for cells in the corresponding column. Since each cell is also in an item (row) and the item can have different types (such as <tt>Header</tt>, <tt>AltneratingItem</tt>, etc.), different content may be created according to the item type. For the image column example, one may want to create a <tt>TImage</tt> control within cells residing in items of <tt>Item</tt> and <tt>AlterantingItem</tt> types.
-</p>
-<com:TTextHighlighter CssClass="source">
-class ImageColumn extends TDataGridColumn {
- ...
- public function initializeCell($cell,$columnIndex,$itemType) {
- parent::initializeCell($cell,$columnIndex,$itemType);
- if($itemType==='Item' || $itemType==='AlternatingItem') {
- $image=new TImage;
- // ... customization of the image
- $cell->Controls[]=$image;
- }
- }
-}
-</com:TTextHighlighter>
-<p>
-In <tt>initializeCell()</tt>, remember to call the parent implementation, as it initializes cells in items of <tt>Header</tt> and <tt>Footer</tt> types.
-</p>
-
-</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/DatePicker.page b/demos/quickstart/protected/pages/Controls/DatePicker.page
new file mode 100644
index 00000000..5425f2ab
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/DatePicker.page
@@ -0,0 +1,10 @@
+<com:TContent ID="body" >
+
+<h1>TDatePicker</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TDatePicker" />
+
+<p>
+TBD
+</p>
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/Expression.page b/demos/quickstart/protected/pages/Controls/Expression.page
new file mode 100644
index 00000000..767f292f
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/Expression.page
@@ -0,0 +1,10 @@
+<com:TContent ID="body" >
+
+<h1>TExpression</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TExpression" />
+
+<p>
+TBD
+</p>
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/FileUpload.page b/demos/quickstart/protected/pages/Controls/FileUpload.page
new file mode 100644
index 00000000..873d4bc7
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/FileUpload.page
@@ -0,0 +1,10 @@
+<com:TContent ID="body" >
+
+<h1>TFileUpload</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TFileUpload" />
+
+<p>
+TBD
+</p>
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/Head.page b/demos/quickstart/protected/pages/Controls/Head.page
new file mode 100644
index 00000000..269ec404
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/Head.page
@@ -0,0 +1,10 @@
+<com:TContent ID="body" >
+
+<h1>THead</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.THead" />
+
+<p>
+TBD
+</p>
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/HiddenField.page b/demos/quickstart/protected/pages/Controls/HiddenField.page
new file mode 100644
index 00000000..8b04d928
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/HiddenField.page
@@ -0,0 +1,10 @@
+<com:TContent ID="body" >
+
+<h1>THiddenField</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.THiddenField" />
+
+<p>
+TBD
+</p>
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/HtmlArea.page b/demos/quickstart/protected/pages/Controls/HtmlArea.page
new file mode 100644
index 00000000..992f417e
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/HtmlArea.page
@@ -0,0 +1,7 @@
+<com:TContent ID="body" >
+
+<h1>THtmlArea</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.THtmlArea" />
+
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/HyperLink.page b/demos/quickstart/protected/pages/Controls/HyperLink.page
new file mode 100644
index 00000000..afccd041
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/HyperLink.page
@@ -0,0 +1,11 @@
+<com:TContent ID="body" >
+
+<h1>THyperLink</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.THyperLink" />
+
+<p>
+<tt>THyperLink</tt> displays a hyperlink on a page. The hyperlink URL is specified via the <tt>NavigateUrl</tt> property, and link text is via the <tt>Text</tt> property. The link target is specified via the <tt>Target</tt> property. It is also possible to display an image by setting the <tt>ImageUrl</tt> property. In this case, <tt>Text</tt> is displayed as the alternate text of the image. If both <tt>ImageUrl</tt> and <tt>Text</tt> are empty, the content enclosed within the control tag will be rendered.
+</p>
+<com:RunBar PagePath="Controls.Samples.THyperLink.Home" />
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/Image.page b/demos/quickstart/protected/pages/Controls/Image.page
new file mode 100644
index 00000000..a926c204
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/Image.page
@@ -0,0 +1,11 @@
+<com:TContent ID="body" >
+
+<h1>TImage</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TImage" />
+
+<p>
+<tt>TImage</tt> displays an image on a page. The image is specified via the <tt>ImageUrl</tt> property which takes a relative or absolute URL to the image file. The alignment of the image displayed is set by the <tt>ImageAlign</tt> property. To set alternate text or long description of the image, use <tt>AlternateText</tt> or <tt>DescriptionUrl</tt>, respectively.
+</p>
+<com:RunBar PagePath="Controls.Samples.TImage.Home" />
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/ImageButton.page b/demos/quickstart/protected/pages/Controls/ImageButton.page
new file mode 100644
index 00000000..b4a8de93
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/ImageButton.page
@@ -0,0 +1,11 @@
+<com:TContent ID="body" >
+
+<h1>TImageButton</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TImageButton" />
+
+<p>
+<tt>TImageButton</tt> is also similar to <tt>TButton</tt>, except that <tt>TImageButton</tt> displays the button as an image. The image is specified via <tt>ImageUrl</tt>, and the alternate text is specified by <tt>Text</tt>. In addition, it is possible to obtain the coordinate of the point where the image is clicked. The coordinate information is contained in the event parameter of the <tt>Click</tt> event (not <tt>Command</tt>).
+</p>
+<com:RunBar PagePath="Controls.Samples.TImageButton.Home" />
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/ImageMap.page b/demos/quickstart/protected/pages/Controls/ImageMap.page
new file mode 100644
index 00000000..0d7d65b1
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/ImageMap.page
@@ -0,0 +1,6 @@
+<com:TContent ID="body" >
+
+<h1>TImageMap</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TImageMap" />
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/InlineFrame.page b/demos/quickstart/protected/pages/Controls/InlineFrame.page
new file mode 100644
index 00000000..ea89a690
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/InlineFrame.page
@@ -0,0 +1,6 @@
+<com:TContent ID="body" >
+
+<h1>TInlineFrame</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TInlineFrame" />
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/JavascriptLogger.page b/demos/quickstart/protected/pages/Controls/JavascriptLogger.page
new file mode 100644
index 00000000..8b3c63c8
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/JavascriptLogger.page
@@ -0,0 +1,6 @@
+<com:TContent ID="body" >
+
+<h1>TJavascriptLogger</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TJavascriptLogger" />
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/Label.page b/demos/quickstart/protected/pages/Controls/Label.page
new file mode 100644
index 00000000..69329c8a
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/Label.page
@@ -0,0 +1,11 @@
+<com:TContent ID="body" >
+
+<h1>TLabel</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TLabel" />
+
+<p>
+<tt>TLabel</tt> displays a piece of text on a Web page. The text to be displayed is set via its <tt>Text</tt> property. If <tt>Text</tt> is empty, content enclosed within the <tt>TLabel</tt> component tag will be displayed. <tt>TLabel</tt> may also be used as a form label associated with some control on the form. Since <tt>Text</tt> is not HTML-encoded when being rendered, make sure it does not contain dangerous characters that you want to avoid.
+</p>
+<com:RunBar PagePath="Controls.Samples.TLabel.Home" />
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/LinkButton.page b/demos/quickstart/protected/pages/Controls/LinkButton.page
new file mode 100644
index 00000000..eb22f9ce
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/LinkButton.page
@@ -0,0 +1,11 @@
+<com:TContent ID="body" >
+
+<h1>TLinkButton</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TLinkButton" />
+
+<p>
+<tt>TLinkButton</tt> is similar to <tt>TButton</tt> in every aspect except that <tt>TLinkButton</tt> is displayed as a hyperlink. The link text is determined by its <tt>Text</tt> property. If the <tt>Text</tt> property is empty, then the body content of the button is displayed (therefore, you can enclose a &lt;img&gt; tag within the button body and get an image button.
+</p>
+<com:RunBar PagePath="Controls.Samples.TLinkButton.Home" />
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/Literal.page b/demos/quickstart/protected/pages/Controls/Literal.page
new file mode 100644
index 00000000..edf3bf09
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/Literal.page
@@ -0,0 +1,6 @@
+<com:TContent ID="body" >
+
+<h1>TLiteral</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TLiteral" />
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/MultiView.page b/demos/quickstart/protected/pages/Controls/MultiView.page
new file mode 100644
index 00000000..8c21bbf5
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/MultiView.page
@@ -0,0 +1,6 @@
+<com:TContent ID="body" >
+
+<h1>TMultiView</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TMultiView" />
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/Panel.page b/demos/quickstart/protected/pages/Controls/Panel.page
new file mode 100644
index 00000000..b402cd8f
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/Panel.page
@@ -0,0 +1,11 @@
+<com:TContent ID="body" >
+
+<h1>TPanel</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TPanel" />
+
+<p>
+<tt>TPanel</tt> acts as a presentational container for other control. It displays a &lt;div&gt; element on a page. The property <tt>Wrap</tt> specifies whether the panel's body content should wrap or not, while <tt>HorizontalAlign</tt> governs how the content is aligned horizontally and <tt>Direction</tt> indicates the content direction (left to right or right to left). You can set <tt>BackImageUrl</tt> to give a background image to the panel, and you can ste <tt>GroupingText</tt> so that the panel is displayed as a field set with a legend text. Finally, you can specify a default button to be fired when users press 'return' key within the panel by setting the <tt>DefaultButton</tt> property.
+</p>
+<com:RunBar PagePath="Controls.Samples.TPanel.Home" />
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/PlaceHolder.page b/demos/quickstart/protected/pages/Controls/PlaceHolder.page
new file mode 100644
index 00000000..1291c149
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/PlaceHolder.page
@@ -0,0 +1,6 @@
+<com:TContent ID="body" >
+
+<h1>TPlaceHolder</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TPlaceHolder" />
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/RadioButton.page b/demos/quickstart/protected/pages/Controls/RadioButton.page
new file mode 100644
index 00000000..5e1d9d21
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/RadioButton.page
@@ -0,0 +1,11 @@
+<com:TContent ID="body" >
+
+<h1>TRadioButton</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TRadioButton" />
+
+<p>
+<tt>TRadioButton</tt> is similar to <tt>TCheckBox</tt> in every aspect, except that <tt>TRadioButton</tt> displays a radio button on a Web page. The radio button can belong to a specific group specified by <tt>GroupName</tt> such that only one radio button within that group can be selected at most.
+</p>
+<com:RunBar PagePath="Controls.Samples.TRadioButton.Home" />
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/SafeHtml.page b/demos/quickstart/protected/pages/Controls/SafeHtml.page
new file mode 100644
index 00000000..16561672
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/SafeHtml.page
@@ -0,0 +1,6 @@
+<com:TContent ID="body" >
+
+<h1>TSafeHtml</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TSafeHtml" />
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/Standard.page b/demos/quickstart/protected/pages/Controls/Standard.page
new file mode 100644
index 00000000..67cb2bc1
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/Standard.page
@@ -0,0 +1,120 @@
+<com:TContent ID="body" >
+
+<h1>Standard Controls</h1>
+
+<ul>
+ <li>
+ <a href="?page=Controls.Button">TButton</a> represents a click button on a Web page. It is mainly used to trigger page postback.
+ </li>
+
+ <li>
+ <a href="?page=Controls.CheckBox">TCheckBox</a> represents a checkbox on a Web page. It can be used to collect two-state user input.
+ </li>
+
+ <li>
+ <a href="?page=Controls.ColorPicker">TColorPicker</a> represents an input field taking color values via a color dialog.
+ </li>
+
+ <li>
+ <a href="?page=Controls.DatePicker">TDatePicker</a> represents an input field taking date values via a calendar dialog.
+ </li>
+
+ <li>
+ <a href="?page=Controls.Expression">TExpression</a> accepts a PHP expression and displays the evaluation result on a Web page.
+ </li>
+
+ <li>
+ <a href="?page=Controls.FileUpload">TFileUpload</a> represents a file upload field. It allows users to upload a file to server.
+ </li>
+
+ <li>
+ <a href="?page=Controls.Head">THead</a> represents the &lt;head&gt; element on an HTML Web page. It is required by a PRADO page should it use themes.
+ </li>
+
+ <li>
+ <a href="?page=Controls.HiddenField">THiddenField</a> represents a hidden input field on a Web page.
+ </li>
+
+ <li>
+ <a href="?page=Controls.HtmlArea">THtmlArea</a> represents a WYSIWYG text input field taking user input that are in HTML format.
+ </li>
+
+ <li>
+ <a href="?page=Controls.HyperLink">THyperLink</a> represents a hyperlink on a Web page.
+ </li>
+
+ <li>
+ <a href="?page=Controls.Image">TImage</a> represents an image on a Web page.
+ </li>
+
+ <li>
+ <a href="?page=Controls.ImageButton">TImageButton</a> represents a click button that has an image as the background. It is mainly used to trigger page postback.
+ </li>
+
+ <li>
+ <a href="?page=Controls.ImageMap">TImageMap</a> represents an image on a Web page with clickable hotspot regions.
+ </li>
+
+ <li>
+ <a href="?page=Controls.InlineFrame">TInlineFrame</a> represents an &lt;iframe;&gt; HTML element on a Web page.
+ xxx
+ </li>
+
+ <li>
+ <a href="?page=Controls.JavascriptLogger">TJavascriptLogger</a> represents a logger on a Web page that can log various JavaScript information.
+ </li>
+
+ <li>
+ <a href="?page=Controls.Label">TLabel</a> represents a label on a Web page. The label can be customized via various CSS attributes.
+ </li>
+
+ <li>
+ <a href="?page=Controls.LinkButton">TLinkButton</a> represents a hyperlink that can perform page postbacks.
+ </li>
+
+ <li>
+ <a href="?page=Controls.Literal">TLiteral</a> represents a static text without any HTML tag surrounding it on a Web page.
+ </li>
+
+ <li>
+ <a href="?page=Controls.MultiView">TMultiView</a> represents a container for a group of <tt>TView</tt> controls, each of which is container for other controls. At any time, at most one <tt>TView</tt> is visible.
+ </li>
+
+ <li>
+ <a href="?page=Controls.Panel">TPanel</a> represents a container for other controls on a Web page. In HTML, it is displayed as a &lt;div&gt; element.
+ </li>
+
+ <li>
+ <a href="?page=Controls.PlaceHolder">TPlaceHolder</a> reserves a place on a control template. It inserts its body content at that place.
+ </li>
+
+ <li>
+ <a href="?page=Controls.RadioButton">TRadioButton</a> represents a radiobutton on a Web page. It is mainly used in a group from which users make a choice.
+ </li>
+
+ <li>
+ <a href="?page=Controls.SafeHtml">TSafeHtml</a> displays its body content with assurance that the content contain no harmful code (such as <a href="?page=Security.XSS">XSS</a>).
+ </li>
+
+ <li>
+ <a href="?page=Controls.Statements">TStatements</a> accepts a few PHP statements and displays their standard output on the Web page.
+ </li>
+
+ <li>
+ <a href="?page=Controls.Table">TTable</a> represents an HTML table on a Web page. It is used together with <tt>TTableRow</tt> and <tt>TTableCell</tt>.
+ </li>
+
+ <li>
+ <a href="?page=Controls.TextBox">TTextBox</a> represents a text input field on a Web page. It can collect single-line, multi-line or password text input from users.
+ </li>
+
+ <li>
+ <a href="?page=Controls.TextHighlighter">TTextHighlighter</a> highlights its body content according to the specified syntax highlighter, such as PHP, XML, PRADO, etc.
+ </li>
+
+ <li>
+ <a href="?page=Controls.Wizard">TWizard</a> represents a multi-step form that can take user input step by step. It resembles to Windows installation wizards.
+ </li>
+</ul>
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/Statements.page b/demos/quickstart/protected/pages/Controls/Statements.page
new file mode 100644
index 00000000..28f25791
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/Statements.page
@@ -0,0 +1,6 @@
+<com:TContent ID="body" >
+
+<h1>TStatements</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TStatements" />
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/Table.page b/demos/quickstart/protected/pages/Controls/Table.page
new file mode 100644
index 00000000..75fa3fc1
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/Table.page
@@ -0,0 +1,11 @@
+<com:TContent ID="body" >
+
+<h1>TTable</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TTable" />
+
+<p>
+<tt>TTable</tt> displays an HTML table on a page. It is used together with <tt>TTableRow</tt> and <tt>TTableCell</tt> to allow programmatically manipulating HTML tables. The rows of the table is stored in <tt>Rows</tt> property. You may set the table cellspacing and cellpadding via the <tt>CellSpacing</tt> and <tt>CellPadding</tt> properties, respectively. The table caption can be specified via <tt>Caption</tt> whose alignment is specified by <tt>CaptionAlign</tt>. The <tt>GridLines</tt> property indicates how the table should display its borders, and the <tt>BackImageUrl</tt> allows the table to have a background image.
+</p>
+<com:RunBar PagePath="Controls.Samples.TTable.Home" />
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/TextBox.page b/demos/quickstart/protected/pages/Controls/TextBox.page
new file mode 100644
index 00000000..64cb826a
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/TextBox.page
@@ -0,0 +1,11 @@
+<com:TContent ID="body" >
+
+<h1>TTextBox</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TTextBox" />
+
+<p>
+<tt>TTextBox</tt> displays a text box on a Web page. The content in the text box is determined by the <tt>Text</tt> property. You can create a <tt>SingleLine</tt>, a <tt>MultiLine</tt>, or a <tt>Password</tt> text box by setting the <tt>TextMode</tt> property. The <tt>Rows</tt> and <tt>Columns</tt> properties specify their dimensions. If <tt>AutoPostBack</tt> is true, changing the content in the text box and then moving the focus out of it will cause postback action.
+</p>
+<com:RunBar PagePath="Controls.Samples.TTextBox.Home" />
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/TextHighlighter.page b/demos/quickstart/protected/pages/Controls/TextHighlighter.page
new file mode 100644
index 00000000..8ef30c71
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/TextHighlighter.page
@@ -0,0 +1,6 @@
+<com:TContent ID="body" >
+
+<h1>TTextHighlighter</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TTextHighlighter" />
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Controls/Wizard.page b/demos/quickstart/protected/pages/Controls/Wizard.page
new file mode 100644
index 00000000..11fb4bfa
--- /dev/null
+++ b/demos/quickstart/protected/pages/Controls/Wizard.page
@@ -0,0 +1,6 @@
+<com:TContent ID="body" >
+
+<h1>TWizard</h1>
+<com:DocLink ClassPath="System.Web.UI.WebControls.TWizard" />
+
+</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Security/Cookie.page b/demos/quickstart/protected/pages/Security/Cookie.page
deleted file mode 100644
index 6e95e380..00000000
--- a/demos/quickstart/protected/pages/Security/Cookie.page
+++ /dev/null
@@ -1,42 +0,0 @@
-<com:TContent ID="body" >
-
-<h1>Cookie Attack Prevention</h1>
-<p>
-Protecting cookies from being attacked is of extreme important, as session IDs are commonly stored in cookies. If one gets hold of a session ID, he essentially owns all relevant session information.
-</p>
-<p>
-There are several countermeasures to prevent cookies from being attacked.
-</p>
-<ul>
- <li>An application can use SSL to create a secure communication channel and only pass the authentication cookie over an HTTPS connection. Attackers are thus unable to decipher the contents in the transferred cookies.</li>
- <li>Expire sessions appropriately, including all cookies and session tokens, to reduce the likelihood of being attacked.</li>
- <li>Prevent <a href="?page=Security.XSS">cross-site scripting (XSS)</a> which causes arbitrary code to run in a user's browser and expose his cookies.</li>
- <li>Validate cookie data and detect if they are altered.</li>
-</ul>
-<p>
-Prado implements a cookie validation scheme that prevents cookies from being modified. In particular, it does HMAC check for the cookie values if cookie validation is enable.
-</p>
-<p>
-Cookie validation is disabled by default. To enable it, configure the <tt>THttpRequest</tt> module as follows,
-</p>
-<com:TTextHighlighter Language="xml" CssClass="source">
-<modules>
- <module id="request" class="THttpRequest" EnableCookieValidation="true" />
-</modules>
-</com:TTextHighlighter>
-<p>
-To make use of cookie validation scheme provided by Prado, you also need to retrieve cookies through the <tt>Cookies</tt> collection of <tt>THttpRequest</tt> by using the following PHP statements,
-</p>
-<com:TTextHighlighter CssClass="source">
-foreach($this->Request->Cookies as $cookie)
- // $cookie is of type THttpCookie
-</com:TTextHighlighter>
-<p>
-To send cookie data encoded with validation information, create new <tt>THttpCookie</tt> objects and add them to the <tt>Cookies</tt> collection of <tt>THttpResponse</tt>,
-</p>
-<com:TTextHighlighter CssClass="source">
-$cookie=new THttpCookie($name,$value);
-$this->Response->Cookies[]=$cookie;
-</com:TTextHighlighter>
-
-</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Security/ViewState.page b/demos/quickstart/protected/pages/Security/ViewState.page
deleted file mode 100644
index 1b79c272..00000000
--- a/demos/quickstart/protected/pages/Security/ViewState.page
+++ /dev/null
@@ -1,26 +0,0 @@
-<com:TContent ID="body" >
-
-<h1>Viewstate Protection</h1>
-<p>
-Viewstate lies at the heart of PRADO. Viewstate represents data that can be used to restore pages to the state that is last seen by end users before making the current request. By default, PRADO uses hidden fields to store viewstate information.
-</p>
-<p>
-It is extremely important to ensure that viewstate is not tampered by end users. Without protection, malicious users may inject harmful code into viewstate and unwanted instructions may be performed when page state is being restored on server side.
-</p>
-<p>
-To prevent viewstate from being tampered, PRADO enforces viewstate HMAC (Keyed-Hashing for Message Authentication) check before restoring viewstate. Such a check can detect if the viewstate has been tampered or not by end users. Should the viewstate is modified, PRADO will stop restoring the viewstate and return an error message.
-</p>
-<p>
-HMAC check requires a private key that should be secret to end users. Developers can either manually specify a key or let PRADO automatically generate a key. Manually specified key is useful when the application runs on a server farm. To do so, configure <tt>TSecurityManager</tt> in application configuration,
-</p>
-<com:TTextHighlighter Language="xml" CssClass="source">
-&lt;modules&gt;
- &lt;module id="security"
- class="TSecurityManager"
- ValidationKey="my private key" /&gt;
-&lt;/modules&gt;
-</com:TTextHighlighter>
-<p>
-HMAC check does not prevent end users from reading the viewstate content. An added security measure is to encrypt the viewstate information so that end users cannot decipher it. To enable viewstate encryption, set the <tt>EnableStateEncryption</tt> of pages to true. This can be done in <a href="?page=Configurations.PageConfig">page configurations</a> or in page code. Note, encrypting viewstate may degrade the application performance. A better strategy is to store viewstate on the server side, rather than the default hidden field.
-</p>
-</com:TContent> \ No newline at end of file
diff --git a/demos/quickstart/protected/pages/Security/XSS.page b/demos/quickstart/protected/pages/Security/XSS.page
deleted file mode 100644
index fedd2a38..00000000
--- a/demos/quickstart/protected/pages/Security/XSS.page
+++ /dev/null
@@ -1,13 +0,0 @@
-<com:TContent ID="body" >
-
-<h1>Cross Site Scripting Prevention</h1>
-<p>
-Cross site scripting (also known as XSS) occurs when a web application gathers malicious data from a user. Often attackers will inject JavaScript, VBScript, ActiveX, HTML, or Flash into a vulnerable application to fool other application users and gather data from them. For example, a poorly design forum system may display user input in forum posts without any checking. An attacker can then inject a piece of malicious JavaScript code into a post so that when other users read this post, the JavaScript runs unexpectedly on their computers.
-</p>
-<p>
-One of the most important measures to prevent XSS attacks is to check user input before displaying them. One can do HTML-encoding with the user input to achieve this goal. However, in some situations, HTML-encoding may not be preferrable because it disables all HTML tags.
-</p>
-<p>
-PRADO incorporates the work of <a href="http://pixel-apes.com/safehtml/">SafeHTML</a> and provides developers with a useful component called <tt>TSafeHtml</tt>. By enclosing content within a <tt>TSafeHtml</tt> component tag, the enclosed content are ensured to be safe to end users. In addition, the commonly used <tt>TTextBox</tt> has a <tt>SafeText</tt> property which contains user input that are ensured to be safe if displayed directly to end users.
-</p>
-</com:TContent> \ No newline at end of file