In my previous post, “Introducing the StyleManager.selectors property in Flex 3“, we looked at the new StyleManager class’s static selectors property introduced in Flex 3.
This example shows how you can make a simple app which lets you loop over styles currently registered with the StyleManager and display their current style names and values.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/12/building-a-simple-style-browser-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.styles.StyleManager;
import mx.controls.ComboBox;
private function init():void {
arr = StyleManager.selectors;
arr.sort(Array.CASEINSENSITIVE);
}
private function list_change(evt:Event):void {
var styleName:String = String(ComboBox(evt.currentTarget).selectedItem);
var cssStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration(styleName);
var obj:Object = new cssStyle.defaultFactory();
var styles:Array = [];
var key:String;
for (key in obj) {
styles.push({key:key, value:obj[key]});
}
styles.sortOn("key", Array.CASEINSENSITIVE);
dataGrid.dataProvider = styles;
}
]]>
</mx:Script>
<mx:Array id="arr" />
<mx:ApplicationControlBar dock="true">
<mx:Label text="selectors:" />
<mx:ComboBox id="comboBox"
prompt="Please select a style..."
dataProvider="{arr}"
width="250"
change="list_change(event)" />
</mx:ApplicationControlBar>
<mx:DataGrid id="dataGrid"
rowHeight="22"
width="300"
verticalScrollPolicy="on">
<mx:columns>
<mx:DataGridColumn dataField="key"
headerText="Style:"
itemRenderer="mx.controls.Label" />
<mx:DataGridColumn dataField="value"
headerText="Value:"
itemRenderer="mx.controls.Label" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
View source is enabled in the following example.





Where i can get flex 3? I can’t find it
wespire,
You can get the beta of Flex Builder 3 from the Adobe Labs site at http://labs.adobe.com/technologies/flex/flexbuilder3/. Flex Builder 3 includes the Flex 2 and Flex 3 SDKs, but if you want to just download the SDK (or want to update the SDK that shipped with Flex Builder 3), you can grab nightly builds of the Flex 3 SDK from http://labs.adobe.com/technologies/flex/sdk/flex3sdk.html.
Peter