一個簡單的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 {

        ]]>

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

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

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