Tuesday, December 04, 2007

Branding a Wicket application with Maven 2

This is a follow up to my post on how to brand a Wicket application using Ant filtering. This is an update on how to do the same thing with Maven. It's a repeat of that post, but with the Ant section changed to use Maven instead.

The Style feature in Wicket is for skinning your application, which for a corporate site is another way of saying branding. Having set the style property in the session, it is then available to you anywhere in the application where you need to use it. In addition, the property file resolver automatically takes style into account. There is also some support built into ResourceReference to enable resolution of resources other than property files.

First some examples of how to use this solution, then how to implement it.

Simplest Example


add(new Label("page.title", getString("page.title")));


<span wicket:id="page.title">Page Title Goes Here</span>


page.title=Welcome to Company A!


page.title=Welcome to Company B!

There are two properties files, distinguished by "_brand", and Wicket automatically resolves them.

An alternative to the above, showing how to do the same thing with one properties file:

This is an alternative to creating separate properties files for each brand. The style property in the session gives you the flexibility to put all the branding strings in one property file. This can be useful if you have complex strings containing lots of variable interpolations, or if you want to minimize the number of properties files that need to be sent to a translator.


page.title=Welcome to ${pageTitleBrand}!
page.title.companya=Company A
page.title.companyb=Company B


add(new Label("page.title", new StringResourceModel("page.title", this, new Model(this))));
public String getPageTitleBrand()
return getString("page.title."+this.getSession().getStyle());

Example of branding CSS (style sheets)


/* Image supplied by branded CSS */
#top-section {
position: relative;
left: 0;
top: 0;


#top-section {
background-image: url("/app/images/banner_companya.gif");


#top-section {
background-image: url("/app/images/banner_companyb.gif");


/* All CSS styles except for those that are branded */
add(HeaderContributor.forCss(Index.class, "Index.css"));
/* Branded CSS */
add(HeaderContributor.forCss(new ResourceReference(Index.class,
"Index.css", null, this.getSession().getStyle())));

Here we make use of Wicket's support for styles in ResourceReference. Of course, it would be nicer if Wicket's support for the resolution of CSS (and other resource file types) was as automatic as for property files. That is, if you use the constructor ResourceReference(Index.class, "Index.css") it should automatically look for Index_brand.css.

Branding Images


public class FaviconLink extends ExternalLink
public FaviconLink()
super("favicon", "/app/images/favicon_"+Session.get().getStyle()+".ico");

Note that in this case we use Session.get().getStyle() because ExternalLink does not have instance access to the session. Fortunately, it's easy enough to get at it.

How it works

A convenient way to initialize the the session with the brand is to set it in web.xml:




protected QuickStartSession(final WebApplication application)
// Read brand from web.xml
String brand = ((WebApplication) Application.get()).getWicketFilter()
if (brand == null)
brand = "companya";

Now to use Maven filtering to set the brand. Put your pre-filtered web.xml in src/main/resources (or wherever you like, actually):




<!-- Copies web.xml to target/classes and filters ${brand} in the process -->
<!-- Gets the filtered web.xml from target/classes -->

This will copy web.xml from src/main/resources to the location target/classes and in the process replace the branding token. Then the war target builds the WAR using the filtered web.xml.

1 comment:

truecube said...

thank you for mentioning about the copying of web.xml from target/classes - the maven docs on filtering resources doesn't mention that