Wicket Sortable Container

The Wicket ListView is an excellent core component when you need to display a list of objects. It's fairly simple to use and is fairly extensible when you need to customize it's behavior.

The Java code for using a ListView is fairly simple. Note: This is using the most recent Wicket-2.0 snapshot API, which is slightly different from the Wicket 1.0 API.

add(new ListView("rows", listData) {
 public void populateItem(final ListItem item) {
   MyObject bean = (MyObject) item.getModelObject();
   new Label(item, "label", bean.getLabel());
 }
});

The HTML template to use the ListView is pretty straightforward too.

<ul>
  <li wicket:id="items">
    <span wicket:id="label">Something unique for this object</span>
  </li>
</ul>

This is all fine and dandy, but it's pretty bare bones. Now, if you want to do some fancy Web 2.0ish drag/drop reordering of your items, check out the new SortableContainer Wicket extension that integrates the very sweet scriptaculous Sortable Javascript component and does all the hard work for you.

The Java code is just slightly different from the ListView. You must pass in a wicketId for the list container (ul, ol, table, etc) as well as the wicketId for the individual list item (li, tr, etc).

new SortableContainer(this, "itemList", "item", listData) {
 public void populateItemInternal(final ListItem item) {
   MyObject bean = (MyObject) item.getModelObject();
   new Label(item, "label", bean.getLabel());
 }
};

The HTML template is nearly identical too. You just need to add a wicketId to the parent container.

<ul wicket:id="itemList">
  <li wicket:id="item">
    <span wicket:id="label">Something unique for this object</span>
  </li>
</ul>

Simple enough for ya? I was extremely excited to see developers having success getting up and running with the latest snapshot release of these components. I'd love to hear other success (or horror) stories from anyone out there that's using these components!

As a side note, I've been reading some posts that the Wicket Repeater API is more robust than the ListView, but without knowing the details, I'll stick with the ListView for now.