Ich bin Deborah.
Schaut euch meine Arbeiten
an oder lest meinen Blog.

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());
		}
	}
));

Sag etwas

Deine email-Adresse wird nicht veröffentlicht.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Artikel zum Thema "Blog":

(English) The Art of Coding(English) Imperfect Mandalas(English) Autumn Leafs(English) Color Explosion #25 Jahre KAZOOSH!FarbexplosionUbuntu 15.10, MongoDB und node.jsSpeed of Fencing Remixgit cheat sheetFraktaleofxSortableListHäkeln: Haarband mit JeansknopfWandmalen zu Marias GeburtstagLinux / Ubuntu + Serato Vinyl Control System + Pure DataWicket-Bootstrap – Navbar und Pageparameters – aktives Item setzenLinux Console MerkzettelCrawling Traces @Deutscher Multimediapreis mb21Crawling Traces History Viewernew.livestream.com unter Ubuntu mit VLC abspielenCrawling Traces at Hechtfest / hechtgruenLinksammlung: Datensicherheit, soziale Netzwerke und sicheres MailingFix: VMware Player Crash unter Ubuntu 13.04Xubuntu: Wenn Dockbarx Thunar oder das Terminal nicht startet.Ubuntu 12.10, libwebsockets and OFSetting up Meteor with Ubuntu 12.10 on an NTFS share partitionWebauftritt: KAZOOSH!Zwischenstand IsolinienDas Scheunentor wird buntSkype auf Ubuntu 10.10 oder 11.04 64bitElitebook 8440p vs UbuntuKryptografie & Datensicherheit – NotizenRandom Compilation IIRandom Compilation IAll You Can Eat in DresdenWebauftritt: ESE 2010