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.
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