Posts Tagged ‘flex ui skin’

How to Add Multiple UI Skins to your Flex application with Compiled CSS Stylesheets

This short tutorial describes how to implement and load multiple UI skins in a Flex application, leveraging compiled CSS stylesheets.

1. Move all mxml component style settings that control visual aspects of the view controls  to a standalone stylesheet (defaultStyles.css in this example).

For a good separation of UI design and easy maintenance, typical UI control properties that should be moved to a stylesheet rather than specified inline include font and border settings, fill and background colors, padding, alignment, etc.

Use the CSS type selector to override the style settings for all the control instances and class selector with a styleName attribute to control individual control instance settings. Here is an example from the Flex 3 lang. ref. docs:

A CSS rule such as

Button { color: #FF0000 }

affects every instance of the Button class; a selector like Button is called a type selector.

A CSS rule such as

.redButton { color: #FF0000 }

affects only components whose styleName property is set to
".redButton"; a selector like .redButton is called a
class selector and must start with a dot.

2.Include default stylesheet in the main application mxml file:

<mx :Style source="assets/skins/defaultStyles.css" />

3. Create alternative stylesheets for your CSS skins.

Once the style settings you’d like to change are moved to a separate css file and you are happy with how your application looks with the default stylesheet, you can create alternative stylesheets to implement different UI skins.

Read the rest of this entry »