Hello,

I have seen this question around and although it may seem obvious, lets think about it.

What ::

Themes are a way to connect the designer to a Flex application in an abstract way with no coding(this is a lie).

When::

Themes create a reusable look and feel. Whenever you need to reuse look and feel patterns in different applications.

Why::

To reuse graphical patterns, colors and (again) the look and feel of many different applications. There are some more abstract reasons.

Well, what is the lie Mike? Ok, we have some different types of skinning, this includes;

- Graphic Skins

Graphic skins would be jpg, gif, png, swf, swf symbol, svg(what is this? )

- Programmatic Skins

Programmatic skins consist of either subclassing;

- mx.skins.ProgrammaticSkin
- mx.skins.RectangularBorder
- mx.core.UIComponent

Now, the lie is Programmatic skinning requires the use of code. Maybe a designer knows AS3 and the methods needed to do this and maybe they don’t. I think Adobe created the Scale9 slicing to accommodate this inconsistency dealing with a designer that wants a stretchable skin with out the use of drawRectangle().

The connection a designer has to a Flex application is the look and feel. The User Interface architecture is already implemented by the application developer. There has to be some communication here because the designer needs to know what the developer has ‘opened up, made available’ for the designer to design.

Enter themes; themes offer a way at compile time to create a certain look and feel that can be adjusted at runtime. Wait! there is no runtime css. Well you could create various themes but they have to be compiled into the application. This offers the ability to change things at runtime but also adds to the weight of the swf on load time.

Note:: I won’t go into detail about this because it would take another article to understand the full reality of what I am saying.

Some things to note about themes;

- The stylesheet used for the theme is processed before any styles in the app.
- The theme can be a .css file and included assets supporting that theme.
- The theme can be compiled into an swc and dropped into your application’s project.
- Themes are specified a compile time;

For example;

- mxmlc -theme=”c:/myTheme.swc” myApp.mxml

You can also put the theme location in the xml config file.

To create a theme;

1) Create a .css file with all the defaults settings for the component.
2) Use compc to build the module .swc file.

I have to end right here, this needs and example with compiler arguments and an explanation of excluding the frameworks.swc so the classes don’t get loaded.

The bottom line is, when a designer wants to tweak the look of an application and knows they want to create a new theme, use a css file or