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

<mx:Style>
global {
modal-transparency: 0.9;
modal-transparency-color: white;
modal-transparency-blur: 9;
}
</mx:Style>

<mx:Script>
<![CDATA[
import mx.effects.Resize;
import mx.events.ResizeEvent;
import mx.events.ListEvent;
import mx.controls.Image;
import mx.events.ItemClickEvent;
import mx.managers.PopUpManager;

private var img:Image;

private function tileList_itemClick(evt:ListEvent):void {
img = new Image();
// img.width = 300;
// img.height = 300;
img.maintainAspectRatio = true;
img.addEventListener(Event.COMPLETE, image_complete);
img.addEventListener(ResizeEvent.RESIZE, image_resize);
img.addEventListener(MouseEvent.CLICK, image_click);
img.source = evt.itemRenderer.data.@fullImage;
img.setStyle("addedEffect", image_addedEffect);
img.setStyle("removedEffect", image_removedEffect);
PopUpManager.addPopUp(img, this, true);
}

private function image_click(evt:MouseEvent):void {
PopUpManager.removePopUp(evt.currentTarget as Image);
}

private function image_resize(evt:ResizeEvent):void {
PopUpManager.centerPopUp(evt.currentTarget as Image);
}

private function image_complete(evt:Event):void {
PopUpManager.centerPopUp(evt.currentTarget as Image);
}
]]>
</mx:Script>

<mx:WipeDown id=“image_addedEffect“ startDelay=“100“ />

<mx:Parallel id=”image_removedEffect”>
<mx:Zoom />
<mx:Fade />
</mx:Parallel>

<mx:XML id=“xml“ source=“gallery.xml“ />
<mx:XMLListCollection id=”xmlListColl” source=”{xml.image}” />

<mx:TileList id=“tileList“
dataProvider=“{xmlListColl}“
itemRenderer=“CustomItemRenderer“
columnCount=“4“
columnWidth=“125“
rowCount=“2“
rowHeight=“100“
themeColor=“haloSilver“
verticalScrollPolicy=“on“
itemClick=“tileList_itemClick(event);“ />

</mx:Application>

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>