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.
License
This work is published under a CC-GNU LGPL.
So the benefit of this is that styles can be reused easily without using _global? Also, that function library you mentioned that you made sounds interesting.
Yes, I tend to utilize it within component classes that has other components that are styled within it. The additional benefit is it gets rid of the _global call and allows finer control over which elements are styled - even if they are of the same type. The idea of having ‘pathed’ calls is a big no-no as far as I am concerned within a component class. So I don’t have _parent or _global in my any of my classes. Hence how this came into being…
I’m trying to tidy up the functions library but I haven’t had time to sort it so it to such a degree that I’d be happy to release it. Should be ready soon though :P