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.

Create new stylesheet for an alternative look and feel by saving the defaultStylesheet.css with a different filename. We'll create red.css for this example.

Don't forget to override style settings in your alternative UI skin css file to create a different appearance for your application.

4. Compile all CSS stylesheets to SWF

In Flex Builder, right-click on each stylesheet you'd like to load as an alternative UI skin at run-time and check Compile your CSS stylesheet to SWF option:

5. Add ActionScript code to change CSS stylesheet at runtime:

This code can be added to your main application mxml file or better yet a custom application control bar component.

import mx.styles.StyleManager;
 
private var _skin:String;
 
/**
* Changes the selected skin by unloading current style declarations
* and loading new style declarations from the embedded stylesheet swf file.
*/
private function changeSkin(skinUrl:String ):void
{
  if (_skin != null)
  {
    StyleManager.unloadStyleDeclarations(_skin, true);
  }
  _skin = skinUrl;
  StyleManager.loadStyleDeclarations(_skin, true); // force immediate update
}

6. Add UI control to your application control bar to enable CSS skin selection:

  <!-- Skin Selection -->
  <mx:Label text="Skin:" />
  <mx:ComboBox id="skinSelector"
    change="{changeSkin(skinSelector.selectedItem.data);}"/>
    <mx:ArrayCollection>
      <mx:Object label="Dark" data="assets/skins/defaultStyles.swf"/>
      <mx:Object label="Red" data="assets/skins/red.swf"/>
    </mx:ArrayCollection>
  </mx:ComboBox>

You can use combo box, as in this example, or change it to a menu option.

The skinSelector combo box has a list of the sample CSS UI skins we've created with data attributes specifying the full path to the stylesheet swf file.

The change event handler calls our changeSkin method to load the selected UI skin by unloading current style declarations and loading new style declarations from the compiled CSS stylesheet at runtime.

Example

You can view an example of how this works in my new Random3DView sample application I've built to explore Away3D camera options and experiment with OpenFlux Plexiglass layouts.

View Random3DView source code to see this setup along with some other options I've created for 3D visualization testing purposes.

For a good overview of other Flex application skinning options, see 10 Ways to Skin an App on scalenine.com.

Related Posts

• No Related Post