How to make my applications "skinnable"?

Question

Is there some standard way to make my applications skinnable?

By "skinnable" I mean the ability of the application to support multiple skins.

I am not targeting any particular platform here. Just want to know if there are any general guidelines for making applications skinnable.

It looks like skinning web applications is relatively easy. What about desktop applications?

Answer 1

Skins are just Yet Another Level Of Abstraction (YALOA!).

If you read up on the MVC design pattern then you'll understand many of the principles needed.

The presentation layer (or skin) only has to do a few things:

• Show the interface
• When certain actions are taken (clicking, entering text in a box, etc) then it triggers actions
• It has to receive notices from the model and controller when it needs to change

In a normal program this abstraction is done by having code which connects the text boxes to the methods and objects they are related to, and having code which changes the display based on the program commands.

If you want to add skinning you need to take that ability and make it so that can be done without compiling the code again.

Check out, for instance, XUL and see how it's done there. You'll find a lot of skinning projects use XML to describe the various 'faces' of the skin (it playing music, or organizing the library for an MP3 player skin), and then where each control is located and what data and methods it should be attached to in the program.

It can seem hard until you do it, then you realize it's just like any other level of abstraction you've dealt with before (from a program with gotos, to control structures, to functions, to structures, to classes and objects, to JIT compilers, etc).

The initial learning curve isn't trivial, but do a few projects and you'll find it's not hard.

-Adam

Answer 2

Keep all your styles in a separate CSS file(s)

Stay away from any inline styling

Answer 3

It really depends on how "skinnable" you want your apps to be. Letting the user configure colors and images is going to be a lot easier than letting them hide/remove components or even write their own components.

For most cases, you can probably get away with writing some kind of Resource Provider that serves up colors and images instead of hardcoding them in your source file. So, this:

Color backgroundColor = Color.BLUE;

Would become something like:

Color backgroundColor = ResourceManager.getColor("form.background");

Then, all you have to do is change the mappings in your ResourceManager class and all clients will be consistent. If you want to do this in real-time, changing any of the ResourceManager's mappings will probably send out an event to its clients and notify them that something has changed. Then the clients can redraw their components if they want to.

Answer 4

Implementation varies by platform, but here are a few general cross-platform considerations:

• It is good to have an established overall layout into which visual elements can be "plugged." It's harder (but still possible) to support completely different general layouts through skinning.
• Develop a well-documented naming convention for the assets (images, HTML fragments, etc.) that comprise a skin.
• Design a clean way to "discover" existing skins and add new ones. For example: Winamp uses a ZIP file format to store all the images for its skins. All the skin files reside in a well-known folder off the application folder.
• Be aware of scaling issues. Not everyone uses the same screen resolution.
• Are you going to allow third-party skin development? This will affect your design.
• Architecturally, the Model-View-Controller pattern lends itself to skinning.

These are just a few things to be aware of. Your implementation will vary between web and fat client, and by your feature requirements. HTH.

Answer 5

The basic principle is that used by CSS in web pages.

Rather than ever specifying the formatting (colour / font / layout[to some extent]) of your content, you simply describe what kind of content it is.

To give a web example, in the content for a blog page you might mark different sections as being an:

1. Title
2. Blog Entry
3. Archive Pane

etc.

The Entry might be made of severl subsections such as "heading", "body" and "timestamp".

Then, elsewhere you have a stylesheet which specifies all the properties of each kind of element, size, alignment, colour, background, font etc. When rendering the page or srawing / initialising the componatns in your UI you always consult the current stylesheet to look up these properties.

Then, skinning, and indeed editing your design, becomes MUCH easier. You simple create a different stylesheet and tweak the values to your heat's content.

Edit:

One key point to remember is the distinction between a general style (like classes in CSS) and a specific style (like ID's in CSS). You want to be able to uniquely identify some items in your layout, such as the heading, as being a single identifiable item that you can apply a unique style to, whereas other items (such as an entry in a blog, or a field in a database view) will all want to have the same style.

Answer 6

It's different for each platform/technology.

For WPF, take a look at what Josh Smith calls structural skinning: http://www.codeproject.com/KB/WPF/podder2.aspx

Answer 7

This should be relatively easy, follow these steps:

1. Strip out all styling for your entire web application or website
2. Use css to change the way your app looks.

For more information visit css zen garden for ideas.