Mar 09

利用Flex的TileList控件创建一个简单的图片展示（相册）的例子

FlexAdd comments

和前面的利用Flex的HorizontalList控件创建一个简单的图片展示（相册）很相似，这个例子展示了如何利用Flex的TileList控件，Image控件和PopUpManager类来创建一个简单的图片展示（相册）。

下面是具体的例子以及源代码：


Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:Style>
  9.         global {
  10.             modal-transparency: 0.9;
  11.             modal-transparency-color: white;
  12.             modal-transparency-blur: 9;
  13.         }
  14.     </mx:Style>
  15.  
  16.     <mx:Script>
  17.         <![CDATA[
  18.             import mx.effects.Resize;
  19.             import mx.events.ResizeEvent;
  20.             import mx.events.ListEvent;
  21.             import mx.controls.Image;
  22.             import mx.events.ItemClickEvent;
  23.             import mx.managers.PopUpManager;
  24.  
  25.             private var img:Image;
  26.  
  27.             private function tileList_itemClick(evt:ListEvent):void {
  28.                 img = new Image();
  29.                 // img.width = 300;
  30.                 // img.height = 300;
  31.                 img.maintainAspectRatio = true;
  32.                 img.addEventListener(Event.COMPLETE, image_complete);
  33.                 img.addEventListener(ResizeEvent.RESIZE, image_resize);
  34.                 img.addEventListener(MouseEvent.CLICK, image_click);
  35.                 img.source = evt.itemRenderer.data.@fullImage;
  36.                 img.setStyle("addedEffect", image_addedEffect);
  37.                 img.setStyle("removedEffect", image_removedEffect);
  38.                 PopUpManager.addPopUp(img, this, true);
  39.             }
  40.  
  41.             private function image_click(evt:MouseEvent):void {
  42.                 PopUpManager.removePopUp(evt.currentTarget as Image);
  43.             }
  44.  
  45.             private function image_resize(evt:ResizeEvent):void {
  46.                 PopUpManager.centerPopUp(evt.currentTarget as Image);
  47.             }
  48.  
  49.             private function image_complete(evt:Event):void {
  50.                 PopUpManager.centerPopUp(evt.currentTarget as Image);
  51.             }
  52.         ]]>
  53.     </mx:Script>
  54.  
  55.     <mx:WipeDown id="image_addedEffect" startDelay="100" />
  56.  
  57.     <mx:Parallel id="image_removedEffect">
  58.         <mx:Zoom />
  59.         <mx:Fade />
  60.     </mx:Parallel>
  61.  
  62.     <mx:XML id="xml" source="gallery.xml" />
  63.     <mx:XMLListCollection id="xmlListColl" source="{xml.image}" />
  64.  
  65.     <mx:TileList id="tileList"
  66.             dataProvider="{xmlListColl}"
  67.             itemRenderer="CustomItemRenderer"
  68.             columnCount="4"
  69.             columnWidth="125"
  70.             rowCount="2"
  71.             rowHeight="100"
  72.             themeColor="haloSilver"
  73.             verticalScrollPolicy="on"
  74.             itemClick="tileList_itemClick(event);" />
  75.  
  76. </mx:Application>

下面是自定义的ItemRenderer设置文件：

Download: CustomItemRenderer.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
  3. <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         horizontalAlign="center"
  5.         verticalAlign="middle">
  6.  
  7.     <mx:Image source="{data.@thumbnailImage}" />
  8.  
  9.     <mx:Label text="{data.@title}" />
  10.  
  11. </mx:VBox>

接下来是图片定义的XML文件：

Download: gallery.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
  3. <gallery>
  4.     <image title="Flex"
  5.         thumbnailImage="assets/fx_appicon-tn.gif"
  6.         fullImage="assets/fx_appicon.jpg" />
  7.     <image title="Flash"
  8.             thumbnailImage="assets/fl_appicon-tn.gif"
  9.             fullImage="assets/fl_appicon.jpg" />
  10.     <image title="Illustrator"
  11.             thumbnailImage="assets/ai_appicon-tn.gif"
  12.             fullImage="assets/ai_appicon.jpg" />
  13.     <image title="Dreamweaver"
  14.             thumbnailImage="assets/dw_appicon-tn.gif"
  15.             fullImage="assets/dw_appicon.jpg" />
  16.     <image title="ColdFusion"
  17.             thumbnailImage="assets/cf_appicon-tn.gif"
  18.             fullImage="assets/cf_appicon.jpg" />
  19.     <image title="Flash Player"
  20.             thumbnailImage="assets/fl_player_appicon-tn.gif"
  21.             fullImage="assets/fl_player_appicon.jpg" />
  22.     <image title="Fireworks"
  23.             thumbnailImage="assets/fw_appicon-tn.gif"
  24.             fullImage="assets/fw_appicon.jpg" />
  25.     <image title="Lightroom"
  26.             thumbnailImage="assets/lr_appicon-tn.gif"
  27.             fullImage="assets/lr_appicon.jpg" />
  28.     <image title="Photoshop"
  29.             thumbnailImage="assets/ps_appicon-tn.gif"
  30.             fullImage="assets/ps_appicon.jpg" />
  31. </gallery>
下面是执行实例（可以右键察看源代码）：

原文作者：Peter deHaan 翻译：minidxer

written by Minidxer  |  tags: , , , , , ,

Related Post

4 Responses to “利用Flex的TileList控件创建一个简单的图片展示（相册）的例子”

  1. !CnSoLoer Says:
    March 9th, 2008 at 8:36 pm

    还蛮漂亮的说

  2. Minidxer Says:
    March 9th, 2008 at 9:00 pm

    Flex的表现力相当不错，所以做出来的东西看起来还是比较漂亮的，:)

Trackbacks

Leave a Reply