You can use Xkins along with other UI frameworks, such as Struts and Tiles. Here, I walk you through an example application that needs two skins and illustrates how to add a unique skin to it.

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.

Read the full article at Skin Web applications using Xkins

It is interesting to compare this to SiteMesh. One of my frustrations is to see a lot of CDATA, embedding HTML in an XML skins template

http://wiki.opensymphony.com/display/WW/Webwork+2+skinning

xskins seams painfull

Or you could just use CSS Zen Garden, :-): http://www.csszengarden.com/

+1 for CSS!

+1 for painful!

/Tommy
VisionProject
Bugtracking made simple

CSS Zen Garden http://www.csszengarden.com/

I can't imag'ne moving my struts application UI to another framework --xkins , webwork or whatever . CSS can be fitted into existing jsps. But of course, one size does not fit all !

CSS, XSLT and XML will do wonders for most skinning tasks.
I see no point in using a skinning api, especially if it is overly complex.

CSS, XSLT and XML will do wonders for most skinning tasks.I see no point in using a skinning api, especially if it is overly complex.

Agreed. Context-sensitive skinning is what drove the maturation of IE's MSXML. I wonder if there's anything a servlet skinning API can do that CSS+XSL can't? XSL is the only skinning facility that is tier neutral; it can run on either the client or the server.

Generate semantic xhtml from your webapp, and use css to control the page design and layout. See The Web Standards Project.

http://wiki.opensymphony.com/display/WW/Webwork+2+skinningxskins seams painfull

Oh great now I can have 50 different versions of my jsp. This is really for request type and not styling. Not that Webwork is not a great project.

Developing cross browser CSS can be a real pain in the behind, but it appears using this framework might be even more painful.

In fact, skinning an application is a real pain. Xkins is an option for doing this, but certainly not the only one.

In Xkins you have the "pieces" of the UI in templates, and by pieces I mean for instance a "frame" or a "button" or a "title", etc.

For example in skin A, a "title" could be:
<div class="myTitle">This is my title</div>

And in Skin B:
<table><tr>
<td><img src="/top.gif"/></td>
<td>This is my title</td>
<td><img src="/bottom.gif"/></td>
</tr></table>

Here, the HTML is completelly different and Xkins solves this scenario.

But if you don't need this huge skin change, just using CSS (myTitle) is enought. It really depends on the customer requirements and your skinning capabilities needs.

We use Xkins in a large project with four skins, and one of them has no images for a lightweight skin and the others has images and different look&feel and HTML. In this application, there are a lot of enterprises working in the same system and each one has their own graphical design and we have to fit in each one corporate image. Xkins gives us the flexibility to do this without restricting the corporative image and look&feel. And if a new Skin is needed, we just extend an existing one and change the templates to fit to the new skin look&feel.

Regards.
Guillermo Meyer.

Since everyone seems to be mentioning their personal favourite skinning technology, so I thought I'd bring my 2c:

Millstone ( http://www.millstone.org ) comes with advanced skinning support -- or more specifically the Millstone WebAdapter (since Millstone is not limited to web use), and they are called "themes".

Though implementing a complete theme from scratch is a rather complex task, customizing a theme to suit your needs is not: the "themes" are extendable -- you can inherit the default theme, and just change the parts that you want. You can also apply a "style" to some component instance to adjust the look&feel of that particular instance.
The themes are implemented in xsl files (plus .css, .js, etc), arranged in a hierarchical manner, so it's quite easy to modify a particular component. Of course you're in trouble if you're allergic to xsl ;-)

The documentation about "theming" Millstone is somewhat limited currently, but you should be able to get the hang of it by looking at existing themes. Hopefully there will be a tutorial available soon.

Lets review the most common ways to skin:

* CSS By Itself
* Formatting Objects - XSL-FO
* Request Type Styling - WebWork 2
* XSL + XML Transform with request type and style setting
* Custom JSP Styling Tags - Struts, JSF, XSkins, WebWork 2 and many more
* And More and I thought the MVC market was flooded

CSS is basically only simple style for html.

FO is like JSP styling tags in xsl. Oh goody more presentation tranformation.

Request type styling requires a whole bunch of presentation pages whether its jsp or other. Really suited for choosing response type like wml or html and not style.

XSL + XML requires a bunch of custom presentations, but very flexible. Although, no set standard structure.

Custom JSP Styling Tags. Basically a presentation converter.

I personaly have stayed away from Styling tags. From experience I can say that using any combination of all types is possible, but be prepared to make changes moving between them. I like power and control over everthing so I use XSLT and generate most of my JSP pages. XSkins looks a like just another entry. If your new just start using one and get to work. After a while you will realize they are all mostly the same.

Xkins encourages you to split your UI in pieces. This can be compared to an abstraction of your UI. This abstraction consists in the different templates and elements that compose your Skin (SkinType in Xkins). XkinsForms is an example of an abstraction of UI that have forms, buttons, fields, rows, etc.
In each skin, you implement this abstraction, and you can use inheritance and composition between skins. This helps you to identify the UI parts and reuse them, avoiding duplication. Xkins framework is based on this concept. You can extend XkinsForms and add your templates to this abstraction for your UI (you can add branding parts, help elements, etc. that are not contained in XkinsForms, so you are here defining a new SkinType for your application).

So your JSP pages do not use HTML tags nor CSS styles, but use this abstraction through Custom Tags.
JSF (Faces) use renderers to do this, and Xkins can be used in the renderers to generate the HTML. XkinsFaces is a starting point of this concept.

Xkins is not excluyent to CSS. You can use Xkins along with CSS. But if for example in one skin you want to add a flash object to a piece of your UI, with Xkins this can be done.

Xkins can also be used out of the web environment (for example in a Service or in an EJB) to process templates (as a facade of other templating tools)

Skinning web apps is difficult and we have several ways to achieve this. Xkins is one alternative and certainly not the only one. And each alternative has its pro and cons. You should decide according to your needs and customer requirements, and having in mind what are these pro and cons in each case.

Regards
Guillermo Meyer

It is interesting to compare this to SiteMesh. One of my frustrations is to see a lot of CDATA, embedding HTML in an XML skins template

If you dont like CDATA[] tags in xml, you could use <content url="/youtTemplateFile.vm"/> so you can externalize yout templates out of the XML.

SiteMesh is a web-page layout and decoration framework and could be used also to skin. SiteMesh intercepts the HTML generated by the JSP and decorates it. Xkins generates the HTML in the first time. You can use Xkins along with SiteMesh, because they do not overlap.

Cheers.
Guillermo Meyer.