Skinning web applications using Xkins

[ Next >> ]  [ Print version ]

Sep 2004

In this article, we see what is skinning a web application and how you can achieve this by using Xkins Framework. Xkins is a framework that manages skins for your web application. you can use Xkins along with other UI frameworks, like Struts and Tiles. In the article, we walk through an example of an application that needs 2 skins and finally add a new and really different skin.

What is to skin a web application? Skinning is to give it a different look and feel. A skin changes the way the user interface looks like, but doesn’t change it’s behavior nor what happens when the user clicks a button. A skin is the term given to a user interface appearance. Changing the skin results in changing the way the application looks like, but in order to achieve it, your web application should be aware of using a skin.

Skinning a web application is not an easy task. You can use CSS and change image’s paths, but you are limited to what you can do with CSS. If you have a component that look completely different in each skin, CSS could not be enough if HTML is different in each skin, though it could be if just changing styles solves your problem. A good approach to create a Skin is to determine each piece of the User Interface and try to generalize these pieces to apply an appearance to each one.
For example, if you have a frame component in Skin “A” that is just a plain table and in Skin “B” is a complex table with headers, footers, images and even sounds, a different HTML (more TRs, more TDs) should be generated for the frame in each skin: CSS for this situation is not enough. As an example, let's supouse that in Skin A, the HTML that needs to be generated for render a label is as follows:

<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 see, these two "pieces" of UI are completelly different in each Skin. They both have the same information (This is my Label) but are rendered with different HTML tags. This couldn't be done just with CSS. Perhaps using XSL/XSLT could be an option...
Or you could use Xkins.

Why should I skin a web application? Well, there are several motives for you to do this, but certainly it is not always a must-to. In a simple application skinning it would be over killing (apply KISS pattern), but in some situations you have to deal with this feature:

• Skin is a requirement for the system: the user should be able to select it’s own skin or even create his own.
• Give Skin capabilities to an enterprise component framework: If you are a developer and you create different solutions to different clients, you could reuse all your components (taglibs) just changing the skin for each client if your components have skinning capabilities.
• A different skin is needed according to business scenario: For example, in a marketplace application or a multi banking one, there could be different entities working in the same system and you would need to brand the application (not only branding but also application look&feel) according to the user’s corporative image.

What is Xkins?

Xkins is a framework that manages skins for your web application. In early Java-Server-Side days, you used to put HTML hardcoded in a Servlet. Then, JSP came to allow you to put your HTML outside Java code. Nowadays, the same happens with taglibs that have HTML tags hardcoded in Java code. Using Xkins you can put this HTML outside your code with an additional and powerful feature: Skins. For a detailed information about xkins, visit Xkin's home page.

Xkins role in a web application is shown in the following high level graph:

This is a request life cycle of a web application that uses Struts and Xkins through taglibs: Struts initializes Xkins with XkinsPlugin Struts controller receives que HTTP request. Executes the process and forwards to the view JSP The JSP uses taglibs to render the page. The taglib uses Xkins through Xkins facade: XkinProcessor. XkinProcessor gets the user Skin and gets the template that the taglib commands to render. XkinProcessor uses the TemplateProcessor associated to the template. The TemplateProcessor could use Velocity, JByte, Groovy, or other template engine to render the output. The TemplateProcessor is the class in charge to render the piece of user interface that compose the Skin. The TemplateProcessor uses the resources from the Skin (elements and paths) and returns the result of the template processing to the taglib The taglib renders the result of the template processing out to the web browser.

Xkins addresses skin management by following these basic concepts:

• Keep all HTML generation out of Java code: Taglibs usually generate HTML code. Changing this code results in changing Java code, and redeploying the application. All HTML must be in definition files (XML files) to externalize HTML generation to Xkins. Also keeping plain HTML formating tags out of JSP could help to externalize completly the application look and feel to Xkins.
• Define a skin structure: A Skin is composed by templates, resources and paths. Resources can be either constants or elements like images, CCS files, and so on. Defining paths can help you to organize your skin files. Defining templates helps you to reuse the pieces of the User Interface through your application.
• Allow extending Xkins framework: You can create extensions to Xkins in order to use your own template language to render according to your needs. If you need for example an image generation, you can implement a Template processor that takes a template and generates an image. Xkins comes with TemplateProcessors based on Velocity and JByte. You could create a Groovy TemplateProcessor, for instance, to render the pieces of your UI if Groovy is of your preference.
• Split UI in basic elements: You must be able to strip all User Interface’s pieces and create with them templates in Xkins. In this way, you can reuse these pieces and change anything you need to make a skin look different to other.
• Use inheritance to minimize skin maintenance: A skin can extend other skin and so can use all templates, paths and resources that it’s parent has. So you can reduce template maintenance.
• Use composition to create skins: you can not only use inheritance, but also composition to minimize maintenance and promote reuse of your templates. With this feature, users can create their own skins from your application by selecting different pieces of the UI from existing skins and therefore creating their personalized skin.
• Define a Skin Type: Using a skin type you can assure that all skins loaded in a Xkins instance has at least the same templates as the type has. A skin type is the skin on whose all other skins must extends in order to be valid in a Xkins instance. By Xkins instance I mean a group of Skins loaded all together to be used by the web application.

One important benefit that you get using Xkins is that all HTML is in one place and if you need to "tune" it you just simply change the templates. For instance, if your pages are "too big", you can detect where the exesive html generation is or what images could be stripped out and then change the templates in order to reduce page size. You could also have a "lightweight" skin for your application for users accessing by low speed connections, and have a richer skin UI for broad-band users. Notice that you can use Xkins among with CSS, in fact, it is recomended to use CSS for font styles and colors, because reusing CSS classes helps to minimizes page size by not needing to explicitily to indicate the font face each time.

A skin can be encapsulated in a single file (zip file) to be easily deployed in a web application. If you define a Skin Type, 3rd party Skins can be added to your web application if conforming the Skin type you declare.

There are a lot of ways to use Xkins, but used with taglibs is the best approach in a web application. You can use these tags to generate your pages or as decorators of your existing tags.

Defining a Skin

These are some tips in order to define a skin:

• Determine skin colors - Use global constants to allow be extended and overridden by other skins.
• Create reusable templates for each taglib.
• Each template should use elements to allow an extending skin to override these elements and not to rewrite the whole template, so changing the appearance.
• Create a basic skin for your web application and use this skin as the type for your Xkins instance.
• Avoid placing HTML inside Java code: If you have a taglib, servlet or even JSP that has HTML code, evaluate to migrate this HTML as a Xkins Template.

[ Next >> ]  [ Print version ]