Flex中利用direction属性创建一个垂直LinkBar的例子

By Minidxer | July 27, 2008

LinkBar的direction属性，可能很少会有人注意到，接下来的例子演示了Flex中利用direction属性，创建一个垂直LinkBar。

让我们先来看一下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="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             [Bindable]
  10.             [Embed(source="assets/bulletCheck.png")]
  11.             public var BulletCheck:Class;
  12.  
  13.             [Bindable]
  14.             [Embed(source="assets/bulletWarning.png")]
  15.             public var BulletWarning:Class;
  16.  
  17.             [Bindable]
  18.             [Embed(source="assets/bulletCritical.png")]
  19.             public var BulletCritical:Class;
  20.         ]]>
  21.     </mx:Script>
  22.  
  23.     <mx:XML id="itemsXML">
  24.         <items>
  25.             <item label="Item 1" status="warning" />
  26.             <item label="Item 2" status="critical" />
  27.             <item label="Item 3" status="critical" />
  28.             <item label="Item 4" status="check" />
  29.             <item label="Item 5" status="warning" />
  30.             <item label="Item 6" status="check" />
  31.             <item label="Item 7" status="check" />
  32.             <item label="Item 8" status="critical" />
  33.         </items>
  34.     </mx:XML>
  35.  
  36.     <mx:String id="CHECK">check</mx:String>
  37.     <mx:String id="WARNING">warning</mx:String>
  38.     <mx:String id="CRITICAL">critical</mx:String>
  39.  
  40.     <mx:XMLListCollection id="checkColl"
  41.             source="{itemsXML.item.(@status == CHECK)}" />
  42.  
  43.     <mx:XMLListCollection id="warningColl"
  44.             source="{itemsXML.item.(@status == WARNING)}" />
  45.  
  46.     <mx:XMLListCollection id="criticalColl"
  47.             source="{itemsXML.item.(@status == CRITICAL)}" />
  48.  
  49.     <mx:HBox>
  50.         <mx:LinkBar id="linkBar"
  51.                 direction="vertical"
  52.                 dataProvider="{viewStack}"
  53.                 themeColor="haloOrange" />
  54.  
  55.         <mx:ViewStack id="viewStack"
  56.                 width="200"
  57.                 height="120"
  58.                 backgroundColor="white">
  59.             <mx:Canvas id="checkCanvas"
  60.                     label="Success ({checkColl.length})"
  61.                     icon="{BulletCheck}"
  62.                     width="100%"
  63.                     height="100%">
  64.                 <mx:DataGrid id="checkGrid"
  65.                         dataProvider="{checkColl}"
  66.                         width="100%"
  67.                         height="100%" />
  68.             </mx:Canvas>
  69.             <mx:Canvas id="warningCanvas"
  70.                     label="Warning ({warningColl.length})"
  71.                     icon="{BulletWarning}"
  72.                     width="100%"
  73.                     height="100%">
  74.                 <mx:DataGrid id="warningGrid"
  75.                         dataProvider="{warningColl}"
  76.                         width="100%"
  77.                         height="100%" />
  78.             </mx:Canvas>
  79.             <mx:Canvas id="criticalCanvas"
  80.                     label="Critical ({criticalColl.length})"
  81.                     icon="{BulletCritical}"
  82.                     width="100%"
  83.                     height="100%">
  84.                 <mx:DataGrid id="criticalGrid"
  85.                         dataProvider="{criticalColl}"
  86.                         width="100%"
  87.                         height="100%" />
  88.             </mx:Canvas>
  89.         </mx:ViewStack>
  90.     </mx:HBox>
  91.  
  92. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | 1 Comment » | Tags: , , , ,

你可能还对下列文章感兴趣:

One comment | Add One

Trackbacks

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll