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> 

posted on 2012-08-14 16:53 youngturk 阅读(745) 评论(0)  编辑  收藏 所属分类: Flex DEV


只有注册用户登录后才能发表评论。
网站导航:
 
<2012年8月>
日一二三四五六
2930311234
567891011
12131415161718
19202122232425
2627282930311
2345678

导航

统计

公告

this year :
1 jQuery
2 freemarker
3 框架结构
4 口语英语

常用链接

留言簿(6)

随笔分类

随笔档案

文章分类

文章档案

相册

EJB学习

Flex学习

learn English

oracle

spring MVC web service

SQL

Struts

生活保健

解析文件

搜索

最新评论

阅读排行榜

评论排行榜