Tutorial: 2 - Your Wizard Context

Since a wizard has multiple steps (or “pages”), you will need some sort of shared data object that can be accessed by every page of your wizard. This object is a subclass of WizardContext. WizardContext only defines a few essential functions—the rest of the implementation is left completely up to you.

For our fake sign-up wizard, we need to collect the following specific pieces of data:

Requested username
Password
Subscription plan choice (free or paid)
Credit card type and number (if they choose the paid plan)

Lets create a new class, SignupWizardContext, that defines this information:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

  package net.binarymuse.gwt.sample.gwtwizard.client;

import net.binarymuse.gwt.client.ui.wizard.WizardContext;

public class SignupWizardContext extends WizardContext {

    private enum PlanType {
        FREE,
        PAID
    }

    private enum CreditCardType  {
        VISA,
        MASTERCARD,
        DISCOVER,
        AMERICAN_EXPRESS
    }

    private boolean        complete;

    private String         username;
    private String         password;
    private PlanType       plan;
    private CreditCardType creditCardType;
    private String         creditCardNumber;

    public SignupWizardContext() {
        reset();
    }

    @Override
    public void reset() {
        setComplete(false);

        setUsername("");
        setPassword("");
        setPlan(null);
        setCreditCardType(null);
        setCreditCardNumber("");
    }

    public void setComplete(boolean complete) {
        this.complete = complete;
    }

    @Override
    public boolean isComplete() {
        return complete;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getUsername() {
        return username;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getPassword() {
        return password;
    }

    public void setPlan(PlanType plan) {
        this.plan = plan;
    }

    public PlanType getPlan() {
        return plan;
    }

    public void setCreditCardType(CreditCardType creditCardType) {
        this.creditCardType = creditCardType;
    }

    public CreditCardType getCreditCardType() {
        return creditCardType;
    }

    public void setCreditCardNumber(String creditCardNumber) {
        this.creditCardNumber = creditCardNumber;
    }

    public String getCreditCardNumber() {
        return creditCardNumber;
    }

}

As you can see, a WizardContext can be as simple as a glorified bag of getters and setters—indeed, low complexity is ideal in a model object. In a more complex application, you may write helper code or annotations to assist in storing the data in a file or database; however, in this tutorial, we will only be dealing with our context in client code, so we won’t worry about that.

Now that we’ve written our context object, we can start creating the pages of our wizard.

Home
<< Tutorial: 1 – Getting Started | Tutorial: 3 – The Welcome Page >>