skin web continues

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.