Setting AS 2.0 component styles the lazy way…

While producing component based applications it became very tiring to have to repeat the same process to apply styles to individual or groups of components while not resorting to using _global.styles.componentClassName and ‘tarring with the same brush’ so to speak. If you do this it can be a real pain to apply a clean variant to the mix. Plus I loathe using _global for anything if I can avoid it. So I decided to stop using it altogether and find a quicker (lazier) way of dealing with it :P.

I knocked together a quick utility method, that I use primarily within my component development framework. You could use it straight on the stage so to speak or add it into a class. I keep meaning to add it to a ‘wrangling’ class I have knocking around for dealing with other issues relating to components, once I do I’ll upload it for those interested.

Anyway for those who’d like to try it out here is the ‘raw’ method:

function setComponentStyle(obj:MovieClip, styleObj:Object)
{
	for(var prop in styleObj)
	{
		obj.setStyle(prop, styleObj[prop]);
	}
}

Now all you need to do is pass in a component instance and the style object containing the elements you want applied. For this I’m just going to use a Button component that calls the method itself. Below is the basic code of our ‘buttonStyle’.

var _color :Number = 0xFF0000;
var _fontSize :Number = 11;
var _font :String = "Arial";
var _weight :String = "bold";
var _embedFonts :Boolean = true;
 
// Don't forget to embed the font otherwise you won't see anything font related
var textStyle	:Object	= {fontFamily:_font, fontSize:_fontSize,
				fontWeight:_weight, color:_color, embedFonts:_embedFonts};

Now all we need to do is pass it to the component we wish to apply the style to

// btn is the instance name of a Button component
btn.onPress = function()
{
	setComponentStyle(this, textStyle);
}

If I wanted to add this to a selection of Button, or Label components I could easily do it as a block or via a loop:

// As individual calls
// First the Buttons
setComponentStyle(btn1, textStyle);
setComponentStyle(btn2, textStyle);
// Next our Labels
setComponentStyle(lbl1, textStyle);
setComponentStyle(lbl2, textStyle);
 
// Or in a loop
for(var i = 0; i < componentsPresent.length; ++i)
setComponentStyle(componentsPresent[i], textStyle);

Check out the simple example below.