Flex中创建一个简单的样式浏览器的例子

By Minidxer | September 14, 2008

在前面的Flex中通过调用StyleManager类的静态属性selectors显示当前selectors列表的例子中 ，我们了解了Flex中如何通过调用StyleManager类的静态属性，selectors显示当前selectors列表。接下来的例子演示了我们如何在Flex中创建一个简单的样式浏览器。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="horizontal"
  4.         verticalAlign="middle"
  5.         backgroundColor="white"
  6.         creationComplete="init()">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             import mx.styles.StyleManager;
  11.             import mx.controls.ComboBox;
  12.  
  13.             private function init():void {
  14.                 arr = StyleManager.selectors;
  15.                 arr.sort(Array.CASEINSENSITIVE);
  16.             }
  17.  
  18.             private function list_change(evt:Event):void {
  19.                 var styleName:String = String(ComboBox(evt.currentTarget).selectedItem);
  20.                 var cssStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration(styleName);
  21.                 var obj:Object = new cssStyle.defaultFactory();
  22.                 var styles:Array = [];
  23.                 var key:String;
  24.  
  25.                 for (key in obj) {
  26.                     styles.push({key:key, value:obj[key]});
  27.                 }
  28.  
  29.                 styles.sortOn("key", Array.CASEINSENSITIVE);
  30.                 dataGrid.dataProvider = styles;
  31.             }
  32.         ]]>
  33.     </mx:Script>
  34.  
  35.     <mx:Array id="arr" />
  36.  
  37.     <mx:ApplicationControlBar dock="true">
  38.         <mx:Label text="selectors:" />
  39.         <mx:ComboBox id="comboBox"
  40.                 prompt="Please select a style..."
  41.                 dataProvider="{arr}"
  42.                 width="250"
  43.                 change="list_change(event)" />
  44.     </mx:ApplicationControlBar>
  45.  
  46.     <mx:DataGrid id="dataGrid"
  47.             rowHeight="22"
  48.             width="300"
  49.             verticalScrollPolicy="on">
  50.         <mx:columns>
  51.             <mx:DataGridColumn dataField="key"
  52.                     headerText="Style:"
  53.                     itemRenderer="mx.controls.Label" />
  54.             <mx:DataGridColumn dataField="value"
  55.                     headerText="Value:"
  56.                     itemRenderer="mx.controls.Label" />
  57.         </mx:columns>
  58.     </mx:DataGrid>
  59.  
  60. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | Tags: , , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads