Collection Paging in Wicket Bootstrap

I'm going to show you how easy Java Wicket makes adding paging to your Collections. The example we're using is the NixMashup Links application you probably heard me mention before, where I'm extracting the individual links from NixMashup Posts and serving them up on a site built with Java Wicket Bootstrap.

Here's a list of NixMashup Links with a nice Bootstrap Paging Control at the bottom.

Before we go into the Java code, let's look at the Wicket HTML code. What you see could not be more basic, but it's generating a lot of content. A Wicket PageableListView object will be bound to the “rows” <LI /> element which is added to our WebMarkupContainer “data” <UL /> element. The “navigator” <DIV /> is our paging control and must appear in our Web Markup Container.

Now to the Java. I'm repeating myself (no pun intended), but here we see the Java equivalent of the HTML above where we are creating a PageableListView object from our Java Collection then adding it to the WebMarkupContainer. Notice how simple it is to add the Paging Control with BootstrapPagingNavigator(“navigator”, listview).

@SuppressWarnings("serial")
public RecentPostsPanel(String id) {
	super(id);

	WebMarkupContainer datacontainer = new WebMarkupContainer("data");
	datacontainer.setOutputMarkupId(true);
	add(datacontainer);

	final SimpleDateFormat postDate = new SimpleDateFormat("MMM d, yyyy");

	List<NixMashupLink> nixMashupLinks = NixMashupLinks.getMostRecentNixMashupLinks();
	PageableListView listview = new PageableListView("rows", nixMashupLinks, 20) {
		@Override
		protected void populateItem(ListItem item) {
			NixMashupLink nixMashupLink = (NixMashupLink) item.getModelObject();
			item.add(new Label("linktitle", StringUtils.abbreviate(nixMashupLink.getLinkTitle(), 40)));
			item.add(new Label("postdate", postDate.format(nixMashupLink.getLinkDatetime())));
		}
	};

	datacontainer.add(listview);
	datacontainer.add(new BootstrapPagingNavigator("navigator", listview));
	datacontainer.setVersioned(false);
}

Very pretty, if I must say so myself.

Posted May 31, 2014 10:13 AM EDT

More Like This Post