Adventure With Wicket - Custom Controls

As I mentioned in my introduction, I am developing a web site and I am using Apache Wicket as my Java Web Framework. Today I decided to tackle creating a custom web page control that would encapsulate a tabbed menu bar that you find frequently used on web pages. The common method to implement a tabbed menu bar is through a combination of HTML, css and JavaScript on the client side and some server side scripting as well. As Wicket is often described as being just HTML and Java I thought this would be a good candidate to encapsulate into a Wicket custom component. So with my copy of "Wicket In Action" (a book by Martijn Dashorst and Eelco Hillenius, which is published by Manning and I highly recommend) in hand I set out to implement the control. First, like any good developer, I came up with a number of requirements which I've identified as follows:

• The tabbed menu bar will be rendered in the browser using the ul and li tags which is a common practice employed by web page designers. When combined with the correct style sheet attributes the list can be rendered horizontally:

• The number of tabs displayed in the menu bar must be dynamic and defined by a model which in essence would consist of a list of menu tab items. Below is the MenuItem Java class that I defined to represent a single menu bar tab:
• As for usability, the control must be configurable and provide options that specify styling for the selected and non selected tabs, identity of the current tag, a model representing the list of MenuItems, and an id which will be used to render the html id attribute of the containing html div tag for the control's child html elements. The id is important because it will be used to customize the JavsScript that is rendered to provide client-side scripting of the control but more on that later. Here's the Java code for the custom control:

With the requirements identified and the implementation complete, all that is needed is a test. Here's a simple html snippet showing the tag that will be replaced by the Wicket panel hosting the control: And here is the Java code to instantiate the control in the page:

And here is how the control appears when it is rendered in the client browser: Overall, developing custom controls for Wicket applications isn't difficult and I find it much more intuitive than when I've done similar tasks with other frameworks . I use sort of a top-down approach to this kind of task, which allows for an iterative development process where each iteration adds more functionality and specificity. There were a number of topics that I admitedly didn't touch on here such as the generation of the client-side JavaScript and the use of the AbstractReadOnlyModel class. I will discuss these in a future article.