diff options
| author | xue <> | 2006-03-24 04:07:34 +0000 |
|---|---|---|
| committer | xue <> | 2006-03-24 04:07:34 +0000 |
| commit | 9ca759cbfd2c6438dce417e3840462e85aed88f6 (patch) | |
| tree | ef3ca0db52168cf32f19b96d0880fd6d68362f04 /demos/quickstart/protected | |
| parent | 252f43cbafdff06d308863507db600966e6ae640 (diff) | |
Added two wizard demos.
Diffstat (limited to 'demos/quickstart/protected')
6 files changed, 177 insertions, 0 deletions
diff --git a/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample1.page b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample1.page new file mode 100644 index 00000000..05ed32ec --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample1.page @@ -0,0 +1,38 @@ +<com:TContent ID="body">
+
+<h2>A Single-Step Wizard</h2>
+
+<com:TWizard ID="Wizard1"
+ BackColor="#FFFBD6"
+ Width="400px"
+ SideBarStyle.Width="100px"
+ OnCompleteButtonClick="wizardCompleted" >
+
+ <com:TWizardStep Title="Step 1">
+ <h3>Wizard Step 1</h3>
+ <p>
+ Your favorite color:
+ <com:TDropDownList ID="DropDownList1">
+ <com:TListItem Value="Red" />
+ <com:TListItem Value="Blue" />
+ <com:TListItem Value="Green" />
+ <com:TListItem Value="Purple" />
+ <com:TListItem Value="Black" />
+ <com:TListItem Value="Yellow" />
+ <com:TListItem Value="Orange" />
+ <com:TListItem Value="Pink" />
+ <com:TListItem Value="Cyan" />
+ </com:TDropDownList>
+ </p>
+ </com:TWizardStep>
+
+ <com:TWizardStep Title="Step 2" StepType="Complete">
+ <h3>Wizard Step 2</h3>
+ <p>
+ <com:TLabel ID="Result" />
+ </p>
+ </com:TWizardStep>
+
+</com:TWizard>
+
+</com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample1.php b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample1.php new file mode 100644 index 00000000..20440e62 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample1.php @@ -0,0 +1,11 @@ +<?php
+
+class Sample1 extends TPage
+{
+ public function wizardCompleted($sender,$param)
+ {
+ $this->Result->Text="Your favorite color is: " . $this->DropDownList1->SelectedValue;
+ }
+}
+
+?>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample2.page b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample2.page new file mode 100644 index 00000000..727179bd --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample2.page @@ -0,0 +1,54 @@ +<com:TContent ID="body">
+
+<h2>Wizard with Customized Styles</h2>
+
+<com:TWizard ID="Wizard1"
+ Width="400px"
+ Height="100px"
+ BackColor="#EFF3FB"
+ BorderColor="#B5C7DE"
+ BorderWidth="1px"
+ HeaderText="Please let us know your preference"
+ SideBarStyle.Width="100px"
+ SideBarStyle.Height="100px"
+ SideBarStyle.BackColor="#507CD1"
+ NavigationStyle.HorizontalAlign="Right"
+ NavigationButtonStyle.BackColor="White"
+ NavigationButtonStyle.BorderColor="#507CD1"
+ NavigationButtonStyle.BorderStyle="Solid"
+ NavigationButtonStyle.BorderWidth="1px"
+ NavigationButtonStyle.ForeColor="#284E98"
+ SideBarButtonStyle.ForeColor="White"
+ HeaderStyle.BackColor="#284E98"
+ HeaderStyle.Font.Bold="True"
+ HeaderStyle.ForeColor="White"
+ HeaderStyle.HorizontalAlign="Center"
+ OnCompleteButtonClick="wizardCompleted" >
+
+ <com:TWizardStep Title="Step 1">
+ <p>
+ Your favorite color:
+ <com:TDropDownList ID="DropDownList1">
+ <com:TListItem Value="Red" />
+ <com:TListItem Value="Blue" />
+ <com:TListItem Value="Green" />
+ <com:TListItem Value="Purple" />
+ <com:TListItem Value="Black" />
+ <com:TListItem Value="Yellow" />
+ <com:TListItem Value="Orange" />
+ <com:TListItem Value="Pink" />
+ <com:TListItem Value="Cyan" />
+ </com:TDropDownList>
+ </p>
+ </com:TWizardStep>
+
+ <com:TWizardStep Title="Step 2" StepType="Complete">
+ <h3>Thank you for your answer!</h3>
+ <p>
+ <com:TLabel ID="Result" />
+ </p>
+ </com:TWizardStep>
+
+</com:TWizard>
+
+</com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample2.php b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample2.php new file mode 100644 index 00000000..a508fbf3 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample2.php @@ -0,0 +1,11 @@ +<?php
+
+class Sample2 extends TPage
+{
+ public function wizardCompleted($sender,$param)
+ {
+ $this->Result->Text="Your favorite color is: " . $this->DropDownList1->SelectedValue;
+ }
+}
+
+?>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/Wizard.page b/demos/quickstart/protected/pages/Controls/Wizard.page index 11fb4bfa..3034c0c6 100644 --- a/demos/quickstart/protected/pages/Controls/Wizard.page +++ b/demos/quickstart/protected/pages/Controls/Wizard.page @@ -3,4 +3,67 @@ <h1>TWizard</h1>
<com:DocLink ClassPath="System.Web.UI.WebControls.TWizard" />
+<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.
+</p>
+<img src="<%~wizard.gif%>" alt="components of wizard" />
+
+<p>
+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>
+Wizard steps are typically added to a wizard through template as follows,
+</p>
+
+<com:TTextHighlighter Language="prado" CssClass="source">
+<com:TWizard>
+ <com:TWizardStep Title="step 1" StepType="Start">
+ content in step 1, may contain other controls
+ </com:TWizardStep>
+
+ <com:TWizardStep Title="step 2" StepType="Step">
+ content in step 2, may contain other controls
+ </com:TWizardStep>
+
+ <com:TWizardStep Title="finish step" StepType="Finish">
+ content in finish step, may contain other controls
+ </com:TWizardStep>
+</com:TWizard>
+</com:TTextHighlighter>
+
+<p>
+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>
+ <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>Auto</tt> - the step type is determined by wizard automatically.</li>
+</ul>
+
+
+<h2>Using TWizard</h2>
+
+<h3>A Single-Step Wizard Sample</h3>
+<p>
+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>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:
+</p>
+<ul>
+ <li>Header - <tt>HeaderText</tt>, <tt>HeaderTemplate</tt>, <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>
+</ul>
+<com:RunBar PagePath="Controls.Samples.TWizard.Sample2" />
+
+
</com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/wizard.gif b/demos/quickstart/protected/pages/Controls/wizard.gif Binary files differnew file mode 100644 index 00000000..96765ee8 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/wizard.gif |
