tileLIst实现图像列表

tileLIst实现图像列表

main.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: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 >