Flex中给TabNavigator控件增加Icons图标的例子

Flex中给TabNavigator控件增加Icons图标的例子

By Minidxer | July 23, 2008

 

 

接下来的例子实际上是一个小技巧，演示了Flex中如何给TabNavigator控件增加Icons图标。

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

<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>

 

 

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

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:XML id="model">
8.         <records>
9.             <record uuid="1" status="check" name="User 1" data="Data 1" />
10.             <record uuid="2" status="warning" name="User 2" data="Data 2" />
11.             <record uuid="3" status="warning" name="User 3" data="Data 3" />
12.             <record uuid="4" status="critical" name="User 4" data="Data 4" />
13.             <record uuid="5" status="check" name="User 5" data="Data 5" />
14.             <record uuid="6" status="check" name="User 6" data="Data 6" />
15.             <record uuid="7" status="warning" name="User 7" data="Data 7" />
16.             <record uuid="8" status="critical" name="User 8" data="Data 8" />
17.         </records>
18.     </mx:XML>
19.  
20.     <mx:Script>
21.         <![CDATA[
22.             [Bindable]
23.             [Embed(source="assets/bulletCheck.png")]
24.             private var BulletCheck:Class;
25.  
26.             [Bindable]
27.             [Embed(source="assets/bulletWarning.png")]
28.             private var BulletWarning:Class;
29.  
30.             [Bindable]
31.             [Embed(source="assets/bulletCritical.png")]
32.             private var BulletCritical:Class;
33.  
34.             private const CHECK:String = "check";
35.             private const WARNING:String = "warning";
36.             private const CRITICAL:String = "critical";
37.         ]]>
38.     </mx:Script>
39.  
40.     <mx:TabNavigator width="400" height="200">
41.         <mx:VBox label="Check" icon="{BulletCheck}">
42.             <mx:DataGrid id="gridCheck"
43.                     width="100%"
44.                     height="100%">
45.                 <mx:columns>
46.                     <mx:DataGridColumn dataField="@name" />
47.                     <mx:DataGridColumn dataField="@data" />
48.                 </mx:columns>
49.                 <mx:dataProvider>
50.                     {model.record.(@status == CHECK)}
51.                 </mx:dataProvider>
52.             </mx:DataGrid>
53.         </mx:VBox>
54.  
55.         <mx:VBox label="Warnings" icon="{BulletWarning}">
56.             <mx:DataGrid id="gridWarning"
57.                     width="100%"
58.                     height="100%">
59.                 <mx:columns>
60.                     <mx:DataGridColumn dataField="@name" />
61.                     <mx:DataGridColumn dataField="@data" />
62.                 </mx:columns>
63.                 <mx:dataProvider>
64.                     {model.record.(@status == WARNING)}
65.                 </mx:dataProvider>
66.             </mx:DataGrid>
67.         </mx:VBox>
68.  
69.         <mx:VBox label="Errors" icon="{BulletCritical}">
70.             <mx:DataGrid id="gridCritical"
71.                     width="100%"
72.                     height="100%">
73.                 <mx:columns>
74.                     <mx:DataGridColumn dataField="@name" />
75.                     <mx:DataGridColumn dataField="@data" />
76.                 </mx:columns>
77.                 <mx:dataProvider>
78.                     {model.record.(@status == CRITICAL)}
79.                 </mx:dataProvider>
80.             </mx:DataGrid>
81.         </mx:VBox>
82.     </mx:TabNavigator>
83.  
84. </mx:Application>