Skin Web applications using Xkins

Add skinning capabilities to your Web application

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.

Figure 1 illustrates Xkins's role in a Web application.

Figure 1. Xkins's role in a Web application

A Web application that uses Xkins and Struts through taglibs follows this request lifecycle:

  • Struts initializes Xkins with the Xkins plug-in.
  • Struts controller receives the HTTP request.
  • Struts executes the process and forwards it to the JSP page view.
  • The JSP page uses taglibs to render the page.
  • The taglib uses Xkins through the Xkins facade: XkinProcessor.
  • XkinProcessor gets the user's skin and the template that the taglib commands to render.
  • XkinProcessor uses the TemplateProcessor associated with the template.
  • The TemplateProcessor is the class responsible for rendering the UI piece that composes the skin. The TemplateProcessor could use Velocity, JBYTE (Java By Template Engine), Groovy, or other template engine to render the output.
  • 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 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 requires changing the Java code and redeploying the application. Xkins allows you to externalize HTML generation by placing HTML in definition files (XML files). In addition, Xkins allows you to keep plain HTML formatting tags out of JSP pages to further externalize the application's look and feel.
  • Define a skin structure: Templates, resources, and paths compose a skin. Resources can be either constants or elements like images and CSS files. Defining paths helps you organize your skin files. Defining templates helps you reuse the pieces of the UI throughout your application.
  • Allow extensions to the Xkins framework: You can extend Xkins to use your own template language for rendering according to your needs. If you need, for example, image generation, you can implement a template processor that takes a template and generates an image. Xkins comes with template processors based on Velocity and JBYTE. If you prefer Groovy, for instance, you could create a Groovy template processor to render your UI pieces.
  • Split UI in basic elements: In Xkins, you can strip all the UI's pieces and create templates with them. In this way, you can reuse these pieces and change anything you need to make a skin look different.
  • Use inheritance to minimize skin maintenance: In Xkins, a skin can extend other skins and use all templates, paths, and resources that its parent has. Thus, you reduce template maintenance.
  • Use composition to create skins: In addition to inheritance, Xkins also uses composition to minimize maintenance and promote reuse of your templates. With this feature, users can create their own personalized skins from your application by selecting different pieces of the UI from existing skins.
  • Define a skin type: Using a skin type, you can assure that all skins loaded in an Xkins instance have at least the same templates as the type. A skin type is the skin of which all other skins must extend to be valid in an Xkins instance. By Xkins instance, I mean a group of skins loaded together for use by the Web application.

One important benefit Xkins offers 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, detect where the excessive HTML generation is or decide what images could be stripped, and then change the templates to reduce page size. You could also have a lightweight skin for those users accessing your Web application with low-speed connections and a richer skin UI for broadband users.

Note that you can use Xkins along with CSS. In fact, CSS use is recommended for font styles and colors, because reusing CSS classes prevents the need to explicitly indicate the font face each time, thus minimizing page size.

A skin can be encapsulated into a single file (zip file) for easy deployment in a Web application. If you define a skin type, third-party skins can be added to your Web application if they conform to the skin type you declare.

You can use Xkins in many ways, but using Xkins with taglibs offers the best approach in a Web application. You can use these tags to generate your pages or to decorate your existing tags.

Defining a skin

Here are some tips for defining a skin:

  • Determine skin colors; use global constants so other skins can extend and override them.
  • Create reusable templates for each taglib.
  • Create templates with elements that can be overridden by an extending skin, so the whole template doesn't have to be rewritten to change the UI's appearance.
  • Create a basic skin for your Web application and use it as the type for your Xkins instance.
  • Avoid placing HTML inside Java code. If you have a taglib, servlet, or even a JSP page that has HTML code, consider migrating this HTML to an Xkins template.

Example

We now walk through the phases of defining, designing, developing, and deploying Xkins in a simple Web application that requires skin management. In our example, we implement an application that registers subscribers for two online bookstores: Amazing and Barnie & Nibble. The application will be used in both sites (through a frame, a portlet, or whatever format the stores choose), but must have a look and feel specific to each bookstore.

To implement our application, we follow these steps:

  1. Obtain HTML pages with each skin
  2. Determine skins' templates
  3. Create the skins
  4. Use the skins
  5. Deploy the Web application

Obtain HTML pages with each skin

First of all, we receive the graphical design of the page provided by each bookstore. That material could be the page prototypes and should contain all possible page elements appearing in the application to be skinned (in our example, just one page)—see Figures 2 and 3.

Figure 2. Amazing's look and feel
Figure 3. Barnie & Nibble's look and feel

As we can see, both pages have different colors, images, and field layouts. In addition, the required information indicators differ, plus Amazing's buttons are in GIF format, while Barnie & Nibble's button is an HTML button with styles.

Determine skins templates

Now we must clip pieces of these pages to generalize some templates for our application to use. We could start from zero, or we could base our HTML dissection in a basic skin used to create forms. This basic skin comes with the Xkins framework in Xkins Forms tags. Xkins Forms is an implementation of taglibs that uses Xkins to generate forms for Web applications.

The basic skin defines frame, field, button, etc. We should use this skin and add the templates our application needs (for instance, the branding). This basic skin also allows us to use Xkins Forms tags to generate our JSP pages.

Let's see a list of the templates we need:

  • frame: The table containing the whole form
  • frameMandatoryCaption: The text indicating mandatory fields
  • field: Coordinates the layout of both label and input
  • fieldLabel: The piece of text containing a label
  • fieldLabelMandatory: Piece of text indicating a mandatory label
  • fieldInput: Controls input
  • fieldInputMandatory: Indicates the input is mandatory
  • button: The command button to execute the action
  • branding: The branding corresponding to each bookstore

Create the skins

Once the different pieces of our UI are determined, we create both skins using Xkins. We start by naming them in the xkins-definition.xml file:

<?xml version="1.0" encoding="UTF-8"?>
<xkins>
   <skin name="base" url="/skins/forms/base" definition="/definition.xml"/>
   <skin name="amazing" url="/skins/forms/amazing" definition="/definition.xml"/>
   <skin name="bn" url="/skins/forms/bn" definition="/definition.xml"/>
</xkins>

Now, we must create a directory structure in our Web application's ROOT directory according to the defined configuration file shown in Figure 4.

Figure 4. Skin directories

In each subdirectory, we place the definition.xml file describing the skin. We will walk through some templates of the skin. To see all of the example's templates, download the source code from Resources.

Let's look at the skin definition syntax contained in the definition.xml file of Amazing's skin:

<skin name="amazing" extends="base">
</skin>

base is the default skin that comes with Xkins Forms and helps us skin our application. Amazing's skin extends it (so does Barnie & Nibble's). We now start overriding the base skin's templates for each skin, starting with the field template:

<skin name="amazing" extends="base">
   <template name="field" group="field">
      <content><![CDATA[ $label $input ]]></content>
   </template>
   <template name="fieldLabel" group="field">
      <content><![CDATA[
<td align=right 
   style="font-family: verdana,arial,helvetica,sans-serif; font-size: x-small;"><b>$label:</b></td>
         ]]></content>
   </template>
   <template name="fieldLabelMandatory" group="field">
      <content><![CDATA[
<td align=right 
   style="font-family: verdana,arial,helvetica,sans-serif; font-size: x-small;"><b>$label:</b></td>
         ]]></content>
   </template>
   <template name="fieldInput" group="field">
      <content><![CDATA[
<td colspan="$colspan" 
   style="font-family: verdana,arial,helvetica,sans-serif; font-size: x-small;">$input (Optional)</td>
         ]]></content>
   </template>
   <template name="fieldInputMandatory" group="field">
      <content><![CDATA[      
<td colspan="$colspan"><strong>$input</strong></td>
         ]]></content>
   </template>
</skin>

All the above templates are Velocity templates. Notice that the parameters are passed the template, and variables like $colspan can be used. These parameters are passed by the XkinsProcessor, which is called by the taglib.

1 2 Page
Recommended
Join the discussion
Be the first to comment on this article. Our Commenting Policies
See more