Wicket Wizards (deutsch)

Wizards sind ein wichtiger Bestandteil eines jeden GUI-Frameworks.
Natürlich bietet auch Wicket entsprechende Komponenten.
Basis jedes Wizards ist die abstrakte Klasse Wizard.
Diese bringt eine entsprechende ButtonBar mit Buttons um zwischen den Einzelschritten zu navigieren und zum Bestätigen/Abbrechen.
Wer eigen Navigationsoptionen einbauen will kann Wizard.newButtonBar(String) überschreiben.
Für das Beispiel verwende ich allerdings die mitgelieferte Variante.
Der zweite Baustein ist das WizardModel.
Dieses bildet den zentralen Dreh-und ANgelpunkt für alle Wizard-Funktionen.
Es kennt alle Schritte, ihre Reihenfolge und den aktuell ausgewählten.
Fehlen nurnoch die einzelnen Schritte. Diese werden als WizardSteps implementiert und sind einfache Panels die vom Wizard gegeinander ausgetauscht werden.
Somit wird ein Wizard wie folgt erzeugt.

public class UserWizardPanel extends Wizard {
 public UserWizardPanel(String id) {
 super(id);
 setDefaultModel(new CompoundPropertyModel<User>(new User()));
 WizardModel wizardModel = new WizardModel();
 wizardModel.add(new UserCredentialsPanel(Model.of("User Credentials"), Model.of("Please give your credentials.")));
 wizardModel.add(new UserDetailsPanel(Model.of("User Credentials"), Model.of("Please give your credentials.")));
 wizardModel.add(new UserMessageToTheWorldPanel(Model.of("User Credentials"), Model.of("Please give your credentials.")));
 init(wizardModel);
 }

@Override
 protected Component newButtonBar(String id) {
 return super.newButtonBar(id);
 }

@Override
 public void onFinish() {
 System.out.println("DONE!!");
 }

@Override
 public void onCancel() {
 System.out.println("CANCEL!!");
 }
}

NoScript

Der Wizard verwendet AJAX um zwischen den Schritten hin- und herzuspringen. Im NoScript-Fall werden hieraus, wie üblich, Page-Requests wodurch Wizards auch ohne JavaScript funktionieren.

Das ganze Beispiel gibt’s hier als Quickstart.

Advertisements

About codepitbull
A nerd, a geek, a software developer. Oh, and married ;)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: