StyleManager (CSS)

The StyleManager class is what is required if you want to use CSS with your components. A StyleManager instance is supplied to the UIElement's styleManager property. By then setting the styleName property for the UIElement, a style will be applied when the setStyle() method is invoked on the UIElement.

###Steps

1. Create a styleSheet
2. Create a StyleManager
3. Declare a StyleManager
4. Create a UIElement
5. Style UIElement

Create a StyleSheet

The first step is to create a blank stylesheet and place it into a directory. For this example I have created a stylesheet which is located in {project-root}/resource/embed/css/.

Create a StyleManager

A StyleManager is class where resources are embedded into the flash file as Class files. Create a class which extends StyleManager and use the embed tag and embed the stylesheet as shown below. The embed tag needs to be associated with a class so ensure you create a variable after the embed tag. In the main function the stylesheet class needs to be parsed, the ' parseCSSByteArray' function is called with the stylesheet class as the parameter, this will then parse the css.

public class LatinStyle extends StyleManager 
{
	[Embed( source="/../resource/embed/css/KodakStyle.css", mimeType="application/octet-stream")]
	private var LatinCSS:Class;	
	
	public function LatinStyle() 
	{
		super();
		parseCSSByteArray( LatinCSS );
	}
}

Declare the StyleManger

To be able to obtain the css data the styleManager class must be declared. In the MVC approach a new styleManager is stored into the model as shown below.

styleManager = new KodakStyle();

Create a UIElement

Below is an example of how to declare a UIElement.

var _backButton:UIElement = new UIElement();

Now we need to provide the UIElement with a styleManager so that the UIElement can obtain the styleSheet.

_backButton.styleManager=_model.styleManager;

Style the UIElement

In the styleSheet create a new style and give it a name called “.questionBackButton ” and add the height and width as below.

CSS .questionBackButton{width:100;height:30;}

Provide the UIElement with the styleName as shown below and then build, setStyle,arrange and addChild.

_backButton.styleName="questionBackButton";
_backButton.build();
_backButton.setStyle();
_backButton.arrange();
addChild(_backButton);