Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3


How to use checkboxes to select items in a listview

Using checkboxes to select items in a listview is a common thing to do. For example, you want to select items to delete from a list.

The easiest and neatest way to do this is probably using a org.apache.wicket.markup.html.form.CheckGroup

Another way to do this, is to wrap your 'business objects' so that it has an additional boolean property that you can use in your form. The following example uses such a wrapper, where the 'name' field is the wrapped object.

The wrapper:

Code Block
 * name is the wrapped object that could be your business object.
 * the selected property is just here to record whether the checkbox for
 * it was selected.
private class NameWrapper implements Serializable
	private String name;
	private Boolean selected = Boolean.FALSE;

	public NameWrapper(String wrapped)
	{ = wrapped;

	public Boolean getSelected()
		return selected;

	public void setSelected(Boolean selected)
		this.selected = selected;

	public String getName()
		return name;

	public void setName(String wrapped)
	{ = wrapped;
	public String toString()
		return name + ": " + selected;

The page with the form and list view:

Code Block
import java.util.ArrayList;
import java.util.List;

import wicket.IFeedback;
import wicket.markup.html.WebPage;
import wicket.markup.html.basic.Label;
import wicket.markup.html.form.CheckBox;
import wicket.markup.html.form.Form;
import wicket.markup.html.list.ListItem;
import wicket.markup.html.list.ListView;
import wicket.markup.html.panel.FeedbackPanel;
import wicket.model.PropertyModel;

/** input web page. */
public class FormInput extends WebPage
	public FormInput()
		final FeedbackPanel feedback = new FeedbackPanel("feedback");
		add(new InputForm("inputForm", feedback));

	/** form for processing the input. */
	private class InputForm extends Form
		// holds NameWrapper elements
		private List data;

		public InputForm(String name, IFeedback feedback)
			super(name, feedback);

			// add some dummy data
			data = new ArrayList();
			data.add(new NameWrapper("one"));
			data.add(new NameWrapper("two"));
			data.add(new NameWrapper("three"));
			data.add(new NameWrapper("four"));
			// add a nested list view; as the list is nested in the form, the form will
			// update all FormComponent childs automatically.
			ListView listView = new ListView("list", data)
				protected void populateItem(ListItem item)
					NameWrapper wrapper = (NameWrapper)item.getModelObject();
					item.add(new Label("name", wrapper.getName()));
					item.add(new CheckBox("check", new PropertyModel(wrapper, "selected")));

		public void onSubmit()
			info("data: " + data); // print current contents

And finally the HTML page (FormInput.html):

Code Block
 <form wicket:id="inputForm" id="inputForm">
    <legend>Checkbox test</legend>
    <span wicket:id="list">
      <span wicket:id="name">test</span>
      <input wicket:id="check" type="checkbox" />
    <input type="submit" value="save" />
  <span wicket:id="feedback" />

We've been discussing making working with checkboxes for selections from a list even easier in future, but this example is how I would do it right now.