Flex中如何利用树形控件(Tree Control)和SWFLoader控件创建简单图片相册的例子

在 利用Flex的HorizontalList控件创建一个简单的图片展示（相册）中我们了解了如何利用HorizontalList创建相册，接下来的例子演示了如何利用树形控件(Tree Control)和SWFLoader控件创建一个简单图片相册。

让我们先来看一下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">
7.     <mx:Script>
8.         <![CDATA[
9.             import mx.events.ListEvent;
11.             private function tree_itemClick(evt:ListEvent):void {
12.                 var t:Tree = evt.currentTarget as Tree;
13.                 var dataObj:Object = evt.itemRenderer.data;
14.                 if (dataObj.hasOwnProperty("@src")) {
15.                     swfLoader.source = dataObj.@src;
16.                 } else if (t.dataDescriptor.isBranch(t.selectedItem)) {
17.                     swfLoader.source = null;
18.                     panel.status = "";
19.                 }
20.             }
22.             private function tree_labelFunc(item:Object):String {
23.                 var suffix:String = "";
24.                 if (tree.dataDescriptor.isBranch(item)) {
25.                     suffix = " (" + item.children().length() + ")";
26.                 }
27.                 return item.@label + suffix;
28.             }
30.             private function swfLoader_complete(evt:Event):void {
31.                 panel.status = (swfLoader.bytesTotal/1024).toFixed(2) + 'KB';
32.             }
33.         ]]>
34.     </mx:Script>
36.     <mx:XML id="dp" source="data/dp.xml" />
38.     <mx:HDividedBox width="100%" height="100%">
39.         <mx:Panel width="200" height="100%">
40.             <mx:Tree id="tree"
41.                     dataProvider="{dp}"
42.                     labelFunction="tree_labelFunc"
43.                     showRoot="false"
44.                     width="100%"
45.                     height="100%"
46.                     itemClick="tree_itemClick(event);" />
47.         </mx:Panel>
48.         <mx:Panel id="panel"
49.                 width="100%"
50.                 height="100%"
51.                 backgroundColor="white">
52.             <mx:SWFLoader id="swfLoader"
53.                     scaleContent="true"
54.                     width="100%"
55.                     height="100%"
56.                     complete="swfLoader_complete(event);" />
57.             <mx:ControlBar>
58.                 <mx:LinkButton label="{swfLoader.source.toString()}" />
59.             </mx:ControlBar>
60.         </mx:Panel>
61.     </mx:HDividedBox>
63. </mx:Application>

Download: dp.xml

1. <?xml version="1.0" encoding="utf-8"?>
2. <root>
3.     <gallery label="RIA">
4.         <file label="ColdFusion" src="assets/cf_appicon.jpg" />
5.         <file label="Dreamweaver" src="assets/dw_appicon.jpg" />
6.         <file label="Flash" src="assets/fl_appicon.jpg" />
7.         <file label="Flash Player" src="assets/fl_player_appicon.jpg" />
8.         <file label="Flex" src="assets/fx_appicon.jpg" />
9.     </gallery>
10. </root>