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

By Minidxer | April 5, 2008

在利用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">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.events.ListEvent;
  10.  
  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.             }
  21.  
  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.             }
  29.  
  30.             private function swfLoader_complete(evt:Event):void {
  31.                 panel.status = (swfLoader.bytesTotal/1024).toFixed(2) + 'KB';
  32.             }
  33.         ]]>
  34.     </mx:Script>
  35.  
  36.     <mx:XML id="dp" source="data/dp.xml" />
  37.  
  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>
  62.  
  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>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | Tags: , , , , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Recent Posts

Blogroll

Sponsored Ads