一个简单的FLEX相册，了解Itemrender用法。

<? xml version="1.0" encoding="utf-8" ?>
<!--  http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/  -->
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"
        layout ="vertical"
        verticalAlign ="middle"
        backgroundColor ="white" >

     < 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 >

以下是 CustomItemRenderer.mxml    ：

<? xml version="1.0" encoding="utf-8" ?>
<!--  http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/  -->
< mx:VBox  xmlns:mx ="http://www.adobe.com/2006/mxml"
        horizontalAlign ="center"
        verticalAlign ="middle" >

     < mx:Image  source =" {data.@thumbnailImage} "   />

     < mx:Label  text =" {data.@title} "   />

</ mx:VBox >

以下是 gallery.xml   ：

<? xml version="1.0" encoding="utf-8" ?>
<!--  http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/  -->
< gallery >
     < image  title ="Flex"
        thumbnailImage ="assets/fx_appicon-tn.gif"
        fullImage ="assets/fx_appicon.jpg"   />
     < image  title ="Flash"
            thumbnailImage ="assets/fl_appicon-tn.gif"
            fullImage ="assets/fl_appicon.jpg"   />
     < image  title ="Illustrator"
            thumbnailImage ="assets/ai_appicon-tn.gif"
            fullImage ="assets/ai_appicon.jpg"   />
     < image  title ="Dreamweaver"
            thumbnailImage ="assets/dw_appicon-tn.gif"
            fullImage ="assets/dw_appicon.jpg"   />
     < image  title ="ColdFusion"
            thumbnailImage ="assets/cf_appicon-tn.gif"
            fullImage ="assets/cf_appicon.jpg"   />
     < image  title ="Flash Player"
            thumbnailImage ="assets/fl_player_appicon-tn.gif"
            fullImage ="assets/fl_player_appicon.jpg"   />
     < image  title ="Fireworks"
            thumbnailImage ="assets/fw_appicon-tn.gif"
            fullImage ="assets/fw_appicon.jpg"   />
     < image  title ="Lightroom"
            thumbnailImage ="assets/lr_appicon-tn.gif"
            fullImage ="assets/lr_appicon.jpg"   />
     < image  title ="Photoshop"
            thumbnailImage ="assets/ps_appicon-tn.gif"
            fullImage ="assets/ps_appicon.jpg"   />
</ gallery >

来自： http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/