How to use checkboxes and radio buttons

In this paragraph we will see which components can be used to handle HTML radio buttons and checkboxes. Both these input elements are usually grouped together to display a list of possible choices:

A check box can be used as single component to set a boolean property. For this purpose Wicket provides the org.apache.wicket.markup.html.form.CheckBox component which must be attached to <input type=”checkbox”/> tag. In the next example (project SingleCheckBox) we will consider a form to edit a Person object, with an additional checkbox to let the user decide if she wants to subscribe to our mailing list or not. The form uses the following bean as backing object:

public class RegistrationInfo implements Serializable {

    private String name;
    private String surname;
    private String address;
    private String email;
    private boolean subscribeList;

    /*Getters and setters*/
}

The markup and the code for this example are the following:

HTML:

<form wicket:id="form">
        <div style="display: table;">
            <div style="display: table-row;">
                <div style="display: table-cell;">Name: </div>
                <div style="display: table-cell;">
                    <input type="text" wicket:id="name"/>
                </div>
            </div>
            <div style="display: table-row;">
                <div style="display: table-cell;">Surname: </div>
                <div style="display: table-cell;">
                    <input type="text" wicket:id="surname"/>
                </div>
            </div>
            <div style="display: table-row;">
                <div style="display: table-cell;">Address: </div>
                <div style="display: table-cell;">
                    <input type="text" wicket:id="address"/>
                </div>
            </div>
            <div style="display: table-row;">
                <div style="display: table-cell;">Email: </div>
                <div style="display: table-cell;">
                    <input type="text" wicket:id="email"/>
                </div>
            </div>
            <div style="display: table-row;">
                <div style="display: table-cell;">Subscribe list:</div>
                <div style="display: table-cell;">
                    <input type="checkbox" wicket:id="subscribeList"/>
                </div>
            </div>
        </div>
    <input type="submit" value="Save"/>
</form>

Java code:

public HomePage(final PageParameters parameters) {
    RegistrationInfo registrationInfo = new RegistrationInfo();
    registrtionInfo.setSubscribeList(true);

    Form<Void> form = new Form<>("form",
                new CompoundPropertyModel<RegistrationInfo>(registrtionInfo));

    form.add(new TextField("name"));
    form.add(new TextField("surname"));
    form.add(new TextField("address"));
    form.add(new TextField("email"));
    form.add(new CheckBox("subscribeList"));

    add(form);
}

Please note that the checkbox will be initially selected because we have set to true the subscribe flag during the model object creation (with instruction registrationInfo.setSubscribeList(true)):

Working with grouped checkboxes

When we need to display a given number of options with checkboxes, we can use the org.apache.wicket.markup.html.form.CheckBoxMultipleChoice component. For example, if our options are a list of strings, we can display them in this way:

HTML:

<div wicket:id="checkGroup">
        <input type="checkbox"/>It will be replaced by the actual checkboxes...
</div>

Java code:

List<String> fruits = Arrays.asList("apple", "strawberry", "watermelon");
form.add(new CheckBoxMultipleChoice("checkGroup", new ListModel<String>(new
                                 ArrayList<String>()), fruits));

Screenshot:

This component can be attached to a <div> tag or to a <span> tag. No specific content is required for this tag as it will be populated with the actual checkboxes. Since this component allows multiple selection, its model object is a list. In the example above we have used model class org.apache.wicket.model.util.ListModel which is specifically designed to wrap a List object.

CheckBoxMultipleChoice can insert a prefix and a suffix before and after each option. To configure them we can use methods setPrefix and setSuffix.

When our options are more complex objects than simple strings, we can render them using an IChoiceRenderer:

HTML:

<div wicket:id="checkGroup">
        <input type="checkbox"/>It will be replaced by actual checkboxes...
</div>

Java code:

Person john = new Person("John", "Smith");
Person bob = new Person("Bob", "Smith");
Person jill = new Person("Jill", "Smith");
List<Person> theSmiths = Arrays.asList(john, bob, jill);
ChoiceRenderer render = new ChoiceRenderer("name");
form.add(new CheckBoxMultipleChoice("checkGroup", new ListModel<Person>(new ArrayList<Person>()),
                                    theSmiths, render));

Screenshot:

How to implement a “select all” checkbox

A nice feature we can offer to users when we have a group of checkboxes is a “special” checkbox which selects/unselects all the other options of the group:

Wicket comes with a couple of utility components that make it easy to implement such a feature. They are CheckboxMultipleChoiceSelector and CheckBoxSelector classes, both inside package org.apache.wicket.markup.html.form. The difference between these two components is that the first works with an instance of CheckBoxMultipleChoice while the second takes in input a list of CheckBox objects:

/* CheckboxMultipleChoiceSelector usage: */

CheckBoxMultipleChoice checkGroup;
//checkGroup initialization...
CheckboxMultipleChoiceSelector cbmcs = new CheckboxMultipleChoiceSelector("id", checkGroup);

/* CheckBoxSelector usage: */

CheckBox checkBox1, checkBox2, checkBox3;
//checks initialization...
CheckBoxSelector cbmcs = new CheckBoxSelector("id", checkBox1, checkBox2, checkBox3);

Working with grouped radio buttons

For groups of radio buttons we can use the org.apache.wicket.markup.html.form.RadioChoice component which works in much the same way as CheckBoxMultipleChoice:

HTML:

<div wicket:id="radioGroup">
    <input type="radio"/>It will be replaced by actual radio buttons...
</div>

Java code:

List<String> fruits = Arrays.asList("apple", "strawberry", "watermelon");
form.add(new RadioChoice("radioGroup", Model.of(""), fruits));

Screenshot:

Just like CheckBoxMultipleChoice, this component provides the setPrefix and setSuffix methods to configure the prefix and suffix for our options and it supports IChoiceRenderer as well.