Added TemplatedWizardStep example.

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
index 96765ee8..9faf580d 100644
--- a/demos/quickstart/protected/pages/Controls/wizard.gif
+++ b/demos/quickstart/protected/pages/Controls/wizard.gif