December 10, 2009 6:08 PM
I love the Insuricorp demo. The wizard in that has two distinguishing
features. A subtle animated progress indication that not only denotes
the current step, but also the fact that you are progressing. And the
other thing - a neat move effect between each step so that it looks
like the next step is sliding in from the right. I built a Flex 4
component that does exactly this. Use it similar to our good old Flex
3 view stack and voila!
Wizard Component
Only a demo (view source enabled) can do it justice. Click the image below to try it out:
You can also download the FXP. The source is licensed under MPL 1.1.
Try clicking next and previous pretty fast. The move effects play in parallel so that there is a kinetic feel to it.
Usage
First, declare the step names:
[Bindable] private var wizardViews:ArrayCollection = new ArrayCollection( [new WizardStepVO({name:"PICK PLAYLIST", state: "selected"}), new WizardStepVO({name: "SOURCE", state: "normal"}), new WizardStepVO({name: "DESTINATION", state: "normal"}) ]);
Now declare the view elements of the wizard as a child to the WizardPanel tag:
<wizard:WizardPanel id="wizard" change="trace('step: ' + wizard.currentStepTitle)" wizardViews="{wizardViews}"> <steps:PickPlaylist width="100%" top="40" bottom="30" /> <steps:PickSource width="100%" top="40" bottom="30" /> <steps:PickDestination width="100%" top="40" bottom="30" /> <steps:Finish width="100%" top="40" bottom="34" /> </wizard:WizardPanel>
The only difference from a view stack is that since
GraphicElements do not have a "label" property, you have to
provide the step name via a wizardViews
property. Internally, the
children passed to the component gets added to a Group and its
visibility is toggled based on the current step.
Effects
Pressing "Next" causes the next step to slide in and the current step to slide out. Then the progress indicator grows to cover the new step while the color of the indicator changes from white to blue. I used the new Flex 4 AnimateColor effect for this.
The move effects work in parallel so that multiple next / previous does not cause abrupt changes.
Conclusion
This was my first Flex 4 component. I had forgotten about it till I was cleaning up my Eclipse workspace. Let me know if you guys find it useful.