summaryrefslogtreecommitdiff
path: root/demos
diff options
context:
space:
mode:
Diffstat (limited to 'demos')
-rw-r--r--demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample2.page2
-rw-r--r--demos/quickstart/protected/pages/Controls/Wizard.page31
2 files changed, 27 insertions, 6 deletions
diff --git a/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample2.page b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample2.page
index 727179bd..ea01e320 100644
--- a/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample2.page
+++ b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample2.page
@@ -12,6 +12,8 @@
SideBarStyle.Width="100px"
SideBarStyle.Height="100px"
SideBarStyle.BackColor="#507CD1"
+ SideBarStyle.HorizontalAlign="Center"
+ StepStyle.HorizontalAlign="Center"
NavigationStyle.HorizontalAlign="Right"
NavigationButtonStyle.BackColor="White"
NavigationButtonStyle.BorderColor="#507CD1"
diff --git a/demos/quickstart/protected/pages/Controls/Wizard.page b/demos/quickstart/protected/pages/Controls/Wizard.page
index 3034c0c6..0de4a44a 100644
--- a/demos/quickstart/protected/pages/Controls/Wizard.page
+++ b/demos/quickstart/protected/pages/Controls/Wizard.page
@@ -5,7 +5,7 @@
<h2>Overview</h2>
<p>
-<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.
+<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>DisplaySideBar</tt>.
</p>
<img src="<%~wizard.gif%>" alt="components of wizard" />
@@ -40,7 +40,7 @@ In the above, <tt>StepType</tt> refers to the type of a wizard step, which can a
<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>
- <li><tt>Complete</tt> - the step that shows a summary to user (no interaction is allowed).</li>
+ <li><tt>Complete</tt> - the step that shows a summary to user. In this step, both side bar and navigation panel are invisible. Thus, this step usually does not allow user interaction.</li>
<li><tt>Auto</tt> - the step type is determined by wizard automatically.</li>
</ul>
@@ -55,15 +55,34 @@ In this sample, we use wizard to collect user's preference of color. In the firs
<h3>Customizing Wizard Styles</h3>
<p>
-<tt>TWizard</tt> defines a whole set of properties for customization of its various components as shown in the above figure. In particular, the following properties are provided:
+<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>
- <li>Header - <tt>HeaderText</tt>, <tt>HeaderTemplate</tt>, <tt>HeaderStyle</tt>.</li>
+ <li>Header - <tt>HeaderStyle</tt>.</li>
<li>Step - <tt>StepStyle</tt>.</li>
- <li>Navigation - <tt>NavigationStyle</tt>, <tt>StartNavigationTemplate</tt>, <tt>StepNavigationTemplate</tt>, <tt>FinishNavigationTemplate</tt>, <tt>StartNextButtonStyle</tt>, <tt>StepNextButtonStyle</tt>, <tt>StepPreviousButtonStyle</tt>, <tt>FinishPreviousButtonStyle</tt>, <tt>FinishCompleteButtonStyle</tt>, <tt>CancelButtonStyle</tt>.</li>
- <li>Side bar - <tt>SideBarTemplate</tt>, <tt>SideBarStyle</tt>, <tt>SideBarButtonStyle</tt>, <tt>DisplaySideBar</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>
+ <li>Side bar - <tt>SideBarStyle</tt>, <tt>SideBarButtonStyle</tt>.</li>
</ul>
<com:RunBar PagePath="Controls.Samples.TWizard.Sample2" />
+<h3>Customizing Wizard Navigation</h3>
+<p>
+Bidirectional,
+Unidirectional,
+Non-linear
+</p>
+
+<h3>Using Templates in Wizard</h3>
+<p>
+</p>
+<ul>
+ <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>
+</ul>
+
+<h3>Using Templated Wizard Steps</h3>
+<p>
+</p>
</com:TContent> \ No newline at end of file