Tuesday, April 24, 2007

How to change the markup of a built-in Wicket component

I had a need to change the Wicket PagingNavigator class to display button images instead of plain text links (<< < > >>). The solution is easy but perhaps not obvious to a newbie. This is explained in a posting in the Wicket newsgroup, but it's not spelled out:

Create ButtonPagingNavigator.java:

package com.my;

import wicket.markup.html.navigation.paging.IPageable;
import wicket.markup.html.navigation.paging.PagingNavigator;

/** Exists only to change the html to use buttons instead of text */
public class ButtonPagingNavigator extends PagingNavigator
{
public ButtonPagingNavigator(String id, IPageable arg1)
{
super(id, arg1);
}
}

Create ButtonPagingNavigator.html. This replaces the text in the bodies of the <a> tags with <img>:

<html wicket="xmlns:wicket">
<body>
<wicket:panel>
<a wicket:id="first">
<img src="images/first_btn.gif" border="0" />
</a>


<a wicket:id="prev">
<img src="images/previous_btn.gif" border="0" />
</a>

<span wicket:id="navigation">
<a wicket:id="pageLink" href="#">
<span wicket:id="pageNumber">5</span>
</a>
</span>

<a wicket:id="next">
<img src="images/next_btn.gif" border="0" />
</a>

<a wicket:id="last">
<img src="images/last_btn.gif" border="0" />
</a>

</wicket:panel>
</body>
</html>

Note that this assumes the images are in the top level of the web context (typically this means in WEB-INF/images). If you want to use images that are in the same directory, use "new Image(...)" in your java code for each image, or wrap each <img> tag with <wicket:link>.

4 comments:

Giv P said...

Thank you so much for this example. I've been looking for a clear sample for customizing the nav tool for a long time to no avail.

One thing, though. Either you've forgotten or your blog has stripped out the "wicket:id" params from your markup.

Thanks again.

Julian Sinai said...

Thanks for pointing that out. Somehow the "wicket:" strings got lost. I've corrected them.

Bindu said...

Thanks a lot. I have been looking for this code for almost a day and tried all different options and nothig was working for me.

Thank you once again . Please keep posting the wickets stuff.

jay said...

V good work !! Thank you v much.