注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

山歌

微信公众号:Jack-Xiaoshan

 
 
 
 
 

日志

 
 

利用Flex的TileList控件创建一个简单的图片展示(相册)的例子  

2009-09-19 05:28:54|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
这个例子展示了如何利用Flex的TileList控件,Image控件和PopUpManager类来创建一个简单的图片展示(相册)。 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>
下面是自定义的ItemRenderer设置文件:
<?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>
接下来是图片定义的XML文件:
Download: gallery.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/ -->
  3. <gallery>
  4. <image title="Flex"
  5. thumbnailImage="assets/fx_appicon-tn.gif"
  6. fullImage="assets/fx_appicon.jpg" />
  7. <image title="Flash"
  8. thumbnailImage="assets/fl_appicon-tn.gif"
  9. fullImage="assets/fl_appicon.jpg" />
  10. <image title="Illustrator"
  11. thumbnailImage="assets/ai_appicon-tn.gif"
  12. fullImage="assets/ai_appicon.jpg" />
  13. <image title="Dreamweaver"
  14. thumbnailImage="assets/dw_appicon-tn.gif"
  15. fullImage="assets/dw_appicon.jpg" />
  16. <image title="ColdFusion"
  17. thumbnailImage="assets/cf_appicon-tn.gif"
  18. fullImage="assets/cf_appicon.jpg" />
  19. <image title="Flash Player"
  20. thumbnailImage="assets/fl_player_appicon-tn.gif"
  21. fullImage="assets/fl_player_appicon.jpg" />
  22. <image title="Fireworks"
  23. thumbnailImage="assets/fw_appicon-tn.gif"
  24. fullImage="assets/fw_appicon.jpg" />
  25. <image title="Lightroom"
  26. thumbnailImage="assets/lr_appicon-tn.gif"
  27. fullImage="assets/lr_appicon.jpg" />
  28. <image title="Photoshop"
  29. thumbnailImage="assets/ps_appicon-tn.gif"
  30. fullImage="assets/ps_appicon.jpg" />
  31. </gallery>
  评论这张
 
阅读(7)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017