Wizard style UI

Hi Everyone,

In our current Vaadin project we decided to use wizard style UI to guide the user thru specific steps.
Question is: has anybody done something similar in Vaadin before? What would be the best approach to implement such UI?
There are special wizard frameworks for Swing apps but I have not seen anything like that for Vaadin.

I haven’t done a wizard view but I have a idea of how I would do one if I needed it - so take my views as brainstorming and not as a reference.

  1. Have a main class, which we can call Wizard. I’d probably would have it as a VerticalLayout which would have a progress bar at the top, a panel for content in the middle (panels support scrolling) and horizontalLayout for cancel previous, and next -buttons at the bottom. At the first view the previous button would be disabled and in the last the next -buttons caption would change to “Finish”.

  2. the Wizard would have a List of WizardViews, which is a interface that every view of the wizard would have to implement. I would need at least a save() function. This function would be called on on every view when the user clicks the final save() button, and they should pass their data to the objects behind the scene.

  3. clicking previous or next just takes the previous entry or next entry from the List and calls on the main content panel panel.setContent(wizardView);. The state of every view should be automatically saved into the list of WizardViews without any extra code, so I don’t think you have to worry about losing any data at this point.

  4. A handler should be implemented separately to every Wizard that would tell what should be done when the wizard has finished. This would handle the redirecting to the next view in the software.

There’s my initial thoughts on the matter. Coming to think about it, this could be a great component to the Vaadin directory. I could do that at some point if I find the time.

Hi,

I did something similar a very long time ago… Looking at it quickly now though I don’t have memory of it, but my documentation states something similar what you are looking for (god, time flies quickly and braincells get destroyed even quicker!)


http://dev.vaadin.com/svn/incubator/WizardWidget/

If my memory serves me correctly it chewed on an XML file which had some components defined in it so it was basically a demo of two things: 1) Wizard style UI and 2) dynamic XML driven UI creation

Thanks for a reply.
This more or less the same solution I was thinking about, but thanks for a tip.

On a side note I found some ready made GWT wizard widgets like

http://github.com/BinaryMuse/gwt-wizard
and
http://www.cafesip.org/projects/common/gwtcomp/release_notes.html#Release_1.1.0

but as I am new to Vaadin and I am not familiar with custom GWT component integration in Vaadin i decided to implement this functionality myself.
I think in future I would be good idea to have native Vaadin wizard widget.

It’s not really necessary to integrate a GWT widget, as you can quite easily create a wizard component with purely server-side component composition, as Jens suggested. I don’t see much benefit in a custom widget, unless you want some nicer visual effects or something.

Hi all,

sorry to bring up such an old thread but I just wanted to inform you that there is now an add-on for creating multi-step wizard UIs. The add-on is still experimental and the APIs are likely to change but you can still get started with using it. And of course any feedback is greatly appreciated.

See the
live demo
and download
Wizards for Vaadin
from Vaadin Directory.