jump to navigation

Adobe Flex Interface Customization – Themes, Styles, Skins August 23, 2010

Posted by Tournas Dimitrios in Flex.

In this article we’ll look at the basics of changing the look-and-feel of your Flex application by introducing Flex Themes, Styles, and Skins.

Terminology :
Before we get into it, let’s quickly define what all the terms means.

Themes are simply a collection of style definitions, images (a k a graphical assets), and skins. Themes give you a lot of control and convenience in terms of how you package it all together and distribute it. You can distribute your theme as separate individual files, or ideally compile it into a theme SWC (commonly pronounced as “swick,” a sort of JAR/ZIP-like archive format for Flash).

Styles are similar to the CSS you’ve been using for your Web applications. In fact, Flex’s styles follow the CSS 2.0 syntax and support many of the common style properties that you’re used to.

Although many of the visual components and controls support a variety of style properties that let you control fine-grain details like the corner radius of a button, fill gradients, and transparency. They’re still based on a certain look; using skins you can completely alter the graphics and interface behavior.

Out of the Box :

Out-of-the-box there are a couple of things you can do to easily change the look of your app. By default the Theme Flex uses is called Halo and it supports a style property called themeColor.

In HTML you can assign predefined colors like Red and Blue to certain CSS properties. Flex supports the same thing, but includes four interesting colors ready-to-use. They include:

  • haloBlue (the default)
  • haloOrange
  • haloGreen
  • haloSilver

To use them with the themeColor is pretty simple. To change it on an application-wide basis, modify your main Application tag to include this:

<m x: A pplication xmlns:mx="http://www.adobe.com/2006/mxml" themeColor="haloOrange">   

You can also do this on a per-component instance basis as well. For example:

<m x: Button label="My Button" themeColor="haloGreen"> 

Now don’t get too excited. The difference is rather subtle in that the most noticeable change is when you mouse over various components. In the case of the button it changes the outer highlight, and with the Datagrid  it changes the Header column.

Fortunately there’s a much more dramatic change that you can employ with the out-of-the-box themes. The themes that come with Flex 3 are:

  • Halo (the default, embedded in the framework.swc)
  • HaloClassic (haloclassic.swc)
  • Ice (Ice.css)
  • Institutional (Institutional.css)
  • Wooden (Wooden.css)
  • Smoke (Smoke.css)

You’ll find the source of these files located under the \Flex SDK 3\frameworks\themes directory. To make quick use of them:

  • Start off with a Project in Flex Builder 3 either by opening an existing one or creating a new one.
  • Using the mouse, right-click on the project folder, and select properties
  • Select the Flex Compiler section
  • Under “Additional compiler arguments,” append the -theme parameter located as the desired theme file. For example:theme “C:\Program Files\Adobe\Flex Builder 3\sdks\Flex_sdk_3.5a\frameworks\themes\Ice\Ice.css
  • Now build and run the application

If all goes well you’ve instantly transformed your application from the defauld theme to the new look

Get Your Style On :
Let’s take things a bit farther and talk about the essence of styles. For all intensive purposes, styles are your theme and give you a vast amount of control.

At the basic level there are three ways of defining your styles and the style properties.

The first is called the Inline Style, and this is the same as in HTML where you style on-the-fly as needed. For example in HTML, you could use an Inline Style to customize some text:

<s p a n s t y le="font-size:18px;font-family:Tahoma">Hello Style!</span>  

Similarly in Flex, you can use Inline Styles that are implemented as properties on the component or control that you’re using. For example:

 <m x: Text text="Hello Style!" fontFamily="Tahoma" fontSize="18"/> 

The second and more flexible approach is to use a local style definition. This would be similar to using the tag in HTML somewhere in your Web page.

As in HTML, there are two types of these definitions. The Type Selector style is one that applies to all instances of that definition, and the Class Selector style let’s you apply it to specific components.In HTML you could do this:

<s t y l e >

<input value="use type definition">
<input value="use class definition" class="myStyle"> 

With Flex you can do the same thing using the <mx:Style> tag as follows:

       font-size: 14px;
</m x: Style>
TextInput text="use type definition"/>
TextInput text="use class definition" styleName="myStyle"/>  

Although you can find all the CSS properties for all the components in the Flex documentation, the easiest way to experiment with styles in Flex is to use the Flex Style Explorer , and it provides an interactive tool to generating the style definitions that you can cut and paste into your Flex application.Or visit this site to explore the complete list of  CSS atributes for all Flex components

Lastly, and ultimately the most modular approach would be to store your style definitions in a separate file known of course as the external style sheet. Once again Adobe makes this aspect easy to take advantage of by making it similar to what you already know from the land of HTML.

So pretty straightforward stuff; copy your Type and Class definitions into a .css text file then in your MXML file put the following in the file in use:

<m x: Style source="/path/to/your/stylesheet.css"/>

One thing you may have noticed when I introduced the out-of-the-box themes – a bunch of them were CSS files. Which begs the question: Can you source them in using the <mx:Style> tag? Yup! As mentioned before, style definitions are the root of your theme.

Just something to remember, though, is that you can’t use the to source in a theme SWC file; and using the -theme compiler option gives you extended flexibility to control what theme files to use during the build and release phase of the project (particularly useful for large projects).

Flex gives you many deployment options here so use whatever’s most convenient.

The Skinny on Skins
For those of you who use WinAmp or Firefox you may have played around with their skins and seen how the look can be drastically altered. Flex lets you do the exact same things and more.

There’s actually two ways to skin. Graphical skinning uses images to define parts or all of a component, and programmatic skinning lets you use code to define the way a component looks and behaves.

Here we’re going to look at the graphical way of using JPEGs, GIFs, and PNGs to define the look of a component. When skinning you take into consideration the states of a component or control; the common states that most controls exhibit are the mouse off, mouse over, and mouse down states. One of the most popular things in HTML to

represent graphically is the button, and to add some pizzazz you could use some JavaScript to add a rollover effect that swapped out the default image to a mouse over state image.

It’s very simple in Flex; you use CSS/Styles to specify what assets to use for your graphical skins. In the Button Class (mx.controls.Button) documentation you’ll notice it supports many Style properties, but namely the following skin-related properties:

  • disabledSkin
  • downSkin (mouse down)
  • overSkin (mouse over)
  • upSkin (mouse not over)
  • selectedDisabledSkin
  • selectedDownSkin
  • selectedUpSkin
  • selectedOverSkin

So using your favorite editor such as Photoshop, create three images to represent the states for mouse down, over, and up. Note that Flex will recognize transparent backgrounds in GIFs, PNGs, and SWFs.

If you want to take it a bit further you can also create images for the disabled state (i.e., ), as well for the selected skins that are used to skin the background and the border of the button.

To test them quickly, use the inline approach:

<m x: Button label="My Skinned Button"


Compile and run your application and you should see a button that changes when you mouse over it and click down on it.

If your button is big enough to contain the text it will retain its original size, but if it wasn’t Flex will automatically scale it to a big enough size. Add a fontSize=”25″ to your Button tag and see how Flex scales it . The whole Embed business is a directive that tells Flex to import the image during compile time. You can abstract the name of the actual image files out of the Button into a script area of your MXML and embed the image elsewhere so that your Button doesn’t need to know the exact filenames involved by doing:

<m x: Script>
<!--[<span class="hiddenSpellError" pre="">CDATA</span>[-->
public var buttonOver:Class;
public var buttonDown:Class;
public var buttonUp:Class;
</m x: Script>

<m x: Button label="My Skinned Button" overSkin="{buttonOver}" downSkin="{buttonDown}" upSkin="{buttonUp}"/>

Of course even better is just wrapping that all up into a Style:

<m x: Style>
     overSkin: Embed(source="button_over.png");
     downSkin: Embed(source="button_down.png");
upSkin: Embed(source="button_up.png");
</m x: Style>

<m x: Button label="Skin Class" styleName="skinnedButton"/>

Fairly painless wouldn’t you say? Well, you may notice there’s a bit of an issue; when it comes to scaling, your image gets distorted. You want only the middle to scale, not the corners.

There’s a simple remedy for this and it’s called Scale-9 formatting. It’s similar in spirit to using HTML tables to create a header at the top of your Web page that resizes properly by repeating the cell backgrounds, while using non-repeating images for the parts that remain fixed in dimension. Except in Flex the inner part of the image will scale as needed, corners won’t scale, and the top and bottom parts will stretch accordingly.

This is done by using four additional attributes called scaleGridTop, scaleGridBottom, scaleGridLeft, and scaleGridRight when embedding the image. For example:


The numbers are relative to the top and to the left as .Now you’ve got a skin that will preserve itself more proportionally!

The goal of this article was to warm you to altering the look-and-feel of your Flex apps by relating the things that you’re used to when building HTML-based ColdFusion apps with how they’re done in Flex.

There’s actually a lot more to discuss such as Style inheritance, limitations, programmatic styling, and skins, using SWFs for themes and graphical assets, compiling theme SWC files, and a whole lot more.

Read further :


1. Loading CSS style sheets at run time in Flex3 « Tournas Dimitrios - September 1, 2010

[…] run time in Flex3 September 1, 2010 Posted by tournasdimitrios1 in Uncategorized. trackback This previous article demonstrated the basics of changing the look-and-feel of your Flex application by introducing the […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s