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.
Ohh,thanks a lot men !, downloading the demo file..
Thanks Grant.
Great Job Grant.
only a question… when more flashCS3 components like dateChooser?
Thanks
Nice!
But 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
*/
Any chance your team will be working on a Tree and/or menu components for AS 3.0?
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,
-Danny
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.
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?
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
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.
in FlashCS3, how do you customize the alternateRowColor style ???
No way to find it ! 🙁
Thx
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 ????
when more flash components like date Chooser.