Monday, March 16, 2009

CSS - Wicket Menu bars

Premise: To get re-acquainted with Wicket and CSS, and to become familiar with an implementation of menu bars for the Devcathlon project.
To follow along with this entry, I'm assuming that you are familiar with Wicket. You may checkout a read-only copy of ics-wicket-example-5 from here. There you will also find previous introductory examples to Wicket and various easy to access links to required libraries for Wicket.

Dissecting CSS of "menu.css"
1. Set list item tab as active:
body.section-1 #menu li#nav-1 a, ... { background: white; ... }
2. Hide inactive sub navigation links:
#menu #subnav-1 { display: none; ... }
3. Left-justified unordered sub navigation list:
body.section-1 #menu ul#subnav-1 { display: inline ... }
4. Set sub navigation list tab as active:
body.section-1 #menu ul#subnav-1 a { background: white; border: none ... }

Add new entries to the Wicket menu bar
BasePage.java:
1. Create third menu and include 10 more sub menus beneath it.
add(new Link("Menu3Link") { public void onClick() { setResponsePage(new Menu3Page())}});

2. Add sub menu links
add(new Link("SubMenu5Link") { public void onClick() { setResponsePage(new SubMenu5Link())}});

Modifying CSS attributes via Wicket
One of my collegues from class suggested using a "get" resource request to retrieve the resource link, then modifying its CSS class attribute with the following code:
get("menuLink").add(new SimpleAttributeModifier("attribute", "value"));

This code does exactly what its intended to do, but after looking over the Wicket 1.3.x API's, I found this interesting bold text in all caps, "THIS METHOD IS NOT PART OF THE WICKET PUBLIC API. DO NOT USE IT. " This was to address the "get" method which is documented here. So I did a quick Google search and came across this posting which, if applied, should have the same effect. Here's the code if it were applied to this CSS experiment in file Menu1Page.java
... WebMarkupContainer menuLink = new WebMarketContainer("Menu1Link");
menuLink.add(new AttributeModifier("class", new Model("selected")));
addOrReplace(menuLink); ...
Note: Entire code segments are included within the distribution file below.

Conclusion: Although this experiment was fairly short, the CSS and Wicket refresher will be duly noted.

Distribution file: wicket-example05-1.0.318.zip

No comments: