Sunday February 05 , 2012

Pinball Wizard Framework

Pinball is free software that allows developers using Adobe's Flex and AIR platforms to quickly and easily create custom Wizard applications.

The Wizard is one of the most ubiquitous software concepts, and one that most users are instantly comfortable with. Employing simple navigation, a Wizard guides the user through some multi-step process. They can be particularly effective when the user may take several possible paths through a branching process structure.

Over the web, a Wizard could simply be a handy way to break a long and tedious form into logical sections. It could configure a product for purchase; control an online checkout process; conduct a survey; present a portfolio of work; guide troubleshooting efforts, etc. The possibilities are literally endless.

To implement a Wizard using Pinball, you will need:

  • Some rudimentary Flex and Actionscript 3 skills; you should understand CSS styling, data binding, event dispatching and handling, and how to create custom components.

  • The Flex SDK and either use Adobe Flex Builder or the command line compiler that comes with the SDK to compile your final swf file.

  • The Pinball Framework API, a very small .swc library.

Key Concepts

The PagesFor each step of the Wizard, a Page is used to display or collect information. It can interact with the framework, for instance marking the current step complete once required fields are supplied and validated, causes the framework to enable the Next button (or Finish if this is the last step). If the user should remove required data from a completed step, then the wizard page can mark the step incomplete, causing the Next (or Finish) button to become disabled again.
The OverviewThe position and completeness of each step is reflected in the Overview, which contains buttons for each step. Completed steps can be revisited by clicking their corresponding buttons in the Overview. Incomplete steps can be seen, but do not respond to interaction in the Overview.
The ModelNo matter how simple your Wizard may be, it will need a Model; a common object to manage the data that the Pages of the Wizard work with. You supply a value object that will be made available to all Wizard Pages.
The Finish ButtonThe user navigates through the pages of your Wizard with some goal. in mind: making a purchase, submitting feedback or a survey, etc.. The culmination of the process is occurs with the click of the Finish button when the last page is filled. In Pinball, the Finish action is an HTTP request, either GET or POST, using the data collected. The REST style interface was chosen because it is compatible with many existing services. This will allow you to easily 'fold' a long HTML form into a logically divided Wizard process that submits to the existing service, often without modification.

Inversion of Control

Because it is meant to get as many people up and running as quickly as possible, the Pinball framework is focused on creating standalone Wizard applications and does not currently support adding a Wizard as a component to an existing application.

Another reason Pinball is not a drop-in component is that, architecturally speaking, it is based on the Inversion Of Control (IOC) design pattern.

In a normal application, the developer supplies the code that controls the structure and flow of the application. Frameworks used by such an application typically provide only components that are instantiated and used by it.

With IOC, the developer supplies only components and configuration, relinquishing the control structure (and happily, the related effort to implement it) to the framework. Thus, control is said to be 'inverted'.

CSS Styling

Most of the look and feel of your Wizard is managed with a CSS style sheet.

Custom Pages

You provide your own custom wizard pages; one for each step of the Wizard. You also supply a data model value object which is shared by all the pages.

Simple Config

Those aspects not controlled in the style sheet are handled in a simple configuration value object.

Coming Soon

Pinball was battle-tested in 2007 with two Wizards used by over 600 courseware beta testers to sign up and subsequently report detailed feedback about each chapter of the material as they progressed.

Pinball - coming soon

Pinball is currently being tidied up a bit and a demo is being created. For now, you can see a functional example when you...

Signup for the Pinball Beta