From 9ca759cbfd2c6438dce417e3840462e85aed88f6 Mon Sep 17 00:00:00 2001 From: xue <> Date: Fri, 24 Mar 2006 04:07:34 +0000 Subject: Added two wizard demos. --- .../pages/Controls/Samples/TWizard/Sample1.page | 38 +++++++++++++ .../pages/Controls/Samples/TWizard/Sample1.php | 11 ++++ .../pages/Controls/Samples/TWizard/Sample2.page | 54 ++++++++++++++++++ .../pages/Controls/Samples/TWizard/Sample2.php | 11 ++++ .../protected/pages/Controls/Wizard.page | 63 +++++++++++++++++++++ .../quickstart/protected/pages/Controls/wizard.gif | Bin 0 -> 4102 bytes 6 files changed, 177 insertions(+) create mode 100644 demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample1.page create mode 100644 demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample1.php create mode 100644 demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample2.page create mode 100644 demos/quickstart/protected/pages/Controls/Samples/TWizard/Sample2.php create mode 100644 demos/quickstart/protected/pages/Controls/wizard.gif (limited to 'demos/quickstart') 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 @@ + + +

A Single-Step Wizard

+ + + + +

Wizard Step 1

+

+ Your favorite color: + + + + + + + + + + + +

+
+ + +

Wizard Step 2

+

+ +

+
+ +
+ +
\ 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 @@ +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 @@ + + +

Wizard with Customized Styles

+ + + + +

+ Your favorite color: + + + + + + + + + + + +

+
+ + +

Thank you for your answer!

+

+ +

+
+ +
+ +
\ 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 @@ +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 @@

TWizard

+

Overview

+

+TWizard 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 step content is the main content of a wizard step for users to complete, header refers to header content common to all steps, navigation contains buttons that allow users to navigate step by step, and side bar contains a list of hyperlinks by which users can reach to any step with one click. +

+components of wizard + +

+Wizard steps are represented by TWizardStep and are maintained in TWizard through its WizardSteps property. At any time, only one step is visible, which is determined by the ActiveStep property. The ActiveStepIndex property gives the index of the active step in the step collection. Clicking on navigation buttons can activate different wizard steps. +

+ +

+Wizard steps are typically added to a wizard through template as follows, +

+ + +<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> + + +

+In the above, StepType 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: +

+ + + +

Using TWizard

+ +

A Single-Step Wizard Sample

+

+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. +

+ + +

Customizing Wizard Styles

+

+TWizard 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: +

+ + + + \ No newline at end of file diff --git a/demos/quickstart/protected/pages/Controls/wizard.gif b/demos/quickstart/protected/pages/Controls/wizard.gif new file mode 100644 index 00000000..96765ee8 Binary files /dev/null and b/demos/quickstart/protected/pages/Controls/wizard.gif differ -- cgit v1.2.3