diff options
| author | wei <> | 2007-01-14 02:10:24 +0000 |
|---|---|---|
| committer | wei <> | 2007-01-14 02:10:24 +0000 |
| commit | 45b0fe42a979d444d547a5248eb2e9e915aaf16a (patch) | |
| tree | 2480dae3350e4a70949956c41984cceb8dce3efc /demos/quickstart/protected/pages/Controls | |
| parent | 898049a4012eaecd99e7a418726215e656677809 (diff) | |
Add "block-content" to allow user comments on block level elements in quickstart docs.
Diffstat (limited to 'demos/quickstart/protected/pages/Controls')
39 files changed, 268 insertions, 271 deletions
diff --git a/demos/quickstart/protected/pages/Controls/Button.page b/demos/quickstart/protected/pages/Controls/Button.page index 37b90062..c145a4df 100644 --- a/demos/quickstart/protected/pages/Controls/Button.page +++ b/demos/quickstart/protected/pages/Controls/Button.page @@ -3,10 +3,10 @@ <h1 id="2001">TButton</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TButton" />
-<p>
+<p id="240234" class="block-content">
<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>OnClick</tt> and <tt>OnCommand</tt>, when it is clicked on the client-side. The difference between <tt>OnClick</tt> and <tt>OnCommand</tt> events is that the latter event is bubbled up to the button's ancestor controls. An <tt>OnCommand</tt> event handler can use <tt>CommandName</tt> and <tt>CommandParameter</tt> associated with the event to perform specific actions.
</p>
-<p>
+<p id="240235" class="block-content">
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" />
diff --git a/demos/quickstart/protected/pages/Controls/CheckBox.page b/demos/quickstart/protected/pages/Controls/CheckBox.page index 7f2767c0..54417320 100644 --- a/demos/quickstart/protected/pages/Controls/CheckBox.page +++ b/demos/quickstart/protected/pages/Controls/CheckBox.page @@ -3,10 +3,10 @@ <h1 id="2101">TCheckBox</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TCheckBox" />
-<p>
+<p id="250236" class="block-content">
<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>
+<p id="250237" class="block-content">
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" />
diff --git a/demos/quickstart/protected/pages/Controls/ClientScript.page b/demos/quickstart/protected/pages/Controls/ClientScript.page index d5687fb1..5b2147ec 100644 --- a/demos/quickstart/protected/pages/Controls/ClientScript.page +++ b/demos/quickstart/protected/pages/Controls/ClientScript.page @@ -3,7 +3,7 @@ <h1 id="2201">TClientScript</h1> <com:DocLink ClassPath="System.Web.UI.WebControls.TClientScript" /> <h2 id="2202">Including Bundled Javascript Libraries in Prado</h2> -<p> +<p id="260238" class="block-content"> <tt>TClientScript</tt> allows Javascript code to be insert or linked to the page template. PRADO is bundled with a large library of Javascript functionality including effects, AJAX, basic event handlers, and many others. The bundled @@ -12,13 +12,13 @@ Javascript libraries can be linked to the current page template using the can be specified using comma delimited string of the name of Javascript library to include on the page. For following example will include the "ajax" and "effects" library. </p> -<com:TTextHighlighter Language="prado" CssClass="source"> +<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_260101"> <com:TClientScript PradoScripts="ajax, effects" /> </com:TTextHighlighter> -<p> - The available bundled libraries included in Prado are - <ul> +<p id="260239" class="block-content"> + The available bundled libraries included in Prado are</p> + <ul id="u1" class="block-content"> <li><tt>prado</tt> : basic prado javascript framework based on Prototype</li> <li><tt>effects</tt> : visual effects from script.aculo.us</li> <li><tt>ajax</tt> : ajax and callback related based on Prototype</li> @@ -28,25 +28,24 @@ to include on the page. For following example will include the "ajax" and "effec <li><tt>rico</tt> : Rico library</li> <li><tt>colorpicker</tt> : colorpicker</li> </ul> -</p> -<p>The dependencies for each library are automatically resolved. That is, +<p id="260240" class="block-content">The dependencies for each library are automatically resolved. That is, specifying, say the "ajax", will also include the "prado" library.</p> <h2 id="2203">Including Custom Javascript Files</h2> -<p>Custom Javascript files can be register using the <tt>ScriptUrl</tt> property. +<p id="260241" class="block-content">Custom Javascript files can be register using the <tt>ScriptUrl</tt> property. The following example includes the Javascript file "test.js" to the page. In this case, the file "test.js" is relative the current template you are using. Since the property value is <a href="?page=Configurations.Templates3">dynamic asset tag</a>, the file "test.js" will be published automatically, that is, the file will be copied to the assets directory if necessary. </p> -<com:TTextHighlighter Language="prado" CssClass="source"> +<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_260102"> <com:TClientScript ScriptUrl=<%~ test.js %> /> </com:TTextHighlighter> -<p>You can include Javascript files from other servers by specifying the full URL string in +<p id="260242" class="block-content">You can include Javascript files from other servers by specifying the full URL string in the <tt>ScriptUrl</tt> property.</p> <h2 id="2204">Including Custom Javascript Code Blocks</h2> -<p> Any content within the <tt>TClientScript</tt> control tag will be considered as +<p id="260243" class="block-content"> Any content within the <tt>TClientScript</tt> control tag will be considered as Javascript code and will be rendered where it is declared.</p> </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 index 8909ad98..e0de6712 100644 --- a/demos/quickstart/protected/pages/Controls/ColorPicker.page +++ b/demos/quickstart/protected/pages/Controls/ColorPicker.page @@ -3,7 +3,7 @@ <h1 id="2201">TColorPicker</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TColorPicker" />
-<p>
+<p id="270244" class="block-content">
TBD
</p>
diff --git a/demos/quickstart/protected/pages/Controls/Data.page b/demos/quickstart/protected/pages/Controls/Data.page index 6a93ec6f..aea25ab7 100644 --- a/demos/quickstart/protected/pages/Controls/Data.page +++ b/demos/quickstart/protected/pages/Controls/Data.page @@ -2,7 +2,7 @@ <h1 id="5001">Data Controls</h1>
-<ul>
+<ul id="u1" class="block-content">
<li>
<a href="?page=Controls.DataList">TDataList</a> is used to display or modify a list of data items.
</li>
diff --git a/demos/quickstart/protected/pages/Controls/DataGrid.page b/demos/quickstart/protected/pages/Controls/DataGrid.page index 4697d0e5..83b5c3cf 100644 --- a/demos/quickstart/protected/pages/Controls/DataGrid.page +++ b/demos/quickstart/protected/pages/Controls/DataGrid.page @@ -2,24 +2,24 @@ <h1 id="5201">TDataGrid</h1>
-<p>
+<p id="590373" class="block-content">
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.
</p>
-<p>
+<p id="590374" class="block-content">
TDataGrid is highly interactive. Users can sort the data along specified columns, navigate through different pages of the data, and perform actions, such as editing and deleting, on rows of the data.
</p>
-<p>
+<p id="590375" class="block-content">
Rows of TDataGrid can be accessed via its <tt>Items</tt> property. A row (item) can be in one of several modes: browsing, editing and selecting, which affects how cells in the row are displayed. To change an item's mode, modify <tt>EditItemIndex</tt> or <tt>SelectedItemIndex</tt>. Note, if an item is in edit mode, then selecting this item will have no effect.
</p>
<h2 id="5202">Columns</h2>
-<p>
+<p id="590376" class="block-content">
Columns of a data grid determine how the associated cells are displayed. For example, cells associated with a <tt>TBoundColumn</tt> are displayed differently according to their modes. A cell is displayed as a static text if the cell is in browsing mode, a text box if it is in editing mode, and so on.
</p>
-<p>
+<p id="590377" class="block-content">
PRADO provides five types of columns:
</p>
-<ul>
+<ul id="u1" class="block-content">
<li><tt>TBoundColumn</tt> associates cells with a specific field of data and displays the cells according to their modes.</li>
<li><tt>TLiteralColumn</tt> associates cells with a specific field of data and displays the cells with static texts.</li>
<li><tt>TCheckBoxColumn</tt> associates cells with a specific field of data and displays in each cell a checkbox whose check state is determined by the data field value.</li>
@@ -31,18 +31,18 @@ PRADO provides five types of columns: </ul>
<h2 id="5203">Item Styles</h2>
-<p>
+<p id="590378" class="block-content">
TDataGrid defines different styles applied to its items. For example, <tt>AlternatingItemStyle</tt> is applied to alternating items (item 2, 4, 6, etc.) Through these properties, one can set CSS style fields or CSS classes for the items.
</p>
-<p>
+<p id="590379" class="block-content">
Item styles are applied in a hierarchical way. Styles in higher hierarchy will inherit from styles in lower hierarchy. Starting from the lowest hierarchy, the item styles include item's own style, <tt>ItemStyle</tt>, <tt>AlternatingItemStyle</tt>, <tt>SelectedItemStyle</tt>, and <tt>EditItemStyle</tt>. Therefore, if background color is set as red in <tt>ItemStyle</tt>, <tt>EditItemStyle</tt> will also have red background color, unless it is explicitly set to a different value.
</p>
<h2 id="5204">Events</h2>
-<p>
+<p id="590380" class="block-content">
TDataGrid provides several events to facilitate manipulation of its items,
</p>
-<ul>
+<ul id="u2" class="block-content">
<li><tt>OnItemCreated</tt> - raised each time an item is newly created. When the event is raised, data and child controls are both available for the new item.</li>
<li><tt>OnItemDataBound</tt> - raised each time an item just completes databinding. When the event is raised, data and child controls are both available for the item, and the item has finished databindings of itself and all its child controls.</li>
<li><tt>OnItemCommand</tt> - raised when a child control of some item (such as a <tt>TButton</tt>) raises an <tt>OnCommand</tt> event.</li>
@@ -62,13 +62,13 @@ TDataGrid provides several events to facilitate manipulation of its items, <h2 id="5205">Using TDataGrid</h2>
<h3 id="5210">Automatically Generated Columns</h3>
-<p>
+<p id="590381" class="block-content">
TDataGrid by default will create a list of columns based on the structure of the bound data. TDataGrid will read the first row of the data, extract the field names of the row, and construct a column for each field. Each column is of type <tt>TBoundColumn</tt>.
</p>
-<p>
+<p id="590382" class="block-content">
The following example displays a list of computer product information using a TDataGrid. Columns are automatically generated. Pay attention to how item styles are specified and inherited. The data are populated into the datagrid using the follow code, which is common among most datagrid applications,
</p>
-<com:TTextHighlighter Language="php" CssClass="source">
+<com:TTextHighlighter Language="php" CssClass="source block-content" id="code_590121">
public function onLoad($param) {
parent::onLoad($param);
if(!$this->IsPostBack) {
@@ -80,13 +80,13 @@ public function onLoad($param) { <com:RunBar PagePath="Controls.Samples.TDataGrid.Sample1" />
<h3 id="5211">Manually Specified Columns</h3>
-<p>
+<p id="590383" class="block-content">
Using automatically generated columns gives a quick way of browsing tabular data. In real applications, however, automatically generated columns are often not sufficient because developers have no way customizing their appearance. Manually specified columns are thus more desirable.
</p>
-<p>
+<p id="590384" class="block-content">
To manually specify columns, set <tt>AutoGenerateColumns</tt> to false, and specify the columns in a template like the following,
</p>
-<com:TTextHighlighter Language="prado" CssClass="source">
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_590122">
<com:TDataGrid ...>
<com:TBoundColumn DataField="name" .../>
<com:TBoundColumn DataField="price" .../>
@@ -94,78 +94,78 @@ To manually specify columns, set <tt>AutoGenerateColumns</tt> to false, and spec ...
</com:TDataGrid>
</com:TTextHighlighter>
-<p>
+<p id="590385" class="block-content">
Note, if <tt>AutoGenerateColumns</tt> is true and there are manually specified columns, the automatically generated columns will be appended to the manually specified columns. Also note, the datagrid's <tt>Columns</tt> property contains only manually specified columns and no automatically generated ones.
</p>
-<p>
+<p id="590386" class="block-content">
The following example uses manually specified columns to show a list of book information,
</p>
-<ul>
+<ul id="u4" class="block-content">
<li>Book title - displayed as a hyperlink pointing to the corresponding amazon.com book page. <tt>THyperLinkColumn</tt> is used.</li>
<li>Publisher - displayed as a piece of text using <tt>TBoundColumn</tt>.</li>
<li>Price - displayed as a piece of text using <tt>TBoundColumn</tt> with output formatting string and customized styles.</li>
<li>In-stock or not - displayed as a checkbox using <tt>TCheckBoxColumn</tt>.</li>
<li>Rating - displayed as an image using <tt>TTemplateColumn</tt> which allows maximum freedom in specifying cell contents.</li>
</ul>
-<p>Pay attention to how item (row) styles and column styles cooperate together to affect the appearance of the cells in the datagrid.</p>
+<p id="590387" class="block-content">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 id="5206">Interacting with TDataGrid</h2>
-<p>
+<p id="590388" class="block-content">
Besides the rich data presentation functionalities as demonstrated in previous section, TDataGrid is also highly user interactive. An import usage of TDataGrid is editing 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 editing 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>
+<p id="590389" class="block-content">
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>. In addition,
<tt>TDropDownListColumn</tt> replaces the previous <tt>TTemplateColumn</tt> to allow users to select a rating from a dropdown list. Note, it is also possible to use <tt>TTemplateColumn</tt> to achieve the same task.
</p>
<com:RunBar PagePath="Controls.Samples.TDataGrid.Sample3" />
<h2 id="5207">Sorting</h2>
-<p>
+<p id="590390" class="block-content">
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>
+<p id="590391" class="block-content">
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 id="5208">Paging</h2>
-<p>
+<p id="590392" class="block-content">
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>
+<p id="590393" class="block-content">
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">
+<com:TTextHighlighter CssClass="source block-content" id="code_590123">
public function pageIndexChanged($sender,$param) {
$this->DataGrid->CurrentPageIndex=$param->NewPageIndex;
$this->DataGrid->DataSource=$this->Data;
$this->DataGrid->dataBind();
}
</com:TTextHighlighter>
-<p>
+<p id="590394" class="block-content">
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 id="5212">Custom Paging</h3>
-<p>
+<p id="590395" class="block-content">
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>
+<p id="590396" class="block-content">
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 id="5209">Extending TDataGrid</h2>
-<p>
+<p id="590397" class="block-content">
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>
+<p id="590398" class="block-content">
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">
+<com:TTextHighlighter CssClass="source block-content" id="code_590124">
class ImageColumn extends TDataGridColumn {
...
public function initializeCell($cell,$columnIndex,$itemType) {
@@ -178,7 +178,7 @@ class ImageColumn extends TDataGridColumn { }
}
</com:TTextHighlighter>
-<p>
+<p id="590399" class="block-content">
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>
diff --git a/demos/quickstart/protected/pages/Controls/DataList.page b/demos/quickstart/protected/pages/Controls/DataList.page index 75541564..1630ed96 100644 --- a/demos/quickstart/protected/pages/Controls/DataList.page +++ b/demos/quickstart/protected/pages/Controls/DataList.page @@ -1,16 +1,16 @@ <com:TContent ID="body" >
<h1 id="5101">TDataList</h1>
-<p>
+<p id="580362" class="block-content">
TDataList is used to display or modify a list of data items specified by its <tt>DataSource</tt> or <tt>DataSourceID</tt> property. Each data item is displayed by a data list item which is a child control of the data list. The <tt>Items</tt> property contains the list of all data list items.
</p>
-<p>
+<p id="580363" class="block-content">
TDataList displays its items in either a <tt>Table</tt> or <tt>Flow</tt> layout, which is specified by the <tt>RepeatLayout</tt> property. A table layout uses HTML table cells to organize the items while a flow layout uses line breaks to organize the items. When the layout is <tt>Table</tt>, the table's cellpadding and cellspacing can be adjusted by <tt>CellPadding</tt> and <tt>CellSpacing</tt> properties, respectively. And <tt>Caption</tt> and <tt>CaptionAlign</tt> can be used to add a table caption with the specified alignment. The number of columns used to display the data list items is specified via <tt>RepeatColumns</tt> property, while the <tt>RepeatDirection</tt> governs the order of the items being rendered.
</p>
-<p>
+<p id="580364" class="block-content">
Each data list item is created according to one of the seven kinds of templates that developers may specified for a TDataList,
</p>
-<ul>
+<ul id="u5" class="block-content">
<li><tt>HeaderTemplate</tt> - the template used for displaying content at the beginning of a data list;</li>
<li><tt>FooterTemplate</tt> - the template used for displaying content at the end of a data list;</li>
<li><tt>ItemTemplate</tt> - the template used for displaying every data list item. If <tt>AlternatingItemTemplate</tt> is also defined, <tt>ItemTemplate</tt> will be used for displaying item 1, 3, 5, etc.</li>
@@ -19,19 +19,19 @@ Each data list item is created according to one of the seven kinds of templates <li><tt>EditItemTemplate</tt> - the template used for displaying items in edit mode.</li>
<li><tt>SelectedItemTemplate</tt> - the template used for displaying items in selected mode.</li>
</ul>
-<p>
+<p id="580365" class="block-content">
Each of the above templates is associated with a style property that is applied to the items using the template. For example, <tt>ItemTemplate</tt> is associated with a property named <tt>AlternatingItemStyle</tt>. Through this property, one can set CSS style fields or CSS classes for the data list items.
</p>
-<p>
+<p id="580366" class="block-content">
Item styles are applied in a hierarchical way. Style in higher hierarchy will inherit from styles in lower hierarchy. Starting from the lowest hierarchy, the item styles include item's own style, <tt>ItemStyle</tt>, <tt>AlternatingItemStyle</tt>, <tt>SelectedItemStyle</tt>, and <tt>EditItemStyle</tt>. Therefore, if background color is set as red in <tt>ItemStyle</tt>, <tt>EditItemStyle</tt> will also have red background color, unless it is explicitly set to a different value.
</p>
-<p>
+<p id="580367" class="block-content">
A data list item can be in normal mode, edit mode or selected mode. Different templates will apply to items of different modes. To change an item's mode, modify <tt>EditItemIndex</tt> or <tt>SelectedItemIndex</tt>. Note, if an item is in edit mode, then selecting this item will have no effect.
</p>
-<p>
+<p id="580368" class="block-content">
TDataList provides several events to facilitate manipulation of its items,
</p>
-<ul>
+<ul id="u7" class="block-content">
<li><tt>OnItemCreated</tt> - raised each time an item is newly created. When the event is raised, data and child controls are both available for the new item.</li>
<li><tt>OnItemDataBound</tt> - raised each time an item just completes databinding. When the event is raised, data and child controls are both available for the item, and the item has finished databindings of itself and all its child controls.</li>
<li><tt>OnItemCommand</tt> - raised when a child control of some item (such as a <tt>TButton</tt>) raises an <tt>OnCommand</tt> event.</li>
@@ -45,17 +45,17 @@ TDataList provides several events to facilitate manipulation of its items, </ul>
</li>
</ul>
-<p>
+<p id="580369" class="block-content">
The following example shows how to use TDataList to display tabular data, with different layout and styles.
</p>
<com:RunBar PagePath="Controls.Samples.TDataList.Sample1" />
-<p>
+<p id="580370" class="block-content">
A common use of TDataList is for maintaining tabular data, including browsing, editing, deleting data items. This is enabled by the command events and various item templates of TDataList.
</p>
-<p>
+<p id="580371" class="block-content">
The following example displays a computer product information. Users can add new products, modify or delete existing ones. In order to locate the data item for updating or deleting, <tt>DataKeys</tt> property is used.
</p>
-<p>
+<p id="580372" class="block-content">
Be aware, for simplicity, this application does not do any input validation. In real applications, make sure user inputs are valid before saving them into databases.
</p>
<com:RunBar PagePath="Controls.Samples.TDataList.Sample2" />
diff --git a/demos/quickstart/protected/pages/Controls/DatePicker.page b/demos/quickstart/protected/pages/Controls/DatePicker.page index 36d2f435..039540ce 100644 --- a/demos/quickstart/protected/pages/Controls/DatePicker.page +++ b/demos/quickstart/protected/pages/Controls/DatePicker.page @@ -3,14 +3,14 @@ <h1 id="2301">TDatePicker</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TDatePicker" />
-<p><tt>TDatePicker</tt> displays a text box for date input purpose.
+<p id="280245" class="block-content"><tt>TDatePicker</tt> displays a text box for date input purpose.
When the text box receives focus, a calendar will pop up and users can
pick up from it a date that will be automatically entered into the text box.
The format of the date string displayed in the text box is determined by
the <tt>DateFormat</tt> property. Valid formats are the combination of the
following tokens:
-<com:TTextHighlighter Language="text" CssClass="source">
+<com:TTextHighlighter Language="text" CssClass="source block-content" id="code_280103">
Character Format Pattern (en-US)
---------------------------------------------------------------------
d day digit
@@ -24,52 +24,50 @@ Character Format Pattern (en-US) ---------------------------------------------------------------------
</com:TTextHighlighter>
-<p>
+<p id="280246" class="block-content">
The date of the date picker can be set using the <tt>Date</tt> or <tt>Timestamp</tt>
properties. The <tt>Date</tt> property value must be in the same format as the pattern
specified in the <tt>DateFormat</tt> property. The <tt>Timestamp</tt> property
only accepts integers such as the Unix timestamp.
</p>
-<p>
-TDatePicker has three <tt>Mode</tt> to show the date picker popup.
- <ul>
+<p id="280247" class="block-content">
+TDatePicker has three <tt>Mode</tt> to show the date picker popup.</p>
+ <ul id="u1" class="block-content">
<li><tt>Basic</tt> - Only shows a text input, focusing on the input shows the date picker.</li>
<li><tt>Button</tt> - Shows a button next to the text input, clicking on the button shows the date, button text can be by the <tt>ButtonText</tt> property.</li>
<li><tt>ImageButton</tt> - Shows an image next to the text input, clicking on the image shows the date picker, image source can be change through the <tt>ImageUrl</tt> property.</li>
</ul>
-</p>
-<p>The <tt>CssClass</tt> property can be used to override the CSS class name
+<p id="280248" class="block-content">The <tt>CssClass</tt> property can be used to override the CSS class name
for the date picker panel. The <tt>CalendarStyle</tt> property changes the overall calendar style.
-The following <tt>CalendarStyle</tt> values are available:
- <ul>
+The following <tt>CalendarStyle</tt> values are available:</p>
+ <ul id="u2" class="block-content">
<li><tt>default</tt> - The default calendar style.</li>
</ul>
-</p>
-<p>The <tt>InputMode</tt> property can be set to "TextBox" or "DropDownList" with
+<p id="280249" class="block-content">The <tt>InputMode</tt> property can be set to "TextBox" or "DropDownList" with
default as "TextBox". In <tt>DropDownList</tt> mode, in addition to the popup date picker, three
drop down list (day, month and year) are presented to select the date .
When <tt>InputMode</tt> equals "DropDownList", the order and appearance of the date, month, and year
will depend on the pattern specified in <tt>DateFormat</tt> property.
</p>
-<p>The popup date picker can be hidden by specifying <tt>ShowCalendar</tt> as false. Much of the
+<p id="280250" class="block-content">The popup date picker can be hidden by specifying <tt>ShowCalendar</tt> as false. Much of the
text of the popup date picker can be changed to a different language using the <tt>Culture</tt> property.
</p>
-<p>The calendar picker year limit can be set using the <tt>FromYear</tt> and <tt>UpToYear</tt> properties
+<p id="280251" class="block-content">The calendar picker year limit can be set using the <tt>FromYear</tt> and <tt>UpToYear</tt> properties
where <tt>FromYear</tt> is the starting year and <tt>UpToYear</tt> is the last year selectable.
The starting day of the week can be changed by the <tt>FirstDayOfWeek</tt> property, with 0 as Sunday, 1 as Monday, etc.
</p>
-<p><b>Note 1:</b> If the <tt>InputMode</tt> is "TextBox", the <tt>DateFormat</tt> should
+<p id="280252" class="block-content"><b>Note 1:</b> If the <tt>InputMode</tt> is "TextBox", the <tt>DateFormat</tt> should
only <b>NOT</b> contain <code>MMM</code> or <code>MMMM</code> patterns. The
server side date parser will not be able to determine the correct date if <code>MMM</code> or
<code>MMMM</code> are used. When <tt>InputMode</tt> equals "DropDownList", all patterns can be used.</p>
-<p><b>Note 2:</b> When the <tt>TDatePicker</tt> is used together
+<p id="280253" class="block-content"><b>Note 2:</b> When the <tt>TDatePicker</tt> is used together
with a validator, the <tt>DateFormat</tt> property of the validator must be equal to
the <tt>DateFormat</tt> of the <tt>TDatePicker</tt> <b>AND</b> must set <tt>DataType</tt>="Date"
on the validator to ensure correct validation. See
diff --git a/demos/quickstart/protected/pages/Controls/Expression.page b/demos/quickstart/protected/pages/Controls/Expression.page index 044808c6..71230fba 100644 --- a/demos/quickstart/protected/pages/Controls/Expression.page +++ b/demos/quickstart/protected/pages/Controls/Expression.page @@ -3,18 +3,18 @@ <h1 id="2401">TExpression</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TExpression" />
-<p>
+<p id="290254" class="block-content">
<tt>TExpression</tt> evaluates a PHP expression and displays the evaluation result. To specify the expression to be evaluated, set the <tt>Expression</tt> property. Note, <tt>TExpression</tt> evaluates the expression during the rendering control lifecycle.
</p>
-<p>
+<p id="290255" class="block-content">
The context of the expression in a <tt>TExpression</tt> control is the control itself. That is, <tt>$this</tt> represents the control object if it is present in the expression. For example, the following template tag will display the title of the page containing the <tt>TExpression</tt> control.
</p>
-<com:TTextHighlighter Language="prado" CssClass="source">
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_290104">
<com:TExpression Expression="$this->Page->Title" />
</com:TTextHighlighter>
-<p>
+<p id="290256" class="block-content">
Be aware, since <tt>TExpression</tt> allows execution of arbitrary PHP code, in general you should not use it to evaluate expressions submitted by your application users.
</p>
diff --git a/demos/quickstart/protected/pages/Controls/FileUpload.page b/demos/quickstart/protected/pages/Controls/FileUpload.page index 404a144e..1f2a2adb 100644 --- a/demos/quickstart/protected/pages/Controls/FileUpload.page +++ b/demos/quickstart/protected/pages/Controls/FileUpload.page @@ -3,22 +3,22 @@ <h1 id="2501">TFileUpload</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TFileUpload" />
-<p>
+<p id="300257" class="block-content">
<tt>TFileUpload</tt> displays a file upload field on a Web page. Upon postback, the text entered into the field will be treated as the (local) name of the file that is uploaded to the server.
</p>
-<p>
+<p id="300258" class="block-content">
<tt>TFileUpload</tt> raises an <tt>OnFileUpload</tt> event when it is post back. The property <tt>HasFile</tt> indicates whether the file upload is successful or not. If successful, the uploaded file may be saved on the server by calling <tt>saveAs()</tt> method.
</p>
-<p>
+<p id="300259" class="block-content">
The following properties give the information about the uploaded file:
</p>
-<ul>
+<ul id="u1" class="block-content">
<li><tt>FileName</tt> - the original client-side file name without directory information.</li>
<li><tt>FileType</tt> - the MIME type of the uploaded file.</li>
<li><tt>FileSize</tt> - the file size in bytes.</li>
<li><tt>LocalName</tt> - the absolute file path of the uploaded file on the server. Note, this file will be deleted after the current page request is completed. Call <tt>saveAs()</tt> to save the uploaded file.</li>
</ul>
-<p>
+<p id="300260" class="block-content">
If the file upload is unsuccessful, the property <tt>ErrorCode</tt> gives the error code describing the cause of failure. See <a href="http://www.php.net/manual/en/features.file-upload.errors.php">PHP documentation</a> for a complete explanation of the possible error codes.
</p>
diff --git a/demos/quickstart/protected/pages/Controls/Head.page b/demos/quickstart/protected/pages/Controls/Head.page index 227b5282..3ee2d6c0 100644 --- a/demos/quickstart/protected/pages/Controls/Head.page +++ b/demos/quickstart/protected/pages/Controls/Head.page @@ -3,7 +3,7 @@ <h1 id="2601">THead</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.THead" />
-<p>
+<p id="310261" class="block-content">
TBD
</p>
diff --git a/demos/quickstart/protected/pages/Controls/HiddenField.page b/demos/quickstart/protected/pages/Controls/HiddenField.page index aa2e7c87..7564573e 100644 --- a/demos/quickstart/protected/pages/Controls/HiddenField.page +++ b/demos/quickstart/protected/pages/Controls/HiddenField.page @@ -3,10 +3,10 @@ <h1 id="2701">THiddenField</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.THiddenField" />
-<p>
+<p id="320262" class="block-content">
<tt>THiddenField</tt> represents a hidden field on a Web page. The value of the hidden field can be accessed via its <tt>Value</tt> property.
</p>
-<p>
+<p id="320263" class="block-content">
<tt>THiddenField</tt> raises an <tt>OnValueChanged</tt> event if its value is changed during postback.
</p>
diff --git a/demos/quickstart/protected/pages/Controls/HtmlArea.page b/demos/quickstart/protected/pages/Controls/HtmlArea.page index e40a4444..2b755802 100644 --- a/demos/quickstart/protected/pages/Controls/HtmlArea.page +++ b/demos/quickstart/protected/pages/Controls/HtmlArea.page @@ -3,18 +3,18 @@ <h1 id="2801">THtmlArea</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.THtmlArea" />
-<p>
+<p id="330264" class="block-content">
<tt>THtmlArea</tt> displays a WYSIWYG text input field on a Web page to collect input in HTML format. The text displayed in the <tt>THtmlArea</tt> control is specified or determined by using the <tt>Text</tt> property. To adjust the size of the input region, set <tt>Width</tt> and <tt>Height</tt> properties instead of <tt>Columns</tt> and <tt>Rows</tt> because the latter has no meaning under this situation. To disable the WYSIWYG feature, set <tt>EnableVisualEdit</tt> to false.
</p>
-<p>
+<p id="330265" class="block-content">
<tt>THtmlArea</tt> provides the WYSIWYG feature by wrapping the functionalities provided by the <a href="http://tinymce.moxiecode.com/">TinyMCE project</a>.
</p>
-<p>
+<p id="330266" class="block-content">
The default editor gives only the basic tool bar. To change or add additional tool bars, use the <tt>Options</tt> property to add additional editor options with each options on a new line. See <a href="http://tinymce.moxiecode.com/tinymce/docs/index.html">TinyMCE website</a> for a complete list of options. The following example displays a toolbar specific for HTML table manipulation,
</p>
-<com:TTextHighlighter Language="prado" CssClass="source">
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_330105">
<com:THtmlArea>
<prop:Options>
plugins : "table"
@@ -23,7 +23,7 @@ The default editor gives only the basic tool bar. To change or add additional to </com:THtmlArea>
</com:TTextHighlighter>
-<p>
+<p id="330267" class="block-content">
The client-side visual editing capability is supported by Internet Explorer 5.0+ for Windows and Gecko-based browser. If the browser does not support the visual editing, a traditional textarea will be displayed.
</p>
diff --git a/demos/quickstart/protected/pages/Controls/HyperLink.page b/demos/quickstart/protected/pages/Controls/HyperLink.page index 9fa6bde3..5861a00f 100644 --- a/demos/quickstart/protected/pages/Controls/HyperLink.page +++ b/demos/quickstart/protected/pages/Controls/HyperLink.page @@ -3,7 +3,7 @@ <h1 id="2901">THyperLink</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.THyperLink" />
-<p>
+<p id="340268" class="block-content">
<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" />
diff --git a/demos/quickstart/protected/pages/Controls/Image.page b/demos/quickstart/protected/pages/Controls/Image.page index 1e8df3de..dc68a8bd 100644 --- a/demos/quickstart/protected/pages/Controls/Image.page +++ b/demos/quickstart/protected/pages/Controls/Image.page @@ -3,7 +3,7 @@ <h1 id="3201">TImage</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TImage" />
-<p>
+<p id="370273" class="block-content">
<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" />
diff --git a/demos/quickstart/protected/pages/Controls/ImageButton.page b/demos/quickstart/protected/pages/Controls/ImageButton.page index a4f8d30f..22ec483f 100644 --- a/demos/quickstart/protected/pages/Controls/ImageButton.page +++ b/demos/quickstart/protected/pages/Controls/ImageButton.page @@ -3,7 +3,7 @@ <h1 id="3001">TImageButton</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TImageButton" />
-<p>
+<p id="350269" class="block-content">
<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>OnClick</tt> event (not <tt>OnCommand</tt>).
</p>
<com:RunBar PagePath="Controls.Samples.TImageButton.Home" />
diff --git a/demos/quickstart/protected/pages/Controls/ImageMap.page b/demos/quickstart/protected/pages/Controls/ImageMap.page index 002861a3..162500e3 100644 --- a/demos/quickstart/protected/pages/Controls/ImageMap.page +++ b/demos/quickstart/protected/pages/Controls/ImageMap.page @@ -3,16 +3,16 @@ <h1 id="3101">TImageMap</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TImageMap" />
-<p>
+<p id="360270" class="block-content">
<tt>TImageMap</tt> represents an image on a Web page with predefined hotspot regions that can respond differently to users' clicks on them. Depending on the <tt>HotSpotMode</tt> of the hotspot region, clicking on the hotspot may trigger a postback or navigate to a specified URL.
</p>
-<p>
+<p id="360271" class="block-content">
Each hotspot is described using a <tt>THotSpot</tt> object and is maintained in the <tt>HotSpots</tt> collection in <tt>TImageMap</tt>. A hotspot can be a circle, rectangle, polygon, etc.
</p>
-<p>
+<p id="360272" class="block-content">
Hotspots can be added to <tt>TImageMap</tt> via its <tt>HotSpots</tt> property or in a template like the following,
</p>
-<com:TTextHighlighter Language="prado" CssClass="source">
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_360106">
<com:TImageMap ... >
<com:TCircleHotSpot ... />
<com:TRectangleHotSpot ... />
diff --git a/demos/quickstart/protected/pages/Controls/InlineFrame.page b/demos/quickstart/protected/pages/Controls/InlineFrame.page index efd5144d..08b47f21 100644 --- a/demos/quickstart/protected/pages/Controls/InlineFrame.page +++ b/demos/quickstart/protected/pages/Controls/InlineFrame.page @@ -3,20 +3,20 @@ <h1 id="3301">TInlineFrame</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TInlineFrame" />
-<p>
+<p id="380274" class="block-content">
<tt>TInlineFrame</tt> displays an inline frame (<iframe>) on a Web page. The location of the frame content is specified by the <tt>FrameUrl</tt> property.
</p>
-<p>
+<p id="380275" class="block-content">
The appearance of a <tt>TInlineFrame</tt> may be customized with the following properties, in addition to those inherited from <tt>TWebControl</tt>.
</p>
-<ul>
+<ul id="u1" class="block-content">
<li><tt>Align</tt> - the alignment of the frame.</li>
<li><tt>DescriptionUrl</tt> - the URI of a long description of the frame's contents.</li>
<li><tt>MarginWidth</tt> and <tt>MarginHeight</tt> - the number of pixels to use as the left/right margins and top/bottom margins, respectively.</li>
<li><tt>ScrollBars</tt> - whether scrollbars are provided for the inline frame. By default, it is <tt>Auto</tt>, meaning the scroll bars appear as needed. Setting it as <tt>None</tt> or <tt>Both</tt> to explicitly hide or show the scroll bars.</li>
</ul>
-<p>
+<p id="380276" class="block-content">
The following samples show <tt>TInlineFrame</tt> with different property settings. The Google homepage is used as the frame content.
</p>
<com:RunBar PagePath="Controls.Samples.TInlineFrame.Home" />
diff --git a/demos/quickstart/protected/pages/Controls/JavascriptLogger.page b/demos/quickstart/protected/pages/Controls/JavascriptLogger.page index 2c0032f8..a41495d2 100644 --- a/demos/quickstart/protected/pages/Controls/JavascriptLogger.page +++ b/demos/quickstart/protected/pages/Controls/JavascriptLogger.page @@ -3,28 +3,28 @@ <h1 id="3401">TJavascriptLogger</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TJavascriptLogger" />
-<p>
+<p id="390277" class="block-content">
<tt>TJavascriptLogger</tt> provides logging for client-side javascript. It is mainly a wrapper of the Javascript developed at <a href="http://gleepglop.com/javascripts/logger/">http://gleepglop.com/javascripts/logger/</a>.
</p>
-<p>
+<p id="390278" class="block-content">
To use <tt>TJavascriptLogger</tt>, simply place the following component tag in a page template.
</p>
-<com:TTextHighlighter Language="prado" CssClass="source">
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_390107">
<com:TJavascriptLogger />
</com:TTextHighlighter>
-<p>
+<p id="390279" class="block-content">
Then, the client-side Javascript may contain the following statements. When they are executed, they will appear in the logger window.
</p>
-<com:TTextHighlighter Language="js" CssClass="source">
+<com:TTextHighlighter Language="js" CssClass="source block-content" id="code_390108">
Logger.info('something happend');
Logger.warn('A warning');
Logger.error('This is an error');
Logger.debug('debug information');
</com:TTextHighlighter>
-<p>
+<p id="390280" class="block-content">
To toggle the visibility of the logger and console on the browser window, press ALT-D (or CTRL-D on OS X).
</p>
diff --git a/demos/quickstart/protected/pages/Controls/Label.page b/demos/quickstart/protected/pages/Controls/Label.page index b7d5b094..794c48de 100644 --- a/demos/quickstart/protected/pages/Controls/Label.page +++ b/demos/quickstart/protected/pages/Controls/Label.page @@ -3,7 +3,7 @@ <h1 id="3501">TLabel</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TLabel" />
-<p>
+<p id="400281" class="block-content">
<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" />
diff --git a/demos/quickstart/protected/pages/Controls/LinkButton.page b/demos/quickstart/protected/pages/Controls/LinkButton.page index e0255141..9c586ed3 100644 --- a/demos/quickstart/protected/pages/Controls/LinkButton.page +++ b/demos/quickstart/protected/pages/Controls/LinkButton.page @@ -3,7 +3,7 @@ <h1 id="3601">TLinkButton</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TLinkButton" />
-<p>
+<p id="410282" class="block-content">
<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 <img> tag within the button body and get an image button.
</p>
<com:RunBar PagePath="Controls.Samples.TLinkButton.Home" />
diff --git a/demos/quickstart/protected/pages/Controls/List.page b/demos/quickstart/protected/pages/Controls/List.page index b5915693..c9fef3ab 100644 --- a/demos/quickstart/protected/pages/Controls/List.page +++ b/demos/quickstart/protected/pages/Controls/List.page @@ -1,12 +1,12 @@ <com:TContent ID="body" >
<h1 id="4801">List Controls</h1>
-<p>
+<p id="550329" class="block-content">
List controls covered in this section all inherit directly or indirectly from <tt>TListControl</tt>. Therefore, they share the same set of commonly used properties, including,
</p>
-<ul>
+<ul id="u1" class="block-content">
<li><tt>Items</tt> - list of items in the control. The items are of type <tt>TListItem</tt>. The item list can be populated via databinding or specified in templates like the following:
-<com:TTextHighlighter Language="prado" CssClass="source">
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_550115">
<com:TListBox>
<com:TListItem Text="text 1" Value="value 1" />
<com:TListItem Text="text 2" Value="value 2" Selected="true" />
@@ -22,12 +22,12 @@ List controls covered in this section all inherit directly or indirectly from <t <li><tt>CausesValidation</tt> - whether validation should be performed when postback is triggered by the list control.</li>
</ul>
-<p>
+<p id="550330" class="block-content">
Since <tt>TListControl</tt> inherits from <tt>TDataBoundControl</tt>, these list controls also share a common operation known as <tt>databinding</tt>. The <tt>Items</tt> can be populated from preexisting data specified by <tt>DataSource</tt> or <tt>DataSourceID</tt>. A function call to <tt>dataBind()</tt> will cause the data population. For list controls, data can be specified in the following two kinds of format:
</p>
-<ul>
+<ul id="u2" class="block-content">
<li>one-dimensional array or objects implementing <tt>ITraversable</tt> : array keys will be used as list item values, and array values will be used as list item texts. For example
-<com:TTextHighlighter CssClass="source">
+<com:TTextHighlighter CssClass="source block-content" id="code_550116">
$listbox->DataSource=array(
'key 1'=>'item 1',
'key 2'=>'item 2',
@@ -36,7 +36,7 @@ $listbox->dataBind(); </com:TTextHighlighter>
</li>
<li>tabular (two-dimensional) data : each row of data populates a single list item. The list item value is specified by the data member indexed with <tt>DataValueField</tt>, and the list item text by <tt>DataTextField</tt>. For example,
-<com:TTextHighlighter CssClass="source">
+<com:TTextHighlighter CssClass="source block-content" id="code_550117">
$listbox->DataTextField='name';
$listbox->DataValueField='id';
$listbox->DataSource=array(
@@ -49,22 +49,22 @@ $listbox->dataBind(); </ul>
<h2 id="4802">TListBox</h2>
-<p>
+<p id="550331" class="block-content">
<tt>TListBox</tt> displays a list box that allows single or multiple selection. Set the property <tt>SelectionMode</tt> as <tt>Single</tt> to make a single selection list box, and <tt>Multiple</tt> a multiple selection list box. The number of rows displayed in the box is specified via the <tt>Rows</tt> property value.
</p>
<com:RunBar PagePath="Controls.Samples.TListBox.Home" />
<h2 id="4803">TDropDownList</h2>
-<p>
+<p id="550332" class="block-content">
<tt>TDropDownList</tt> displays a dropdown list box that allows users to select a single option from a few prespecified ones.
</p>
<com:RunBar PagePath="Controls.Samples.TDropDownList.Home" />
<h2 id="4804">TCheckBoxList</h2>
-<p>
+<p id="550333" class="block-content">
<tt>TCheckBoxList</tt> displays a list of checkboxes on a Web page. The alignment of the text besides each checkbox can be specified <tt>TextAlign</tt>. The layout of the checkboxes can be controlled by the following properties:
</p>
-<ul>
+<ul id="u3" class="block-content">
<li><tt>RepeatLayout</tt> - can be either <tt>Table</tt> or <tt>Flow</tt>. A <tt>Table</tt> uses HTML table cells to organize the checkboxes, while a <tt>Flow</tt> uses HTML span tags and breaks for the organization. With <tt>Table</tt> layout, you can set <tt>CellPadding</tt> and <tt>CellSpacing</tt>.</li>
<li><tt>RepeatColumns</tt> - how many columns the checkboxes should be displayed in.</li>
<li><tt>RepeatDirection</tt> - how to traverse the checkboxes, in a horizontal way or a vertical way (because the checkboxes are displayed in a matrix-like layout).</li>
@@ -73,19 +73,19 @@ $listbox->dataBind(); <com:RunBar PagePath="Controls.Samples.TCheckBoxList.Home" />
<h2 id="4805">TRadioButtonList</h2>
-<p>
+<p id="550334" class="block-content">
<tt>TRadioButtonList</tt> is similar to <tt>TCheckBoxList</tt> in every aspect except that each <tt>TRadioButtonList</tt> displays a group of radiobuttons. Only one of the radiobuttions can be selected (<tt>TCheckBoxList</tt> allows multiple selections.)
</p>
<com:RunBar PagePath="Controls.Samples.TRadioButtonList.Home" />
<h2 id="4806">TBulletedList</h2>
-<p>
+<p id="550335" class="block-content">
<tt>TBulletedList</tt> displays items in a bullet format on a Web page. The style of the bullets can be specified by <tt>BulletStyle</tt>. When the style is <tt>CustomImage</tt>, the bullets are displayed as images, which is specified by <tt>BulletImageUrl</tt>.
</p>
-<p>
+<p id="550336" class="block-content">
<tt>TBulletedList</tt> displays the item texts in three different modes,
</p>
-<ul>
+<ul id="u4" class="block-content">
<li><tt>Text</tt> - the item texts are displayed as static texts;</li>
<li><tt>HyperLink</tt> - each item is displayed as a hyperlink whose URL is given by the item value, and <tt>Target</tt> property can be used to specify the target browser window;</li>
<li><tt>LinkButton</tt> - each item is displayed as a link button which posts back to the page if a user clicks on that, and the event <tt>OnClick</tt> will be raised under such a circumstance.</li>
diff --git a/demos/quickstart/protected/pages/Controls/Literal.page b/demos/quickstart/protected/pages/Controls/Literal.page index d5d40a13..ade7bc07 100644 --- a/demos/quickstart/protected/pages/Controls/Literal.page +++ b/demos/quickstart/protected/pages/Controls/Literal.page @@ -3,20 +3,20 @@ <h1 id="3701">TLiteral</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TLiteral" />
-<p>
+<p id="420283" class="block-content">
<tt>TLiteral</tt> displays a static text on a Web page. <tt>TLiteral</tt> is similar to the <tt>TLabel</tt> control, except that the <tt>TLiteral</tt>
* control has no style properties, such as <tt>BackColor</tt>, <tt>Font</tt>, etc.
</p>
-<p>
+<p id="420284" class="block-content">
The text displayed by <tt>TLiteral</tt> can be programmatically controlled by setting the <tt>Text</tt> property. The text displayed may be HTML-encoded if the <tt>Encode</tt> is true (the default value is false).
</p>
-<p>
+<p id="420285" class="block-content">
<tt>TLiteral</tt> will render the contents enclosed within its component tag if <tt>Text</tt> is empty.
</p>
-<p>
+<p id="420286" class="block-content">
Be aware, if <tt>Encode</tt> is false, make sure <tt>Text</tt> does not contain unwanted characters that may bring security vulnerabilities.
</p>
diff --git a/demos/quickstart/protected/pages/Controls/MultiView.page b/demos/quickstart/protected/pages/Controls/MultiView.page index a22711b6..03dca27e 100644 --- a/demos/quickstart/protected/pages/Controls/MultiView.page +++ b/demos/quickstart/protected/pages/Controls/MultiView.page @@ -3,13 +3,13 @@ <h1 id="3801">TMultiView</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TMultiView" />
-<p>
+<p id="430287" class="block-content">
<tt>TMultiView</tt> serves as a container for a group of <tt>TView</tt> controls, which can be retrieved by the <tt>Views</tt> property. Each view contains child controls. <tt>TMultiView</tt> determines which view and its child controls are visible. At any time, at most one view is visible (called <i>active</i>). To make a view active, set <tt>ActiveView</tt> or <tt>ActiveViewIndex</tt>. Note, by default there is no active view.
</p>
-<p>
+<p id="430288" class="block-content">
To add a view to <tt>TMultiView</tt>, manipulate the <tt>Views</tt> collection or add it in template as follows,
</p>
-<com:TTextHighlighter Language="prado" CssClass="source">
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_430109">
<com:TMultiView>
<com:TView>
view 1 content
@@ -20,21 +20,21 @@ To add a view to <tt>TMultiView</tt>, manipulate the <tt>Views</tt> collection o </com:TMultiView>
</com:TTextHighlighter>
-<p>
+<p id="430289" class="block-content">
<tt>TMultiView</tt> responds to the following command events to manage the visibility of its views.
</p>
-<ul>
+<ul id="u1" class="block-content">
<li><tt>NextView</tt> : switch to the next view (with respect to the currently active view).
<li><tt>PreviousView</tt> : switch to the previous view (with respect to the currently active view).
<li><tt>SwitchViewID</tt> : switch to a view by its ID path. The ID path is fetched from the command parameter.
<li><tt>SwitchViewIndex</tt> : switch to a view by its zero-based index in the <tt>Views</tt> collection. The index is fetched from the command parameter.
</ul>
-<p>
+<p id="430290" class="block-content">
Upon postback, if the active view index is changed, <tt>TMultiView</tt> will raise an <tt>OnActiveViewChanged</tt> event.
</p>
-<p>
+<p id="430291" class="block-content">
The <a href="?page=Fundamentals.Samples.Hangman.Home">Hangman game</a> is a typical use of <tt>TMultiView</tt>. The following example demonstrates another usage of <tt>TMultiView</tt>.
</p>
diff --git a/demos/quickstart/protected/pages/Controls/NewControl.page b/demos/quickstart/protected/pages/Controls/NewControl.page index 5662f848..d6cb52c5 100644 --- a/demos/quickstart/protected/pages/Controls/NewControl.page +++ b/demos/quickstart/protected/pages/Controls/NewControl.page @@ -1,39 +1,39 @@ <com:TContent ID="body" >
<h1 id="5401">Writing New Controls</h1>
-<p>
+<p id="660428" class="block-content">
Writing new controls is often desired by advanced programmers, because they want to reuse the code that they write for dealing with complex presentation and user interactions.
</p>
-<p>
+<p id="660429" class="block-content">
In general, there are two ways of writing new controls: composition of existing controls and extending existing controls. They all require that the new control inherit from <tt>TControl</tt> or its child classes.
</p>
<h2 id="5402">Composition of Existing Controls</h2>
-<p>
+<p id="660430" class="block-content">
Composition is the easiest way of creating new controls. It mainly involves instantiating existing controls, configuring them and making them the constituent components. The properties of the constituent components are exposed through <a href="?page=Fundamentals.Components">subproperties</a>.
</p>
-<p>
+<p id="660431" class="block-content">
One can compose a new control in two ways. One is to extend <tt>TCompositeControl</tt> and override the <tt>TControl::createChildControls()</tt> method. The other is to extend <tt>TTemplateControl</tt> (or its child classes) and write a control template. The latter is easier to use and can organize the layout constituent components more intuitively, while the former is more efficient because it does not require parsing of the template.
</p>
-<p>
+<p id="660432" class="block-content">
As an example, we show how to create a labeled textbox called <tt>LabeledTextBox</tt> using the above two approaches. A labeled textbox displays a label besides a textbox. We want reuse the PRADO provided <tt>TLabel</tt> and <tt>TTextBox</tt> to accomplish this task.
</p>
<h3 id="5404">Composition by Writing Templates</h3>
-<p>
+<p id="660433" class="block-content">
We need two files: a control class file named <tt>LabeledTextBox.php</tt> and a control template file named <tt>LabeledTextBox.tpl</tt>. Both must reside under the same directory.
</p>
-<p>
+<p id="660434" class="block-content">
Like creating a PRADO page, we can easily write down the content in the control template file.
</p>
-<com:TTextHighlighter Language="prado" CssClass="source">
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_660129">
<com:TLabel ID="Label" ForControl="TextBox" />
<com:TTextBox ID="TextBox" />
</com:TTextHighlighter>
-<p>
+<p id="660435" class="block-content">
The above template specifies a <tt>TLabel</tt> control named <tt>Label</tt> and a <tt>TTextBox</tt> control named <tt>TextBox</tt>. We would to expose these two controls. This can be done by defining a property for each control in the <tt>LabeledTextBox</tt> class file. For example, we can define a <tt>Label</tt> property as follows,
</p>
-<com:TTextHighlighter CssClass="source">
+<com:TTextHighlighter CssClass="source block-content" id="code_660130">
class LabeledTextBox extends TTemplateControl {
public function getLabel() {
$this->ensureChildControls();
@@ -41,19 +41,19 @@ class LabeledTextBox extends TTemplateControl { }
}
</com:TTextHighlighter>
-<p>
+<p id="660436" class="block-content">
In the above, the method call to <tt>ensureChildControls()</tt> ensures that both the label and the textbox controls are created (from template) when the <tt>Label</tt> property is accessed. The <tt>TextBox</tt> property can be implemented similarly.
</p>
<com:RunBar PagePath="Controls.Samples.LabeledTextBox1.Home" />
<h3 id="5405">Composition by Overriding <tt>createChildControls()</tt></h3>
-<p>
+<p id="660437" class="block-content">
For a composite control as simple as <tt>LabeledTextBox</tt>, it is better to create it by extending <tt>TCompositeControl</tt> and overriding the <tt>createChildControls()</tt> method, because it does not use templates and thus saves template parsing time.
</p>
-<p>
+<p id="660438" class="block-content">
Complete code for <tt>LabeledTextBox</tt> is shown as follows,
</p>
-<com:TTextHighlighter CssClass="source">
+<com:TTextHighlighter CssClass="source block-content" id="code_660131">
class LabeledTextBox extends TCompositeControl {
private $_label;
private $_textbox;
@@ -81,37 +81,37 @@ class LabeledTextBox extends TCompositeControl { <com:RunBar PagePath="Controls.Samples.LabeledTextBox2.Home" />
<h3 id="5406">Using <tt>LabeledTextBox</tt></h3>
-<p>
+<p id="660439" class="block-content">
To use <tt>LabeledTextBox</tt> control, first we need to include the corresponding class file. Then in a page template, we can write lines like the following,
</p>
-<com:TTextHighlighter Language="prado" CssClass="source">
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_660132">
<com:LabeledTextBox ID="Input" Label.Text="Username" />
</com:TTextHighlighter>
-<p>
+<p id="660440" class="block-content">
In the above, <tt>Label.Text</tt> is a subproperty of <tt>LabeledTextBox</tt>, which refers to the <tt>Text</tt> property of the <tt>Label</tt> property. For other details of using <tt>LabeledTextBox</tt>, see the above online examples.
</p>
<h2 id="5403">Extending Existing Controls</h2>
-<p>
+<p id="660441" class="block-content">
Extending existing controls is the same as conventional class inheritance. It allows developers to customize existing control classes by overriding their properties, methods, events, or creating new ones.
</p>
-<p>
+<p id="660442" class="block-content">
The difficulty of the task depends on how much an existing class needs to be customized. For example, a simple task could be to customize <tt>TLabel</tt> control, so that it displays a red label by default. This would merely involves setting the <tt>ForeColor</tt> property to <tt>"red"</tt> in the constructor. A difficult task would be to create controls that provide completely innovative functionalities. Usually, this requires the new controls extend from "low level" control classes, such as <tt>TControl</tt> or <tt>TWebControl</tt>.
</p>
-<p>
+<p id="660443" class="block-content">
In this section, we mainly introduce the base control classes <tt>TControl</tt> and <tt>TWebControl</tt>, showing how they can be customized. We also introduce how to write controls with specific functionalities, such as loading post data, raising post data and databinding with data source.
</p>
<h3 id="5407">Extending <tt>TControl</tt></h3>
-<p>
+<p id="660444" class="block-content">
<tt>TControl</tt> is the base class of all control classes. Two methods are of the most importance for derived control classes:
</p>
-<ul>
+<ul id="u1" class="block-content">
<li><tt>addParsedObject()</tt> - this method is invoked for each component or text string enclosed within the component tag specifying the control in a template. By default, the enclosed components and text strings are added into the <tt>Controls</tt> collection of the control. Derived controls may override this method to do special processing about the enclosed content. For example, <tt>TListControl</tt> only accepts <tt>TListItem</tt> components to be enclosed within its component tag, and these components are added into the <tt>Items</tt> collection of <tt>TListControl</tt>.
<li><tt>render()</tt> - this method renders the control. By default, it renders items in the <tt>Controls</tt> collection. Derived controls may override this method to give customized presentation.</li>
</ul>
Other important properties and methods include:
-<ul>
+<ul id="u2" class="block-content">
<li><tt>ID</tt> - a string uniquely identifying the control among all controls of the same naming container. An automatic ID will be generated if the ID property is not set explicitly.</li>
<li><tt>UnqiueID</tt> - a fully qualified ID uniquely identifying the control among all controls on the current page hierarchy. It can be used to locate a control in the page hierarchy by calling <tt>TControl::findControl()</tt> method. User input controls often use it as the value of the name attribute of the HTML input element.</li>
<li><tt>ClientID</tt> - similar to <tt>UniqueID</tt>, except that it is mainly used for presentation and is commonly used as HTML element id attribute value. Do not rely on the explicit format of <tt>ClientID</tt>.</li>
@@ -126,27 +126,27 @@ Other important properties and methods include: </ul>
<h3 id="5408">Extending <tt>TWebControl</tt></h3>
-<p>
+<p id="660445" class="block-content">
<tt>TWebControl</tt> is mainly used as a base class for controls representing HTML elements. It provides a set of properties that are common among HTML elements. It breaks the <tt>TControl::render()</tt> into the following methods that are more suitable for rendering an HTML element:
</p>
-<ul>
+<ul id="u3" class="block-content">
<li><tt>addAttributesToRender()</tt> - adds attributes for the HTML element to be rendered. This method is often overridden by derived classes as they usually have different attributes to be rendered.</li>
<li><tt>renderBeginTag()</tt> - renders the opening HTML tag.</li>
<li><tt>renderContents()</tt> - renders the content enclosed within the HTML element. By default, it displays the items in the <tt>Controls</tt> collection of the control. Derived classes may override this method to render customized contents.</li>
<li><tt>renderEndTag()</tt> - renders the closing HTML tag.</li>
</ul>
-<p>
+<p id="660446" class="block-content">
When rendering the openning HTML tag, <tt>TWebControl</tt> calls <tt>getTagName()</tt> to obtain the tag name. Derived classes may override this method to render different tag names.
</p>
<h3 id="5409">Creating Controls with Special Functionalities</h3>
-<p>
+<p id="660447" class="block-content">
If a control wants to respond to client-side events and translate them into server side events (called postback events), such as <tt>TButton</tt>, it has to implement the <tt>IPostBackEventHandler</tt> interface.
</p>
-<p>
+<p id="660448" class="block-content">
If a control wants to be able to load post data, such as <tt>TTextBox</tt>, it has to implement the <tt>IPostBackDataHandler</tt> interface.
</p>
-<p>
+<p id="660449" class="block-content">
If a control wants to get data from some external data source, it can extend <tt>TDataBoundControl</tt>. <tt>TDataBoundControl</tt> implements the basic properties and methods that are needed for populating data via databinding. In fact, controls like <tt>TListControl</tt>, <tt>TRepeater</tt> are <tt>TDataGrid</tt> are all derived from it.
</p>
</com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/OutputCache.page b/demos/quickstart/protected/pages/Controls/OutputCache.page index 6c1e5554..65823a7f 100644 --- a/demos/quickstart/protected/pages/Controls/OutputCache.page +++ b/demos/quickstart/protected/pages/Controls/OutputCache.page @@ -1,21 +1,21 @@ <com:TContent ID="body" >
-<h1>TOutputCache</h1>
+<h1 id="88025">TOutputCache</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TOutputCache" />
-<p>
+<p id="440292" class="block-content">
<tt>TOutputCache</tt> enables caching a portion of a Web page, also known as partial caching. The content being cached are HTML page source coming from static texts on a PRADO template or rendered by one or several controls on the template. When the cached content is used, controls generating the content are no longer created for the page hierarchy and thus significant savings in page processing time can be achieved. The side-effect, as you might already find out, is that the content displayed may be stale if the cached version is shown to the users.
</p>
-<p>
+<p id="440293" class="block-content">
To use <tt>TOutputCache</tt>, simply enclose the content to be cached within the <tt>TOutputCache</tt> component tag on a template (either page or non-page control template), e.g.,
</p>
-<com:TTextHighlighter Language="xml" CssClass="source">
+<com:TTextHighlighter Language="xml" CssClass="source block-content" id="code_440110">
<com:TOutputCache>
content to be cached
</com:TOutputCache>
</com:TTextHighlighter>
-<p>
+<p id="440294" class="block-content">
where content to be cached can be static text and/or template tags. If the latter, the rendering results of the template tags will be cached. You can place one or several <tt>TOutputCache</tt> on a single template and they can be nested.
</p>
@@ -23,23 +23,23 @@ where content to be cached can be static text and/or template tags. If the latte <tt>TOutputCache</tt> stores cached content via PRADO cache modules (e.g. <tt>TSqliteCache</tt>) and thus requires at least one cache module loaded when the application runs.
</div>
-<p>
+<p id="440295" class="block-content">
The validity of the cached content is determined based on two factors: the <tt>Duration</tt> and the cache dependency. The former specifies the number of seconds that the data can remain valid in cache (defaults to 60s), while the latter specifies conditions that the cached data depends on. If a dependency changes (e.g. relevant data in DB are updated), the cached data will be invalidated and discarded.
</p>
-<p>
+<p id="440296" class="block-content">
There are two ways to specify cache dependency. One may write event handlers to respond to the <tt>OnCheckDependency</tt> event and set the event parameter's <tt>IsValid</tt> property to indicate whether the cached data remains valid or not. One can also extend <tt>TOutputCache</tt> and override its <tt>getCacheDependency()</tt> method.
</p>
-<p>
+<p id="440297" class="block-content">
The content fetched from cache may be variated with respect to some parameters. <tt>TOutputCache</tt> supports variation with respect to request parameters, which is specified by <tt>VaryByParam</tt> property. If a specified request parameter is different, a different version of cached content is used. This is extremely useful if a page's content may be variated according to some GET parameters. The content being cached may also be variated with user sessions if <tt>VaryBySession</tt> is set true. To variate the cached content by other factors, override <tt>calculateCacheKey()</tt> method.
</p>
-<p>
+<p id="440298" class="block-content">
Output caches can be nested. An outer cache takes precedence over an inner cache in determining the validity of cached contents. This means, if the content cached by the inner cache expires or is invalidated, while that by the outer cache not, the outer cached content will be used.
</p>
-<p>
+<p id="440299" class="block-content">
By default, <tt>TOutputCache</tt> is effective only for non-postback page requests and when a cache module is enabled. Do not attempt to address child controls of <tt>TOutputCache</tt> when the cached content is currently being used. Use <tt>ContentCached</tt> property to determine whether the content is cached or not.
</p>
diff --git a/demos/quickstart/protected/pages/Controls/Pager.page b/demos/quickstart/protected/pages/Controls/Pager.page index 20b33b95..af2e4b0a 100644 --- a/demos/quickstart/protected/pages/Controls/Pager.page +++ b/demos/quickstart/protected/pages/Controls/Pager.page @@ -3,33 +3,33 @@ <h1 id="3901">TPager</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TPager" />
-<p>
+<p id="450300" class="block-content">
<tt>TPager</tt> creates a pager that provides UI for end-users to interactively specify which page of data to be rendered in a <tt>TDataBoundControl</tt>-derived control, such as <tt>TDataList</tt>, <tt>TRepeater</tt>, <tt>TCheckBoxList</tt>, etc. The target data-bound control is specified by the <tt>ControlToPaginate</tt> property, which must be the ID path of the target control reaching from the pager's naming container.
</p>
-<p>
+<p id="450301" class="block-content">
Note, the target data-bound control must have its <tt>AllowPaging</tt> set to true. Otherwise the pager will be invisible. Also, in case when there is only one page of data available, the pager will also be invisible.
</p>
-<p>
+<p id="450302" class="block-content">
<tt>TPager</tt> can display one of the following three types of user interface, specified via its <tt>Mode</tt> property:
</p>
-<ul>
+<ul id="u1" class="block-content">
<li><tt>NextPrev</tt> - a next page and a previous page button are rendered on each page.</li>
<li><tt>Numeric</tt> - a list of page index buttons are rendered.</li>
<li><tt>DropDownList</tt> - a dropdown list of page indices is rendered.</li>
</ul>
-<p>
+<p id="450303" class="block-content">
These user interfaces may be further customized by configuring the following properties
</p>
-<ul>
+<ul id="u2" class="block-content">
<li><tt>NextPageText</tt> and <tt>PrevPageText</tt> - the label of the next/previous page button. These properties are used when the pager <tt>Mode</tt> is <tt>NextPrev</tt> or <tt>Numeric</tt>.</li>
<li><tt>FirstPageText</tt> and <tt>LastPageText</tt> - the label of the first/last page button. If empty, the corresponding button will not be displayed. These properties are used when the pager <tt>Mode</tt> is <tt>NextPrev</tt> or <tt>Numeric</tt>.</li>
<li><tt>PageButtonCount</tt> - the maximum number of page index buttons on a page. This property is used when the pager <tt>Mode</tt> is <tt>Numeric</tt>.</li>
<li><tt>ButtonType</tt> - type of page buttons, either <tt>PushButton</tt> meaning normal form submission buttons, or <tt>LinkButton</tt> meaning hyperlink buttons.</li>
</ul>
-<p>
+<p id="450304" class="block-content">
<tt>TPager</tt> raises an <tt>OnPageIndexChanged</tt> event when an end-user interacts with it and specifies a new page (e.g. by clicking on a next page button that would lead to the next page.) Developers may write handlers to respond to this event and obtain the desired new page index from the event parameter's property <tt>NewPageIndex</tt>. Using this new page index, one can feed a new page of data to the associated data-bound control.
</p>
diff --git a/demos/quickstart/protected/pages/Controls/Panel.page b/demos/quickstart/protected/pages/Controls/Panel.page index be36095b..4f4f9b14 100644 --- a/demos/quickstart/protected/pages/Controls/Panel.page +++ b/demos/quickstart/protected/pages/Controls/Panel.page @@ -3,7 +3,7 @@ <h1 id="3901">TPanel</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TPanel" />
-<p>
+<p id="460305" class="block-content">
<tt>TPanel</tt> acts as a presentational container for other control. It displays a <div> 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 set <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" />
diff --git a/demos/quickstart/protected/pages/Controls/PlaceHolder.page b/demos/quickstart/protected/pages/Controls/PlaceHolder.page index b55d1616..482b3b85 100644 --- a/demos/quickstart/protected/pages/Controls/PlaceHolder.page +++ b/demos/quickstart/protected/pages/Controls/PlaceHolder.page @@ -3,7 +3,7 @@ <h1 id="4001">TPlaceHolder</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TPlaceHolder" />
-<p>
+<p id="470306" class="block-content">
<tt>TPlaceHolder</tt> reserves a place on a template, where static texts or controls may be dynamically inserted.
</p>
diff --git a/demos/quickstart/protected/pages/Controls/RadioButton.page b/demos/quickstart/protected/pages/Controls/RadioButton.page index b40f37bd..bdf5dee2 100644 --- a/demos/quickstart/protected/pages/Controls/RadioButton.page +++ b/demos/quickstart/protected/pages/Controls/RadioButton.page @@ -3,7 +3,7 @@ <h1 id="4101">TRadioButton</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TRadioButton" />
-<p>
+<p id="480307" class="block-content">
<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" />
diff --git a/demos/quickstart/protected/pages/Controls/Repeater.page b/demos/quickstart/protected/pages/Controls/Repeater.page index 3534c603..76a22e11 100644 --- a/demos/quickstart/protected/pages/Controls/Repeater.page +++ b/demos/quickstart/protected/pages/Controls/Repeater.page @@ -1,23 +1,23 @@ <com:TContent ID="body" >
<h1 id="5301">TRepeater</h1>
-<p>
+<p id="600400" class="block-content">
TRepeater displays its content defined in templates repeatedly based on the given data specified by the <tt>DataSource</tt> or <tt>DataSourceID</tt> property. The repeated contents can be retrieved from the <tt>Items</tt> property. Each item is created by instantiating a template and each is a child control of the repeater.
</p>
-<p>
+<p id="600401" class="block-content">
Like normal control templates, the repeater templates can contain static text, controls and special tags, which after instantiation, become child contents of the corresponding item. TRepeater defines five templates for different purposes,
</p>
-<ul>
+<ul id="u1" class="block-content">
<li><tt>HeaderTemplate</tt> - the template used for displaying content at the beginning of a repeater;</li>
<li><tt>FooterTemplate</tt> - the template used for displaying content at the end of a repeater;</li>
<li><tt>ItemTemplate</tt> - the template used for displaying every repeater item. If <tt>AlternatingItemTemplate</tt> is also defined, <tt>ItemTemplate</tt> will be used for displaying item 1, 3, 5, etc.</li>
<li><tt>AlternatingItemTemplate</tt> - the template used for displaying every alternating repeater item (i.e., item 2, 4, 6, etc.)</li>
<li><tt>SeparatorTemplate</tt> - the template used for displaying content between items.</li>
</ul>
-<p>
+<p id="600402" class="block-content">
To populate data into the repeater items, set <tt>DataSource</tt> to a valid data object, such as array, <tt>TList</tt>, <tt>TMap</tt>, or a database table, and then call <tt>dataBind()</tt> for the repeater. That is,
</p>
-<com:TTextHighlighter Language="php" CssClass="source">
+<com:TTextHighlighter Language="php" CssClass="source block-content" id="code_600125">
class MyPage extends TPage {
public function onLoad($param) {
parent::onLoad($param);
@@ -28,32 +28,32 @@ class MyPage extends TPage { }
}
</com:TTextHighlighter>
-<p>
+<p id="600403" class="block-content">
Normally, you only need to do this when the page containing the repeater is initially requested. In postbacks, TRepeater is smart enough to remember the previous state, i.e., contents populated with datasource information.The following sample displays tabular data using TRepeater.
</p>
-<p>
+<p id="600404" class="block-content">
TRepeater provides several events to facilitate manipulation of its items,
</p>
-<ul>
+<ul id="u2" class="block-content">
<li><tt>OnItemCreated</tt> - raised each time an item is newly created. When the event is raised, data and child controls are both available for the new item.</li>
<li><tt>OnItemDataBound</tt> - raised each time an item just completes databinding. When the event is raised, data and child controls are both available for the item, and the item has finished databindings of itself and all its child controls.</li>
<li><tt>OnItemCommand</tt> - raised when a child control of some item (such as a <tt>TButton</tt>) raises an <tt>OnCommand</tt> event.</li>
</ul>
-<p>
+<p id="600405" class="block-content">
The following example shows how to use TRepeater to display tabular data.
</p>
<com:RunBar PagePath="Controls.Samples.TRepeater.Sample1" />
-<p>
+<p id="600406" class="block-content">
TRepeater can be used in more complex situations. As an example, we show in the following how to use nested repeaters, i.e., repeater in repeater. This is commonly seen in presenting master-detail data. To use a repeater within another repeater, for an item for the outer repeater is created, we need to set the detail data source for the inner repeater. This can be achieved by responding to the <tt>OnItemDataBound</tt> event of the outer repeater. An <tt>OnItemDataBound</tt> event is raised each time an outer repeater item completes databinding. In the following example, we exploit another event of repeater called <tt>OnItemCreated</tt>, which is raised each time a repeater item (and its content) is newly created. We respond to this event by setting different background colors for repeater items to achieve alternating item background display. This saves us from writing an <tt>AlternatingItemTemplate</tt> for the repeaters.
</p>
<com:RunBar PagePath="Controls.Samples.TRepeater.Sample2" />
-<p>
+<p id="600407" class="block-content">
Besides displaying data, TRepeater can also be used to collect data from users. Validation controls can be placed in TRepeater templates to verify that user inputs are valid.
</p>
-<p>
+<p id="600408" class="block-content">
The <a href="../composer/index.php">PRADO component composer</a> demo is a good example of such usage. It uses a repeater to collect the component property and event definitions. Users can also delete or adjust the order of the properties and events, which is implemented by responding to the <tt>OnItemCommand</tt> event of repeater.
</p>
-<p>
+<p id="600409" class="block-content">
See in the following yet another example showing how to use repeater to collect user inputs.
</p>
<com:RunBar PagePath="Controls.Samples.TRepeater.Sample3" />
diff --git a/demos/quickstart/protected/pages/Controls/SafeHtml.page b/demos/quickstart/protected/pages/Controls/SafeHtml.page index 995ceb50..1e02bb9e 100644 --- a/demos/quickstart/protected/pages/Controls/SafeHtml.page +++ b/demos/quickstart/protected/pages/Controls/SafeHtml.page @@ -3,10 +3,10 @@ <h1 id="4201">TSafeHtml</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TSafeHtml" />
-<p>
+<p id="490308" class="block-content">
<tt>TSafeHtml</tt> is a control that strips down all potentially dangerous HTML content. It is mainly a wrapper of the <a href="http://pixel-apes.com/safehtml/">SafeHTML</a> project. According to the SafeHTML project, it tries to safeguard the following situations when the string is to be displayed to end-users:
</p>
-<ul>
+<ul id="u1" class="block-content">
<li>Opening tag without its closing tag</li>
<li>closing tag without its opening tag
<li>any of these tags: base, basefont, head, html, body, applet, object, iframe, frame, frameset, script, layer, ilayer, embed, bgsound, link, meta, style, title, blink, xml, etc.</li>
@@ -16,7 +16,7 @@ <li>any other active content.</li>
</ul>
-<p>
+<p id="490309" class="block-content">
To use <tt>TSafeHtml</tt>, simply enclose the content to be secured within the <tt>TSafeHtml</tt> component tag in a template. The content may consist of both static text and PRADO controls. If the latter, the rendering result of the controls will be secured.
</p>
diff --git a/demos/quickstart/protected/pages/Controls/Standard.page b/demos/quickstart/protected/pages/Controls/Standard.page index f19bc07e..6ea2d52a 100644 --- a/demos/quickstart/protected/pages/Controls/Standard.page +++ b/demos/quickstart/protected/pages/Controls/Standard.page @@ -2,7 +2,7 @@ <h1>Standard Controls</h1>
<p>* the tutorial for this control is not completed yet.</p>
-<ul>
+<ul id="u1" class="block-content">
<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>
diff --git a/demos/quickstart/protected/pages/Controls/Statements.page b/demos/quickstart/protected/pages/Controls/Statements.page index 3f3bd1fc..f8bb4928 100644 --- a/demos/quickstart/protected/pages/Controls/Statements.page +++ b/demos/quickstart/protected/pages/Controls/Statements.page @@ -3,10 +3,10 @@ <h1 id="4301">TStatements</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TStatements" />
-<p>
+<p id="500310" class="block-content">
<tt>TStatements</tt> evaluates a sequence of PHP statements and displays the content rendered by the statements. To specify the PHP statements to be evaluated, set the <tt>Statements</tt> property. For example, the following component tag displays the current time on the Web page,
</p>
-<com:TTextHighlighter Language="prado" CssClass="source">
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_500111">
<com:TStatements>
<prop:Statements>
setlocale(LC_ALL, 'nl_NL');
@@ -15,14 +15,14 @@ </com:TStatements>
</com:TTextHighlighter>
-<p>
+<p id="500311" class="block-content">
Note, <tt>TStatements</tt> evaluates the PHP statements during the rendering control lifecycle. Unlike <tt>TExpression</tt>, <tt>TStatements</tt> only displays the content 'echoed' within the statements.
</p>
-<p>
+<p id="500312" class="block-content">
The context of the statements in a <tt>TStatements</tt> control is the control itself. That is, <tt>$this</tt> represents the control object if it is present in the statements. For example, the following statement tag will display the title of the page containing the <tt>TStatements</tt> control.
</p>
-<com:TTextHighlighter Language="prado" CssClass="source">
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_500112">
<com:TStatements>
<prop:Statements>
$page=$this->Page;
@@ -31,7 +31,7 @@ The context of the statements in a <tt>TStatements</tt> control is the control i </com:TStatements>
</com:TTextHighlighter>
-<p>
+<p id="500313" class="block-content">
Be aware, since <tt>TStatements</tt> allows execution of arbitrary PHP code, in general you should not use it to evaluate PHP code submitted by your application users.
</p>
diff --git a/demos/quickstart/protected/pages/Controls/Table.page b/demos/quickstart/protected/pages/Controls/Table.page index e0f5586e..ab9e6c1f 100644 --- a/demos/quickstart/protected/pages/Controls/Table.page +++ b/demos/quickstart/protected/pages/Controls/Table.page @@ -3,7 +3,7 @@ <h1 id="4401">TTable</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TTable" />
-<p>
+<p id="510314" class="block-content">
<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" />
diff --git a/demos/quickstart/protected/pages/Controls/TextBox.page b/demos/quickstart/protected/pages/Controls/TextBox.page index b4d1576f..c5fee17e 100644 --- a/demos/quickstart/protected/pages/Controls/TextBox.page +++ b/demos/quickstart/protected/pages/Controls/TextBox.page @@ -3,7 +3,7 @@ <h1 id="4501">TTextBox</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TTextBox" />
-<p>
+<p id="520315" class="block-content">
<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" />
diff --git a/demos/quickstart/protected/pages/Controls/TextHighlighter.page b/demos/quickstart/protected/pages/Controls/TextHighlighter.page index 285a6f3e..b9ac1834 100644 --- a/demos/quickstart/protected/pages/Controls/TextHighlighter.page +++ b/demos/quickstart/protected/pages/Controls/TextHighlighter.page @@ -3,16 +3,16 @@ <h1 id="4601">TTextHighlighter</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TTextHighlighter" />
-<p>
+<p id="530316" class="block-content">
<tt>TTextHighlighter</tt> does syntax highlighting for its body content, including both static text and the rendering results of its child controls. The text being highlighted follows the syntax of the specified <tt>Language</tt>, which can be 'php' (default), 'prado', 'css', 'html', etc. Here, 'prado' stands for the syntax of PRADO control templates.
</p>
-<p>
+<p id="530317" class="block-content">
If line numbers are desired in front of each line, set <tt>ShowLineNumbers</tt> to true.
</p>
-<p>
+<p id="530318" class="block-content">
To use <tt>TTextHighlighter</tt>, simply enclose the contents to be syntax highlighted within the body of a <tt>TTextHighlighter</tt> control. The following example highlights a piece of PHP code,
</p>
-<com:TTextHighlighter Language="prado" CssClass="source">
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_530113">
<com:TTextHighlighter ShowLineNumbers="true">
<?php
$str = 'one|two|three|four';
diff --git a/demos/quickstart/protected/pages/Controls/Validation.page b/demos/quickstart/protected/pages/Controls/Validation.page index 0e4006bb..7770c130 100644 --- a/demos/quickstart/protected/pages/Controls/Validation.page +++ b/demos/quickstart/protected/pages/Controls/Validation.page @@ -2,18 +2,18 @@ <h1 id="4901">Validation Controls</h1>
-<p>
+<p id="560337" class="block-content">
Validation controls, called validators, perform validation on user-entered data values when they are post back to the server. The validation is triggered by a postback control, such as a <tt>TButton</tt>, a <tt>TLinkButton</tt> or a <tt>TTextBox</tt> (under <tt>AutoPostBack</tt> mode) whose <tt>CausesValidation</tt> property is true.
</p>
-<p>
+<p id="560338" class="block-content">
Validation is always performed on server side. If <tt>EnableClientScript</tt> is true and the client browser supports JavaScript, validators may also perform client-side validation. Client-side validation will validate user input before it is sent to the server. The form data will not be submitted if any error is detected. This avoids the round-trip of information necessary for server-side validation.
</p>
-<p>
+<p id="560339" class="block-content">
Validators share a common set of properties, which are defined in the base class <tt>TBaseValidator</tt> class and listed as follows,
</p>
-<ul>
+<ul id="u1" class="block-content">
<li><tt>ControlToValidate</tt> specifies the input control to be validated. This property must be set to the ID path of an input control. An ID path is the dot-connected IDs of the controls reaching from the validator's naming container to the target control.</li>
<li><tt>ErrorMessage</tt> specifies the error message to be displayed in case the corresponding validator fails.</li>
<li><tt>Text</tt> is similar to <tt>ErrorMessage</tt>. If they are both present, <tt>Text</tt> takes precedence. This property is useful when used together with <tt>TValidationSummary</tt>.</li>
@@ -33,17 +33,17 @@ Validators share a common set of properties, which are defined in the base class <a name="TRequiredFieldValidator"></a>
<h2 id="4902">TRequiredFieldValidator</h2>
-<p>
+<p id="560340" class="block-content">
TRequiredFieldValidator ensures that the user enters some data in the specified input field. By default, TRequiredFieldValidator will check if the user input is empty or not. The validation fails if the input is empty. By setting <tt>InitialValue</tt>, the validator can check if the user input is different from <tt>InitialValue</tt>. If not, the validation fails.
</p>
<com:RunBar PagePath="Controls.Samples.TRequiredFieldValidator.Home" />
<a name="TRegularExpressionValidator"></a>
<h2 id="4903">TRegularExpressionValidator</h2>
-<p>
+<p id="560341" class="block-content">
TRegularExpressionValidator verifies the user input against a regular pattern. The validation fails if the input does not match the pattern. The regular expression can be specified by the <tt>RegularExpression</tt> property. Some commonly used regular expressions include:
</p>
-<ul>
+<ul id="u2" class="block-content">
<li>At least 6 characters: <code>[\w]{6,}</code></li>
<li>Japanese Phone Number: <code>(0\d{1,4}-|\(0\d{1,4}\) ?)?\d{1,4}-\d{4}</code></li>
<li>Japanese Postal Code: <code>\d{3}(-(\d{4}|\d{2}))?</code></li>
@@ -54,49 +54,49 @@ TRegularExpressionValidator verifies the user input against a regular pattern. T <li>U.S. ZIP Code: <code>\d{5}(-\d{4})?</code></li>
<li>U.S. Social Security Number: <code>\d{3}-\d{2}-\d{4}</code></li>
</ul>
-<p>
+<p id="560342" class="block-content">
More regular expression patterns can be found on the Internet, e.g.
<a href="http://regexlib.com/">http://regexlib.com/</a>.
</p>
-<p>
+<p id="560343" class="block-content">
Note, TRegularExpressionValidator only checks for nonempty user input. Use a TRequiredFieldValidator to ensure the user input is not empty.
</p>
<com:RunBar PagePath="Controls.Samples.TRegularExpressionValidator.Home" />
<h2 id="TEmailAddressValidator">TEmailAddressValidator</h2>
-<p>
+<p id="560344" class="block-content">
TEmailAddressValidator verifies that the user input is a valid email address. The validator uses a regular expression to check if the input is in a valid email address format. If <tt>CheckMXRecord</tt> is true, the validator will also check whether the MX record indicated by the email address is valid, provided <tt>checkdnsrr()</tt> is available in the installed PHP.
</p>
-<p>
+<p id="560345" class="block-content">
Note, if the input being validated is empty, TEmailAddressValidator will not do validation. Use a TRequiredFieldValidator to ensure the value is not empty.
</p>
<com:RunBar PagePath="Controls.Samples.TEmailAddressValidator.Home" />
<a name="TCompareValidator"></a>
<h2 id="4904">TCompareValidator</h2>
-<p>
+<p id="560346" class="block-content">
TCompareValidator compares the user input with a constant value specified by <tt>ValueToCompare</tt>, or another user input specified by <tt>ControlToCompare</tt>. The <tt>Operator</tt> property specifies how to compare the values, which includes <tt>Equal</tt>, <tt>NotEqual</tt>, <tt>GreaterThan</tt>, <tt>GreaterThanEqual</tt>, <tt>LessThan</tt> and <tt>LessThanEqual</tt>. Before comparison, the values being compared will be converted to the type specified by <tt>DataType</tt> listed as follows,
</p>
-<ul>
+<ul id="u3" class="block-content">
<li><tt>String</tt> - A string data type.</li>
<li><tt>Integer</tt> - A 32-bit signed integer data type.</li>
<li><tt>Float</tt> - A double-precision floating point number data type.</li>
<li><tt>Date</tt> - A date data type. The date format can be specified by setting <tt>DateFormat</tt> property, which must be recognizable by <tt>TSimpleDateFormatter</tt>. If the property is not set, the GNU date syntax is assumed.</li>
</ul>
-<p>
+<p id="560347" class="block-content">
Note, if the input being validated is empty, TEmailAddressValidator will not do validation. Use a TRequiredFieldValidator to ensure the value is not empty.
</p>
-<p>
+<p id="560348" class="block-content">
<b>N.B.</b> If validating against a <a href="?page=Controls.DatePicker">TDatePicker</a> the <tt>DataType</tt> must be equal to "Date" and the <tt>DateFormat</tt> property of the validator must be equal to the <tt>DateFormat</tt> of the <a href="?page=Controls.DatePicker">TDatePicker</a>.
</p>
<com:RunBar PagePath="Controls.Samples.TCompareValidator.Home" />
<a name="TDataTypeValidator"></a>
<h2 id="4905">TDataTypeValidator</h2>
-<p>
+<p id="560349" class="block-content">
TDataTypeValidator verifies if the input data is of specific type indicated by <tt>DataType</tt>. The data types that can be checked against are the same as those in TCompareValidator.
</p>
-<p>
+<p id="560350" class="block-content">
<b>N.B.</b> If validating against a <a href="?page=Controls.DatePicker">TDatePicker</a> the <tt>DataType</tt> must be equal to "Date" and the <tt>DateFormat</tt> property of the validator must be equal to the <tt>DateFormat</tt> of the <a href="?page=Controls.DatePicker">TDatePicker</a>.
</p>
@@ -105,10 +105,10 @@ TDataTypeValidator verifies if the input data is of specific type indicated by < <a name="TRangeValidator"></a>
<h2 id="4906">TRangeValidator</h2>
-<p>
+<p id="560351" class="block-content">
TRangeValidator verifies whether an input value is within a specified range. TRangeValidator uses three key properties to perform its validation. The <tt>MinValue</tt> and <tt>MaxValue</tt> properties specify the minimum and maximum values of the valid range. The <tt>DataType</tt> property specifies the data type of the value being validated. The value will be first converted into the specified type and then compare with the valid range. The data types that can be checked against are the same as those in TCompareValidator.
</p>
-<p>
+<p id="560352" class="block-content">
<b>N.B.</b> If validating against a <a href="?page=Controls.DatePicker">TDatePicker</a> the <tt>DataType</tt> must be equal to "Date" and the <tt>DateFormat</tt> property of the validator must be equal to the <tt>DateFormat</tt> of the <a href="?page=Controls.DatePicker">TDatePicker</a>.
</p>
@@ -116,16 +116,16 @@ TRangeValidator verifies whether an input value is within a specified range. TRa <a name="TCustomValidator"></a>
<h2 id="4907">TCustomValidator</h2>
-<p>
+<p id="560353" class="block-content">
TCustomValidator performs user-defined validation (either server-side or client-side or both) on an input control.
</p>
-<p>
+<p id="560354" class="block-content">
To create a server-side validation function, provide a handler for the <tt>OnServerValidate</tt> event that performs the validation. The data string of the input control to validate can be accessed by the event parameter's <tt>Value</tt> property. The result of the validation should be stored in the <tt>IsValid</tt> property of the parameter.
</p>
-<p>
+<p id="560355" class="block-content">
To create a client-side validation function, add the client-side validation javascript function to the page template and assign its name to the <tt>ClientValidationFunction</tt> property. The function should have the following signature:
</p>
-<com:TTextHighlighter Language="javascript" CssClass="source">
+<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_560118">
<script type="text/javascript">
function ValidationFunctionName(sender, parameter)
{
@@ -140,30 +140,30 @@ function ValidationFunctionName(sender, parameter) <a name="TValidationSummary"></a>
<h2 id="4908">TValidationSummary</h2>
-<p>
+<p id="560356" class="block-content">
TValidationSummary displays a summary of validation errors inline on a Web page, in a message box, or both.
</p>
-<p>
+<p id="560357" class="block-content">
By default, a validation summary will collect <tt>ErrorMessage</tt> of all failed validators on the page. If <tt>ValidationGroup</tt> is not empty, only those validators who belong to the group will show their error messages in the summary.
</p>
-<p>
+<p id="560358" class="block-content">
The summary can be displayed as a list, a bulleted list, or a single paragraph based on the <tt>DisplayMode</tt> property. The messages shown can be prefixed with <tt>HeaderText</tt>. The summary can be displayed on the Web page or in a JavaScript message box, by setting the <tt>ShowSummary</tt> and <tt>ShowMessageBox</tt> properties, respectively. Note, the latter is only effective when <tt>EnableClientScript</tt> is true.
</p>
<com:RunBar PagePath="Controls.Samples.TValidationSummary.Home" />
<h2 id="5301">Client and Server Side Conditional Validation</h2>
-<p>
- All validators contains the following events.
- <ul>
+<p id="560359" class="block-content">
+ All validators contains the following events.
+ The corresponding events for the client side is available as sub-properties
+ of the <tt>ClientSide</tt> property of the validator.
+</p>
+ <ul id="u4" class="block-content">
<li>The <tt>OnValidate</tt> event is raise before the validator validation functions are called.</li>
<li>The <tt>OnValidationSuccess</tt> event is raised after the validator has successfully validate the control.</li>
<li>The <tt>OnValidationError</tt> event is raised after the validator fails validation.</li>
</ul>
- The corresponding events for the client side is available as sub-properties
- of the <tt>ClientSide</tt> property of the validator.
-</p>
-<p>The following example pop-up a message saying "hello" when the validator fails on the client-side.
-<com:TTextHighlighter Language="prado" CssClass="source">
+<p id="560360" class="block-content">The following example pop-up a message saying "hello" when the validator fails on the client-side.
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_560119">
<com:TRequiredFieldValidator ... >
<prop:ClientSide.OnValidationError>
alert("hello");
@@ -171,7 +171,7 @@ The summary can be displayed as a list, a bulleted list, or a single paragraph b </com:TRequiredFieldValidator>
</com:TTextHighlighter>
The resulting client-side event callback function is of the following form.
-<com:TTextHighlighter Language="javascript" CssClass="source">
+<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_560120">
function onErrorHandler(sender, parameter)
{
alert("hello");
@@ -181,7 +181,7 @@ Where <tt>sender</tt> is the current client-side validator and <tt>parameter</tt is the control that invoked the validator.
</p>
<h3 id="5302">Conditional Validation Example</h3>
-<p>
+<p id="560361" class="block-content">
The following example show the use of client-side and server side validator events. The example
demonstrates conditional validation.
<com:RunBar PagePath="Controls.Samples.TClientSideValidator.Home" />
diff --git a/demos/quickstart/protected/pages/Controls/Wizard.page b/demos/quickstart/protected/pages/Controls/Wizard.page index fe910aa7..8705eeb2 100644 --- a/demos/quickstart/protected/pages/Controls/Wizard.page +++ b/demos/quickstart/protected/pages/Controls/Wizard.page @@ -4,24 +4,24 @@ <com:DocLink ClassPath="System.Web.UI.WebControls.TWizard" />
<h2 id="4702">Overview</h2>
-<p>
+<p id="540319" class="block-content">
<tt>TWizard</tt> is analogous to the installation wizard commonly used to install software on Windows. It splits a large form and presents the user with a series of smaller forms, called wizard steps, to complete. The following figure shows how a wizard is composed of when presented to users, where <tt>step content</tt> is the main content of a wizard step for users to complete, <tt>header</tt> refers to header content common to all steps, <tt>navigation</tt> contains buttons that allow users to navigate step by step, and <tt>side bar</tt> contains a list of hyperlinks by which users can reach to any step with one click. The visibility of the side bar can be toggled by setting <tt>ShowSideBar</tt>.
</p>
<img src="<%~wizard.gif%>" alt="components of wizard" />
-<p>
+<p id="540320" class="block-content">
By default, <tt>TWizard</tt> embeds the above components in an HTML table so that the side bar is displayed on the left while the rest on the right. If <tt>UseDefaultLayout</tt> is set to false, no HTML table will be used, and developers should use pure CSS techniques to position the wizard components. Note, each component is displayed as a <div> and the wizard itself is also a <div> that encloses its components' <div>.
</p>
-<p>
+<p id="540321" class="block-content">
Wizard steps are represented by <tt>TWizardStep</tt> and are maintained in <tt>TWizard</tt> through its <tt>WizardSteps</tt> property. At any time, only one step is visible, which is determined by the <tt>ActiveStep</tt> property. The <tt>ActiveStepIndex</tt> property gives the index of the active step in the step collection. Clicking on navigation buttons can activate different wizard steps.
</p>
-<p>
+<p id="540322" class="block-content">
Wizard steps are typically added to a wizard through template as follows,
</p>
-<com:TTextHighlighter Language="prado" CssClass="source">
+<com:TTextHighlighter Language="prado" CssClass="source block-content" id="code_540114">
<com:TWizard>
<com:TWizardStep Title="step 1" StepType="Start">
content in step 1, may contain other controls
@@ -37,10 +37,10 @@ Wizard steps are typically added to a wizard through template as follows, </com:TWizard>
</com:TTextHighlighter>
-<p>
+<p id="540323" class="block-content">
In the above, <tt>StepType</tt> refers to the type of a wizard step, which can affect how the navigation appearance and behavior of the step. A wizard step can be of one of the following types:
</p>
-<ul>
+<ul id="u1" class="block-content">
<li><tt>Start</tt> - the first step in the wizard.</li>
<li><tt>Step</tt> - the internal steps in the wizard.</li>
<li><tt>Finish</tt> - the last step that allows user interaction.</li>
@@ -52,16 +52,16 @@ In the above, <tt>StepType</tt> refers to the type of a wizard step, which can a <h2 id="4703">Using TWizard</h2>
<h3 id="4704">A Single-Step Wizard Sample</h3>
-<p>
+<p id="540324" class="block-content">
In this sample, we use wizard to collect user's preference of color. In the first step, the user is presented with a dropdown list from which he can choose hist favorite color. In the second step, the complete step, his choice in the previous step is displayed. In real application, at this step the choice may be stored in database in the backend.
</p>
<com:RunBar PagePath="Controls.Samples.TWizard.Sample1" />
<h3 id="4705">Customizing Wizard Styles</h3>
-<p>
+<p id="540325" class="block-content">
<tt>TWizard</tt> defines a whole set of properties for customization of appearance of its various components as shown in the above figure. In particular, the following properties are provided for style customization:
</p>
-<ul>
+<ul id="u2" class="block-content">
<li>Header - <tt>HeaderStyle</tt>.</li>
<li>Step - <tt>StepStyle</tt>.</li>
<li>Navigation - <tt>NavigationStyle</tt>, <tt>StartNextButtonStyle</tt>, <tt>StepNextButtonStyle</tt>, <tt>StepPreviousButtonStyle</tt>, <tt>FinishPreviousButtonStyle</tt>, <tt>FinishCompleteButtonStyle</tt>, <tt>CancelButtonStyle</tt>.</li>
@@ -70,10 +70,10 @@ In this sample, we use wizard to collect user's preference of color. In the firs <com:RunBar PagePath="Controls.Samples.TWizard.Sample2" />
<h3 id="4706">Customizing Wizard Navigation</h3>
-<p>
+<p id="540326" class="block-content">
Given a set of wizard steps, <tt>TWizard</tt> supports three different ways of navigation among them:
</p>
-<ul>
+<ul id="u3" class="block-content">
<li>Bidirectional - Users can navigate forward and backward along a sequence of wizard steps. User input data is usually collected at the last step. This is also known as commit-at-the-end model. It is the default navigation way that <tt>TWizard</tt> supports.</li>
<li>Unidirectional - Users can navigate forward along a sequence of wizard steps. Backward move is not allowed. User input data is usually collected step by step. This is also known as command-as-you-go model. To disallow backward move to a specific step, set its <tt>AllowReturn</tt> property to false.</li>
<li>Nonlinear - User input in a step determines which step to go next. To do so, set <tt>ActiveStepIndex</tt> to the step that you want the user to go to. In this case, when a user clicks on the previous button in the navigation panel, the previous step that they visited (not the previous step in the sequential order) will become visible.</li>
@@ -81,10 +81,10 @@ Given a set of wizard steps, <tt>TWizard</tt> supports three different ways of n <com:RunBar PagePath="Controls.Samples.TWizard.Sample3" />
<h3 id="4707">Using Templates in Wizard</h3>
-<p>
+<p id="540327" class="block-content">
<tt>TWizard</tt> supports more concrete control of its outlook through templates. In particular, it provides the following template properties that allow complete customization of the wizard's header, navigation and side bar.
</p>
-<ul>
+<ul id="u4" class="block-content">
<li>Header - <tt>HeaderTemplate</tt>.</li>
<li>Navigation - <tt>StartNavigationTemplate</tt>, <tt>StepNavigationTemplate</tt>, <tt>FinishNavigationTemplate</tt>.</li>
<li>Side bar - <tt>SideBarTemplate</tt>.</li>
@@ -92,7 +92,7 @@ Given a set of wizard steps, <tt>TWizard</tt> supports three different ways of n <com:RunBar PagePath="Controls.Samples.TWizard.Sample4" />
<h3 id="4708">Using Templated Wizard Steps</h3>
-<p>
+<p id="540328" class="block-content">
Wizard steps can also be templated. By using <tt>TTemplatedWizardStep</tt>, one can customize step content and navigation through its <tt>ContentTemplate</tt> and <tt>NavigationTemplate</tt> properties, respectively. This is useful for control developers to build specialized wizards, such as user registration, shopping carts, etc.
</p>
<com:RunBar PagePath="Controls.Samples.TWizard.Sample5" />
|