Wicket Custom Paging Navigator
21 Mar 2010Wicket Built-in Components
Wicket provides lot of useful components out of the box. Sometimes we would like to change the appearance(aka markup) of the built-in components. It is very easy to do.
Original Markup
Each component has a markup file associated with it. We will take the PagingNavigator as an example. It is associated with the markup file PagingNavigator.html. I got the markup from 1.
<html xmlns:wicket>
<body>
<wicket:panel>
<a wicket:id="first"><<</a> <a wicket:id="prev"><</a>
<span wicket:id="navigation">
<a wicket:id="pageLink" href="#"><span wicket:id="pageNumber">5</span></a>
</span>
<a wicket:id="next">></a> <a wicket:id="last">>></a>
</wicket:panel>
</body>
</html>
Extend the Component
First we need to extend the Component, in our case it is PagingNavigator.
public class CustomPagingNavigator extends PagingNavigator
{
public CustomPagingNavigator(final String id, final IPageable pageable)
{
this(id, pageable, null);
}
public CustomPagingNavigator(final String id, final IPageable pageable,
final IPagingLabelProvider labelProvider)
{
super(id,pageable,labelProvider);
}
}
Customize the Markup
Create a markup file for the component(CustomPagingNavigator.html) and
copy the original markup. The only restriction is, we should not
change the wicket:id
and the hierarchy of the wicket:id
. I don’t
like the < and > symbols. So i am going to change it and i like
to add |
between the links.
<html xmlns:wicket>
<body>
<wicket:panel>
<a wicket:id="first">first |</a> <a wicket:id="prev">previous |</a>
<span wicket:id="navigation">
<a wicket:id="pageLink" href="#"><span wicket:id="pageNumber">5</span> |</a>
</span>
<a wicket:id="next">next |</a> <a wicket:id="last">last</a>
</wicket:panel>
</body>
</html>
I have made small changes only. But you can go on and make further changes like showing images instead of first, last etc.