Wicket-Bootstrap – Navbar und Pageparameters – aktives Item setzen

Leider ist der Eintrag nur auf Amerikanisches Englisch verfügbar. Der Inhalt wird unten in einer verfügbaren Sprache angezeigt. Klicken Sie auf den Link, um die aktuelle Sprache zu ändern.

Apache Wicket is a Java-Framework to create web applications. Wicket-Bootstrap combines it with Bootstrap to ease the process of GUI implementation.

Navbars in Wicket-Bootstrap

You can add a Navbar to your page with just a few Java lines:

Navbar navbar = new Navbar("navbar");

navbar.addComponents(NavbarComponents.transform(
	Navbar.ComponentPosition.LEFT,
	new NavbarButton(ExamplePage1.class, "page1")));
navbar.addComponents(NavbarComponents.transform(
	Navbar.ComponentPosition.LEFT,
	new NavbarButton(ExamplePage2.class, "page2")));
navbar.addComponents(NavbarComponents.transform(
	Navbar.ComponentPosition.LEFT,
	new NavbarButton(ExamplePage3.class, "page3")));

add(navbar);

The corresponding HTML line in the page would be

<div wicket:id="navbar"></div>

You can click the buttons in the Navbar and the active page will be highlighted automatically.

Navbar and PageParameters

So far, so good. I stumbled when I tried to implement navigations generated by Lists. All Links call the same page and chance the content on the page depending on the PageParameters. The Java code would look like this:

Navbar navbar = new Navbar("navbar");

List pages = new ArrayList();
pages.add("page1");
pages.add("page2");
pages.add("page3");
		
for (final String page : pages) {
	PageParameters params = new PageParameters();
	params.set("page", page);
	
	navbar.addComponents(NavbarComponents.transform(
		Navbar.ComponentPosition.LEFT,
		new NavbarButton(ExamplePage.class, params, Model.of(page))));

}

add(navbar);

In this example all Navbar buttons get active and highlighted when I click on one button, because they all link to the same page.

Solution: Highlight active item depending on PageParameters

In order to change this, I had to add the following Override function:

navbar.addComponents(NavbarComponents.transform(
	Navbar.ComponentPosition.LEFT,
	new NavbarButton(ExamplePage.class, params, Model.of(page)){

		@Override
		public boolean isActive(final Component button) {
			return super.isActive(button) && 
		           button.getPage().getPageParameters()
		           .equals(getPageParameters());
		}
	}
));