TileList as a Photogallery

The TileList control displays list of items which are tiled columns and rows. The TileList control is for displaying a list of images which needs itemRenderer to be used to locate the image because the default itemRenderer of TileList is TileListItemRenderer and shows olnly text of data provider's list and icons.
In the source code below it is shown how to display images in a TileList control.

<mx:XML id="xml" source="gallery.xml" /> <mx:XMLListCollection id="xmlListColl" source="{xml.image}" /> <mx:TileList id="tileList" width="100%" dataProvider="{xmlListColl}" columnWidth="160" rowHeight="180" themeColor="haloSilver" maxRows="2" maxColumns="1" itemClick="tileList_itemClick(event);" borderColor="white" verticalScrollPolicy="off"> <mx:itemRenderer> <mx:Component> <mx:Panel> <mx:Image source="{data.@source}" width="130" height="120" /> </mx:Panel> </mx:Component> </mx:itemRenderer> </mx:TileList>

The following shows how to control the click event of the images and give some effects to the imges:

import mx.events.ItemClickEvent; import mx.effects.Resize; import mx.events.ResizeEvent; import mx.events.ListEvent; import mx.controls.Image; import mx.managers.PopUpManager; private var img:Image; private function tileList_itemClick(evt:ListEvent):void { img = new Image(); img.maintainAspectRatio = true; img.addEventListener(Event.COMPLETE, evtComplete); img.addEventListener(ResizeEvent.RESIZE, evtResize); img.addEventListener(MouseEvent.CLICK, evtClick); img.source = evt.itemRenderer.data.@fullImage; img.setStyle("addedEffect", imageEffect); img.setStyle("removedEffect", imageRemovedEffect); img.height = 400; img.width = 600; PopUpManager.addPopUp(img, this, true); } private function evtClick(evt:MouseEvent):void { PopUpManager.removePopUp(evt.currentTarget as Image); } private function evtResize(evt:ResizeEvent):void { PopUpManager.centerPopUp(evt.currentTarget as Image); } private function evtComplete(evt:Event):void { PopUpManager.centerPopUp(evt.currentTarget as Image); } <mx:WipeDown id="imageEffect" startDelay="100" /> <mx:Parallel id="imageRemovedEffect"> <mx:Rotate/> <mx:Fade /> </mx:Parallel>