<?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()" viewSourceURL="srcview/index.html">

	<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>