12 junho 2007

Wicket: Highlight current Menu with Generics!

Yeah! The title sounds weird, but it's something really cool. The idea is to do less if/else as possible to select the current menu.

This is what my Template.html looks like:
        <!-- menu -->   
<div id="menu">
<li wicket:id="system">
<a wicket:id="link" href="System.html">System</a>
<li wicket:id="about">
<a wicket:id="link" href="About.html">About</a>

So, yes there is some CSS behind to show a cool layout, but that is not the point. Just note that if a <li> has an id of "current" like this:
    <li id="current">...</li>

Imagine that the CSS setup will do the rest, throwing out some cool stuff to highlight the current/selected menu.

So, how any pages under System's menu tells Template that they belong to it? As simple as this:
class UsersCRUD extends Template<System> {

Done! How this works? Let's check what's happening inside Template's default constructor:
public abstract class Template<M> extends WebPage {
public Template() {
Class<M> clazz = (Class<M>) ((ParameterizedType) getClass()

add(new MenuItem("system", System.class, clazz));
add(new MenuItem("about", About.class, clazz));

And here goes the code for MenuItem:
public class MenuItem extends WebMarkupContainer {
/* Here the magic happens with CSS... */
public String getMarkupId() { return "current"; }

public MenuItem(String id, Class<? extends Template> linkTo,
Class<? extends Template> currentGeneric) {

boolean isCurrentPage = currentGeneric.equals(linkTo);
add(new BookmarkablePageLink("link", linkTo));

How about that? One simple equals and the conditional menu is done!

Oh, don't forget that Template is an abstract page and so, it has somewhere a <wicket:child/> so UserCRUD can be a subclass and do a composite page through inheritance.

Have fun Wicketers!!


LinkedIn: www.linkedin.com/in/brunocborges
Twitter: www.twitter.com/brunoborges
Comprei e Não Vou
Rio de Janeiro, RJ Brasil
São Paulo, SP Brasil