Friday, November 02, 2007

Changing appearances.

Lately I've been working on an application that can serve offices in different countries. So what I hear you say.........I do that every day.............use the 'locale.language', use a bundle and be happy ;-) Ok, I know that, but I want to have changing appearances, not only changing text. That can also be done by using a skin selector for instance like the one below:

<skin-family>#{facesContext.viewRoot.locale.language=='de' ? 'german' :
'english'}</skin-family>

You can use this in the same way as I did in one of my previous posts.

However, I want the application to behave in a way that not the whole look and feel changes, but that only some country specific elements automatically change. I will not go in to the details of the application, but I will try to explain the concept, based on license plates. Imagine a car rental company with cars and offices in different countries.

Whatever country (or even state for that matter) you are in, the license plates are different. Yellow with black numbers, white with red numbers and so on and so on.....

If you have an application in which you show license plates, you can do that by using a 'plain' outputtext field in a table column. This will show the license of the car as plain text.

For me that just doesn't 'feel' right. It would be much nicer if you could add some features that enable you to recognize the country by just looking at the licenseplate.


Wow........... I want that, how can I do that ?

There are several problems here. First one is that licenses have different colors for the background color, the text color and the borders. The dutch plate has a yellow background background-color:rgb(255,255,0);

and a belgian plate has red text color:Red;

You can achieve this by using the styleClass attribute.
<af:column sortable="false" headerText="License">
<af:inputText
id="myLicense"
rendered="true"
value="#{Car.license}"
styleClass="InputLicensePlateStyleNL"
inlineStyle="width:100px;"/>
</af:column>

You can define the style in a css like this;
.InputLicensePlateStyleNL
{

border:2px solid black;
background-color:rgb(255,255,0);
background-repeat:no-repeat;
font-weight:bold;
text-align: center;
color: black;
width:90pt;
height: 20pt;
padding-top: 10pt;
}
If you define all the necessary styles in a css, according to the standard of a country, the looks of the license plate should be recognizable.

A good reader should have noticed by now that something is missing. The styleClass InputLicensePlateStyleNL is only valid for one specific (the dutch) license. This is the second problem. If you want to have coutry specific look and feel, you need something extra.
styleClass="InputLicensePlateStyle#{Car.country}"

You can concatenate a String and EL expression. This will evaluate to a valid value.

Now you can try to take this one step further.
There are license plates that are not country specific, but state specific.


Maybe they even have their own specific background images.


If you really want, you might even try to add county and city to this expression.

styleClass="InputLicensePlateStyle#{Car.country}#{Car.state}"

In the case of this example you would have InputLicensePlateStyle concatenated with US and CA resulting in InputLicensePlateStyleUSCA. This is defined in the stylesheet.
This styleclass has the appropriate background image, and colors to render a Californian plate, and looks like this:
.InputLicensePlateStyleUSCA
{
background-image:url("../images/ca.jpg");
border:2px solid black;
background-color:rgb(255,255,255);
background-repeat:no-repeat;
font-weight:bold;
text-align: center;
color: black;
width:90pt;
height: 20pt;
padding-top: 10pt;
}


This post shows that you can style almost anything, as long as you 'have the looks'. Dynamically building the styleClass is a very powerful (and maybe even hidden ? ) feature. I will use it more often from now on.

No comments: