System Mobile, Inc

One component that generates a number of questions on the Wicket-User mailing list is RadioGroup. This short article presents an example of how to use RadioGroup in your Wicket application.

You’re probably familiar with the HTML radio button element:

<input type="radio" name="myRadioButton" value="cyan"/>

As long as all radio buttons have the same name attribute value, the browser groups them into one radio group, allowing only one radio button to be selected at a time:

<input type="radio" name="myRadioButton" value="cyan" />
<input type="radio" name="myRadioButton" value="magenta" />
<input type="radio" name="myRadioButton" value="yellow" />
<input type="radio" name="myRadioButton" value="black" />

With the above markup, a user can only select one of four values. Let’s explore what this looks like in Wicket, starting with creating a few POJOs to represent our domain model. First, the Color class:

public class Color {

  private String name;

  public Color() {}

  public Color(String name) {
    this.name = name;
  }

  //... getters and setters omitted

}

Next, we’ll create a simple ColorPreference object. The ColorPreference object is what contains the user selection:

public class ColorPreference {

  private Color color;

  //... getters and setters omitted
}

At this point we created two simple objects. The Color object will be used as the available options, while ColorPreference stores the selected value. Let’s look at some Wicket code:

public class ColorPreferencePage extends WebPage {

  public ColorPreferencePage() {
    add(new ColorPreferenceForm("form"));
  }

  private class ColorPreferenceForm extends Form {

    public ColorPreferenceForm(String id) {
      super(id);

      /*
      Set the model using a new instance each time. In
      a real application, you'd probably get the
      ColorPreference object from a database.  In that
      case, you'd want to use a LoadableDetachableModel
      to get the model object.
      */
      setModel(new Model(new ColorPreference()));

      /*
      Here we create the RadioGroup.  Notice the second
      constructor argument. What this basically says is
      "Get the initial selected value for the radio group
      from whatever object the model has, calling that
      object's getColor() property."  When the form is
      submitted, the RadioGroup then updates that object's
      property by calling setColor(Color).
      */
      RadioGroup group = new RadioGroup("group",
        new PropertyModel(getModel(), "color"));
      add(group);

      /*
      Next, add the individual radio options to the RadioGroup.
      We're creating the Color objects and wrapping them in
      Model classes.  Remember that models are just abstractions
      to how components get and set data.
      */
      group.add(new Radio("cyan",
        new Model(new Color("cyan"))));
      group.add(new Radio("magenta",
        new Model(new Color("magenta"))));
      group.add(new Radio("yellow",
        new Model(new Color("yellow"))));
      group.add(new Radio("black",
        new Model(new Color("black"))));

    }

    public void onSubmit() {
      ColorPreference cp = (ColorPreference) getModelObject();
      System.out.println("Selected Color: " +
        cp.getColor().getName());
    }
  }

}

With the form created and components added, let’s look at the markup. You’ll notice that it’s pretty easy to see what’s going on:

<form wicket:id="form">

  <span wicket:id="group">
    <input type="radio" wicket:id="cyan"/> Cyan
    <input type="radio" wicket:id="magenta"/> Magenta
    <input type="radio" wicket:id="yellow"/> Yellow
    <input type="radio" wicket:id="black"/> Black
  </span>

  <input type="submit" value="Save"/>

</form>

Notice the wicket:id=”group” element. The span tag comes in handy here since we need to represent the RadioGroup in the markup. When Wicket generates the markup for the user, all radio buttons with the same RadioGroup parent have the same name.

From this explanation, I hope you’ll see that using RadioGroup with Wicket isn’t much of a challenge. It just takes a reasonable understanding of component interaction and how models are used.

To recap:

• Create the RadioGroup and add it to the Form.
• Add Radio components to the RadioGroup.
• Create your markup, making sure to reflect the RadioGroup component.