Skin Web applications using Xkins

Add skinning capabilities to your Web application

By Guillermo Meyer, JavaWorld.com, 10/25/04

A skin refers to a user interface's appearance; it gives a Web application a different look and feel. A skin changes the way the user interface appears when a user clicks a button, but does not change the UI's behavior. A change in the skin thus results in a change to an application's appearance, but to achieve that modification, your Web application must know how to use a skin.

Why should you skin a Web application in the first place? Well, there are several motives for using skins, but certainly they are not always a must. In a simple application, skinning it would be overkill, but in some situations, as described in the list below, you must deal with skins:

• When the skin is a system requirement: When the user can select his own skin or even create his own.
• When you want to give skin capabilities to an enterprise component framework: If you create different solutions for different clients, you could reuse all your components (taglibs), if your components have skinning capabilities, by just changing each client's skin.
• When a different skin is needed according to a business scenario: For example, in a marketplace or multi-banking application, different entities are working in the same system and you need to brand the application according to the user's corporate image.

Skinning a Web application is not an easy task. You can use Cascading Style Sheets and change an image's path, but you are limited to what you can do with CSS. If you have a component that looks completely different in each skin, that is, if the HTML differs in each skin, CSS won't help you. However, you could use CSS if simply changing styles solves your problem.

A good approach to creating a skin is to determine each piece of the user interface and generalize these pieces to apply an appearance to each one. For example, if, in Skin A, you have a frame component that is just a plain table and, in Skin B, a more complex table with headers, footers, images, and even sounds, different HTML (more <tr> and <td> tages) should be generated for each skin's frame. As an example, let's suppose that in Skin A, the HTML that must be generated to render a label is:

<p>This is my Label</p>

Now, in Skin B, this is how a label would be rendered:

<table background="/images/tablebg.gif">
   <tr>
      <td bgcolor="#0000FF">
      </td>
      <td background="/images/cellbg.gif">
         This is my Label
      </td>
      <td bgcolor="#0000FF">
      </td>
   </tr>
</table>

As you can see, these two pieces of UI differ completely in each skin. They both have the same information (This is my Label), but are rendered with different HTML tags. This functionality couldn't be achieved with CSS alone. Perhaps using Extensible Stylesheet Language Transformations or XSL could be an option. Or you could use Xkins.

What is Xkins?

Xkins is a framework that manages skins for your Web application. In the early server-side Java days, you hard-coded HTML into a servlet. Then, JSP (JavaServer Pages) came along to allow you to put your HTML outside Java code. Nowadays, we have the same problem with taglibs that have HTML tags hard-coded in Java code. Using Xkins, you can place HTML outside your code with an additional and powerful feature: skins. For a detailed information about Xkins, visit Xkins's homepage.

Discuss

Subject	Replies	Last post
Building a better forum - beta testers needed! By Athen	0	08/28/08 01:51 PM by Athen
check this out By Anonymous	1	08/17/08 07:08 PM by Anonymous
Skin Web applications using Xkins By JavaWorld	5	08/17/08 07:07 PM by Anonymous
Where is the STRUTS Library for Xkins By	1	08/08/08 04:05 PM by Anonymous
More programming for programmers By matthew_ford	2	09/05/07 05:31 PM by Anonymous
Cannot make Xkins example works By Anonymous	1	05/24/07 07:26 PM by Anonymous