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, 
thistrue); 
            }
 
  
            
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 阅读(752) 评论(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

生活保健

解析文件

搜索

最新评论

阅读排行榜

评论排行榜