一个简单的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/

你可能感兴趣的:(Flex)