diff options
Diffstat (limited to 'demos/quickstart')
6 files changed, 81 insertions, 5 deletions
diff --git a/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample1.page b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample1.page index 05ed32ec..3abf0b5c 100644 --- a/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample1.page +++ b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample1.page @@ -5,7 +5,8 @@ <com:TWizard ID="Wizard1"
BackColor="#FFFBD6"
Width="400px"
- SideBarStyle.Width="100px"
+ SideBarStyle.Width="120px"
+ HeaderText="Please let us know your preference"
OnCompleteButtonClick="wizardCompleted" >
<com:TWizardStep Title="Step 1">
diff --git a/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample2.page b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample2.page index ea01e320..2ac672d8 100644 --- a/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample2.page +++ b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample2.page @@ -8,13 +8,14 @@ BackColor="#EFF3FB"
BorderColor="#B5C7DE"
BorderWidth="1px"
+ BorderStyle="Solid"
HeaderText="Please let us know your preference"
SideBarStyle.Width="100px"
SideBarStyle.Height="100px"
SideBarStyle.BackColor="#507CD1"
SideBarStyle.HorizontalAlign="Center"
StepStyle.HorizontalAlign="Center"
- NavigationStyle.HorizontalAlign="Right"
+ NavigationStyle.HorizontalAlign="Center"
NavigationButtonStyle.BackColor="White"
NavigationButtonStyle.BorderColor="#507CD1"
NavigationButtonStyle.BorderStyle="Solid"
diff --git a/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample5.page b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample5.page new file mode 100644 index 00000000..89a2b8b3 --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample5.page @@ -0,0 +1,51 @@ +<com:TContent ID="body">
+
+<h2>Using Templated Wizard Steps</h2>
+
+<com:TWizard ID="Wizard1"
+ BackColor="#FFFBD6"
+ Width="400px"
+ SideBarStyle.Width="120px"
+ HeaderText="Please let us know your preference"
+ 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:TTemplatedWizardStep ID="Step2" Title="Templated Step">
+ <prop:ContentTemplate>
+ <p>
+ Your favorite Sport:
+ <com:TDropDownList ID="DropDownList2">
+ <com:TListItem Value="Baseball" />
+ <com:TListItem Value="Football" />
+ <com:TListItem Value="Tennis" />
+ </com:TDropDownList>
+ </p>
+ </prop:ContentTemplate>
+ </com:TTemplatedWizardStep>
+
+ <com:TWizardStep Title="Complete" StepType="Complete">
+ <h3>Thank you for your answer!</h3>
+ <p>
+ <com:TLabel ID="Result1" /><br/><br/>
+ <com:TLabel ID="Result2" />
+ </p>
+ </com:TWizardStep>
+</com:TWizard>
+
+</com:TContent>
\ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample5.php b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample5.php new file mode 100644 index 00000000..4ab6d08b --- /dev/null +++ b/demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample5.php @@ -0,0 +1,12 @@ +<?php
+
+class Sample5 extends TPage
+{
+ public function wizardCompleted($sender,$param)
+ {
+ $this->Result1->Text="Your favorite color is: " . $this->DropDownList1->SelectedValue;
+ $this->Result2->Text="Your favorite sport is: " . $this->Step2->DropDownList2->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 0de4a44a..29718930 100644 --- a/demos/quickstart/protected/pages/Controls/Wizard.page +++ b/demos/quickstart/protected/pages/Controls/Wizard.page @@ -67,22 +67,33 @@ In this sample, we use wizard to collect user's preference of color. In the firs <h3>Customizing Wizard Navigation</h3>
<p>
-Bidirectional,
-Unidirectional,
-Non-linear
+Given a set of wizard steps, <tt>TWizard</tt> supports three different ways of navigation among them:
</p>
+<ul>
+ <li>Bidirectional - Users can navigate forward and backward along a sequence of wizard steps. User input data is usally 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 usally 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>
+</ul>
+<com:RunBar PagePath="Controls.Samples.TWizard.Sample3" />
<h3>Using Templates in Wizard</h3>
<p>
+<tt>TWizard</tt> supports more concrete control of its outlook through templating. In particular, it provides the following template properties that allow complete customization of the wizard's header, navigation and side bar.
</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>
+Note about side bar button IDs, navigation button commands
+headertext vs. headertemplate
+tablelayout vs pure div layout
+<com:RunBar PagePath="Controls.Samples.TWizard.Sample4" />
<h3>Using Templated Wizard Steps</h3>
<p>
+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" />
</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 differindex 96765ee8..9faf580d 100644 --- a/demos/quickstart/protected/pages/Controls/wizard.gif +++ b/demos/quickstart/protected/pages/Controls/wizard.gif |
