AdvancED Flex 4

179

Chapter 6

Creating Themes in Flex 4

by Elad Elrom

Flex 4 SDK has added the Spark skins, which include a complete re-work of the style architecture in Flex 4

components and allow you to easily change CSS or re-skin the components. In this chapter we will give

you an overview of the new Spark skins and working with CSS, as well as tutorials for creating themes

using Illustrator and Flash Catalyst and mixing Flex 4 with Flex 3 components.

Understanding Spark Style Support

In Flex 3 and Flex 4, SDK supported only Halo skins, but in Flex 4 the default skins used are Spark. Spark

is built on top of Halo. We want to give you an overview of the new Spark style support before diving into

creating themes.

Flex 4 SDK styles for the Spark skins are designed in a simple, predictable, and more consistent fashion.

In fact, you can change the entire appearance of an application with a few global style properties. This is a

contrast to styling in Halo, where you have many more knobs to adjust the appearance, and many of these

knobs need to be set on individual components or type selectors.

Take a look at an example. The code shown here sets the global inheriting style for the button component

to the following (see Figure 6-1):

CHAPTER 6

180

Figure 6-1. Button Halo component skin styled

Notice that in Flex 4 we now have to define the namespaces of the components since many share the

same local name as existing MX components, e.g., Button. Defining namespacing will avoid name

collisions.

In fact, Halo has created styles purely to style sub-components or states of a component, since you have

no access to the states. For instance, to access the sub-component of Accordion you have

headerStyleName, or dropDownStyleName on ComboBox.

The advanced CSS features in Spark eliminate the need to use these types of styles. Take a look at a

Spark style that gives you more fine-tuning and allows you to access the over state of the button

component (see Figure 6-2).

Figure 6-2. Button Spark component skin styled

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

minWidth="1024" minHeight="768">

<fx:Style source="Main.css" />

<s:Panel width="400" height="600" title="Panel title goes here">

<s:TextArea width="200" height="150" x="22" y="47">