The StyleCollection class lets you create groups of styles that are applied to and automatically updated on subscribing components. It supports both instance and renderer styles (setStyle and setRendererStyle respectively), and uses component introspection to apply only relevant styles to each component. StyleCollection exposes a robust interface, including a static interface that provides global access to named styles.
Here's a simple demonstration of the class in action (FLA included in the source zip):
Here's some rough documentation on the class. Note that while the interface may look complex, there are only really 3 methods most people will use besides the constructor: getStyleCollection, setStyle, and addSubscribers.
Constructor
import com.gskinner.styles.StyleCollection // name - optional name to identify style via the static interface (see addStyleCollection) myStyleCollection = new StyleCollection(name:String=null)
Static interface
provides global access to named style collections
// Adds a style collection to the global repository, and associates a name with it for subsequent retrieval. StyleCollection.addStyleCollection(name:String, collection:StyleCollection) // Removes a style collection from the global repository StyleCollection.removeStyleCollection(name:String) // Retrieves a style collection from the global repository StyleCollection.getStyleCollection(name:String):StyleCollection
Instance interface
// Sets a style on the collection, and updates all subscribers with the new style. // Note that only subscribing components that use the style (as defined in their getDefaultStyles return) will be updated. setStyle(style:String, value:Object):void // Gets a style value from the collection. getStyle(style:String):Object // Sets a renderer style on the collection, and updates all components with the new style. // Note that all subscribing components that have a setRendererStyle method will be updated. setRendererStyle(style:String, value:Object):void // Gets a renderer style value from the collection. getRendererStyle(style:String):Object // Adds a component as a subscriber to this style collection, and immediately applies the current set of styles to the component. // Subscribers are automatically updated whenever a style is changed in the collection. // Included mostly to provide a type-safe method (vs. addSubscribers). addSubscriber(component:UIComponent):void // Adds a list of components as subscribers to this style collection. addSubscribers(component1, ... componentN):void // Removes a component as a subscriber to this style collection. // Note that this does not clear its styles. removeSubscriber(component:UIComponent):void // Removes a list of components as subscribers to this style collection. removeSubscribers(component1, ... componentN):void // Applies the current set of styles to the component, without adding it as a subscriber. applyStyles(component:UIComponent):void // Applies the specified style from the collection to the component. applyStyle(component:UIComponent, style:String):void // Applies the specified renderer style from the collection to the component. applyRendererStyle(component:UIComponent, style:String):void // Creates a clone of this StyleCollection. clone():StyleCollection
You can download the source code, and a demo file by clicking here.
Hopefully this proves useful for people. It has undergone some testing, but there are likely still some bugs to work out. Please let me know if you have any problems, or find any glitches, in the comments below.
Comments (13)
Ohh,thanks a lot men !, downloading the demo file..
Posted by: Rafeo at June 5, 2007 01:46 PMURL: http://diario.de/rafeo
Thanks Grant.
Posted by: Tink at June 6, 2007 05:51 AMURL: http://www.tink.ws/blog
Great Job Grant.
only a question... when more flashCS3 components like dateChooser?
Thanks
Posted by: freddy at June 7, 2007 07:15 PMURL:
Nice!
Posted by: diding at June 8, 2007 05:42 AMBut V3 components less.
I have made a Alert components,but no time to make more.
I wish you to make more components such as Menu,Menubar,Window.Of course including Alert.
/*
//I don't like dataGrid.I don't know WHY
*/
URL: http://blog.2dsms.com
Any chance your team will be working on a Tree and/or menu components for AS 3.0?
Posted by: Matthew Hancock at June 19, 2007 08:43 AMURL: http://www.noobflash.com
Hey Grant,
Any idea how to choose the colors of datagrid rows? With mx datagrid it was easy, but with CS3 and all this CellRender stuff, it gets confusing :-(.
Thanks,
Posted by: K2xL at June 28, 2007 10:44 PM-Danny
URL: http://www.k2xl.com
The simplest way of styling row colors is to double-click the component instance, and then double-click the cellRenderer skin in the assets layer. There you can edit all the CellRenderer states directly in the IDE.
Posted by: Lanny at June 29, 2007 09:17 AMURL: http://gskinner.com
I actually found another way using a CellRenderer class and overriding a protected method.
I do have a question though about StyleCollection. It seems that setStyle("textFormat",tf) doesn't seem to work for buttons?
Posted by: Danny at July 2, 2007 09:48 PMURL: http://www.k2xl.com
Hate to double post, but I found out why textFormat style wasn't working.
Line 168:
if (components[o] != null && components[o][style] == null) { continue; }
You assume that if the component's value is null that means that it can't change. Maybe do a try and catch block instead?
Anyway, if I comment that line out, setStyle textformat works.
-Danny
Posted by: Danny Miller at July 2, 2007 10:12 PMURL: http://www.k2xl.com
One question :
Why you use that king of actionscript stuff when it is so easy to edit the graphic content of each component....
Just a double click on it on the stage and you can custom every part of each component.
Q.
Posted by: Q at July 11, 2007 03:08 AMURL:
in FlashCS3, how do you customize the alternateRowColor style ???
No way to find it ! :(
Thx
Posted by: Q at July 11, 2007 04:23 AMURL:
I found a way... but .... WTF man !!
http://blogs.adobe.com/pdehaan/2007/06/alternating_background_colors.html
Why there is no myDatagrid.setStyle("alternatingRowColor", [0xFFCC00,0xFFFFFF]) anymore ???
Flex3 seems to be soo perfect to apply styles on Components... Why it is not the case in FlashCS3?
I really liked the way to style component in AS2... why do you have killed all that kind of features ????
Posted by: Q at July 11, 2007 04:38 AMURL:
when more flash components like date Chooser.
Posted by: Martina at August 22, 2008 03:05 AMURL: http://www.ictradingonline.com