What styles work on Spark skins?

As  you might begin playing with the Flex 4 framework, you will notice that both the new set of ‘Spark’ components and our ‘Halo’ components that were shipped with Flex 3 have a new look. By default, all of the components in Flex 4 use the ‘Spark’ theme. In Flex 3, we shipped with the ‘Halo’ theme, by default.

If you are a Flex 3 developer, you will notice that the Spark skins don’t support many of the styles that you are used to including border altering styles, corner radius, fillColors etc. Instead, the Spark skins only support a handful of global styles. The include the following:

baseColor: The baseColor usually affect the fill of components like Buttons, Tabs, and the headers. It also affects borders of components like List, TextInput, TextArea and a number of other components.

color: The color style is the same as Flex 3 and affects the color of Text in any component.

focusColor: The focusColor affects the color of the focus ring for all components that take focus.

symbolColor: The symbolColor affects components with any type of icon/symbol. For example, the dot for a RadioButton, check for a CheckBox, and the arrows for a NumericStepper, DataGrid header or ScrollBar.

rollOverColor: The rollOverColor acts the same as Flex 3. It only applies to List components when you roll over items.

selectionColor: This style affects the color of an item that is selected in a List. It also affects the color of the highlight when you select text in components like a TextInput and TextArea. The selectionColor only affects text for the new Spark components, not the Flex 4 components due to some enhancements in player 10.

contentBackGroundColor: This style is similar to backgroundColor. For most components that has a ‘backgroundColor’ style, you would use the contentBackgroundColor style with the Spark skins.

To see how these styles affect the new Flex 4 Spark components, check out this application. For each view tab view, you can change a style and see how it affects various components at runtime.

Demo: StylesDemo.swf

Source Code: StylesDemo.mxml

Note: Most text styles like fontFamily, textDecoration, fontStyle, fontWeight, fontSize etc. still work using the Spark skins.

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

%d bloggers like this: