Juan Sanchez

A while back I helped create a set of custom themes for Flex 4 that worked for both Flex 3 and Flex 4. I wrote about this process for another article, but I thought I’d share it here as well. Thing may have changed since we used this approach, so let me know if you have issues.

When creating a theme it is important to consider that the Flex 4 SDK also allows for Flex 3 components to be used side-by-side with Flex 4 components. This means that skin artwork you create for Flex 4 components won’t get applied to Flex 3 components. However, there is a way to repurpose your pixel-perfect artwork for use with Flex 3 component skins. Be warned though, getting things to work properly will require some technical steps in MXML.

Part of the Flex 4 SDK includes a special skin class called SparkSkinForHalo. This class allows  you to repurpose your skin artwork and assign it to a Flex 3 component. While it does take an additional effort to account for the Flex 3 components, the additional skins will help insure consistency for both Flex 3 and Flex 4 components. Let’s see how it works.

1. Create a new folder and name it HaloSkins.
2. Create a new file called HaloButtonSkin.mxml and save it into the HaloSkins folder you just created.
3. Open the MXML file that contains your Button Skin artwork for your Spark components.
4. Copy the all the markup and paste it into the HaloButtonSkin.mxml file replacing any markup that might be there.
5. Locate the line that uses the s:Skin tag and in its place use local:SparkSkinForHalo. You also need to change the State tags from s:states to local:states and add a definition for the local namespace.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<local:SparkSkinForHalo xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:ai="http://ns.adobe.com/ai/2009" xmlns:flm="http://ns.adobe.com/flame/2008" xmlns:local="mx.skins.spark.*">
 
<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
 
<s:states>
 
<local:State name="up"/>
 
<local:State name="over"/>
 
<local:State name="down"/>
 
<local:State name="disabled"/>
 
</s:states>

1. Delete the RichText, which is the label for the Button, from the skin. The reason you want to do this is that Halo components already have a label defined as part of the component.
2. That’s all you need to do for the skin. Now, you need to assign the skin to the Flex 3 Button.
3. Go into your CSS file and create a new style declaration for a Button with the MX prefix.

1
2
3
4
5
6
7
8

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
 
mx|Button
{
skin: ClassReference('components.HaloSkins.HaloButtonSkin');
}

1. All that’s left is to test the skin. Add an mx:Button to your primary view and run your application. You should see that the Flex 3 Button looks the same as the Flex 4 Button. You may need to define the mx namespace.

Now that you know how to reuse your skin artwork you can take the same steps to make sure all your components for Spark and Halo look the same. For an extensive view at how to do this across all components you can refer to the sample skins provided as part of the latest builds of the Flex 4 SDK.

Note: You can make a custom theme using only CSS, but keep in mind that the CSS properties for Spark skins and Halo skins are quite different. Refer to the documentation for both SDKs to learn about what styles are supported or take a look at some of the sample CSS themes provided with recent builds of the Flex 4 SDK.