Skins

Problem

The application needs to look different depending on the scenario.

Solution

Create a pluggable look and feel architecture for your application, enabling third parties to customize it.

Context

There are several different scenarios where this pattern can be applied, and all are very common.

The ability of skinning application was popularized by consumer oriented applications like WinAmp or ICQ, which had a large user base that included people who were willing to change the visual design of the application.

Websites also provide ways to let users select among different skins, that can be created or shared by users.

Lately, the need of separating the code from the visual design is making possible to do skinning in almost every well architected application. HTML+CSS, Windows Presentation Foundation, and tools like Infragistics’ AppStyling enable developers to build applications without worrying about the visual design, and enable designers to “skin” most applications.

Rationale

The look and feel of a desktop application or a website could need to be changed for several reasons. You could want to give your users the opportunity to have a totally different experience with the product, or you could want to sell your application to a enterprise customer that needs to customize it to their corporate standards.

There are different levels of customization starting from letting the user change fonts and colors, to let him change layouts, shapes or UI controls.

There are two kinds of users here, the ones who like creating skins and the ones who like using them. By enabling skinning in your applications, your product will be more appealing to both audiences. For the skin designers, skinnable applications fulfill another basic human need: creativity.

A lot of consumer-oriented products are deeply skinnable, so if you are working on that market, evaluate providing such capabilities.

Implementation

The way to implement this pattern depends heavily on the UI technologies involved. Some platforms have standard ways to do it. Windows XP is subject to skinning by default and a product called WindowsBlinds push those capabilities further by changing the way native colors are drawn. Web applications can use HTML and CSS.

In desktop applications, some products let skinners define simple bitmap fragments that are positioned at specific pixel locations. The skin developer can create images for corner titles, horizontal borders and buttons with their different states (like pressed or rollover). In these cases the layout remains the same. ICQ skins work like this.

Static bitmap skin implementation, courtesy of the tutorial at http://www.geocities.com/bakerstr33t/

Other applications like Windows Media Player let skin to totally change the layout, shape, and add more functionality. As they require some coding, they are harder to produce, but the skinner has a lot of freedom to achieve whatever she wants.

Skins are sometime objected because they make interfaces harder to use. This of course depends on how well designed the skin is. As in any UI, there are good and bad designs. However, even if that’s the case, it could not be a problem if the users understand the application well. If the usability is good enough, personal aesthetic preferences could take over. If skins available, users will decide by themselves what’s best for them.

In the Java world, there is a toolkit called Swing that provides a pluggable look and feel framework, however there is no agreement among Java developers about how useful it is. Swing look and feels try to skin applications so they can look closer to the platform they are running, but they can’t take advantage of the full power of it. “Cross platform” look and feels, on the other hand, don’t look like native applications.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

Skins can be easily created using AppStylist for ASP.NET for all NetAdvantage ASP.NET controls that can be used in an ASP.NET application. These skins can be applied at design-time or run-time giving complete control to style an application dynamically. Check out the samples browser to see it in action.

Windows Forms

Skins can be easily created using AppStylist for Windows Forms for all of the NetAdvantage for Windows Forms controls and Microsoft controls using the InboxControlStyler. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called Style Library Browser to see it in action.

WPF

You can implement this pattern using the ThemePack capabilities that Infragistics has built for the NetAdvantage for WPF controls.

Sources

Jennifer Tidwell, Designing Interfaces

Thomas Kunneth, Using Swing’s Pluggable Look and Feel

Tags

Visual Design.