explorers’ club

If you have done any custom component development then you have most likely attempted some level of default styling for your custom components. Very recently I developed a custom component for jwo_lib that required button skins located in a swf. I am not particularly too fond of following Flex’s default.css styling model as if you are attempting to create a component library then that css file also has to be included in the swc.

Assuming for the moment that we are not using an external css file to embed assets (i.e. Flex’s default method), that leaves us only two other options.

• define a separate class (I generally call it an AssetImporter) with bindable, embedded, public properties referencing the needed assets from the swf. This entails another class to be added to the library.
• define the default class styling in the class itself.

I opted for the latter option. Two reasons for this: 1) it doesn’t require yet another file to be added to the library and 2) the styling associated with the component in question is located in the most logical place for that component, the class file itself. Again this is default styling, meaning how I the creator intended the component to look like. So again this is the most logical place for the code to reside.

Now we need the class code to perform all this nonsense. I do all my default styling via the method that Adobe recommends but for some reason does not do themselves. Funny though how none of the examples explain how to programmatically embed assets via this method. Check this out:

private static var defaultStylesInitialized:Boolean = setDefaultStyles();

private static function setDefaultStyles ():Boolean
{
	//copy over old styles if applicable
	var oldS:CSSStyleDeclaration = StyleManager.getStyleDeclaration("TextInput");
	var s:CSSStyleDeclaration = new CSSStyleDeclaration();

	if (oldS)
	{
		//copy over old styles
		s = oldS;

		//clear old style
		StyleManager.clearStyleDeclaration("TextInput", true);
	}

	//create embedded skin vars
	[Embed (source="/assets/swf/closeButtonSkins.swf", symbol="CloseButton_disabledSkin")]
	var disabledSkin:Class;

	[Embed (source="/assets/swf/closeButtonSkins.swf", symbol="CloseButton_downSkin")]
	var downSkin:Class;

	[Embed (source="/assets/swf/closeButtonSkins.swf", symbol="CloseButton_overSkin")]
	var overSkin:Class;

	[Embed (source="/assets/swf/closeButtonSkins.swf", symbol="CloseButton_upSkin")]
	var upSkin:Class;

	//add new default styles
	s.setStyle("horizontalGap", 5);
	s.setStyle("disabledSkin", disabledSkin);
	s.setStyle("downSkin", downSkin);
	s.setStyle("overSkin", overSkin);
	s.setStyle("upSkin", upSkin);

	StyleManager.setStyleDeclaration("TextInput", s, true);

        return true;
}

Hope that helps