排列列表控件TileList

选择字号： 超大 标准 发布时间：2010-2-19 9:57:16 | 作者：admin | 0个评论 | 人浏览

Main.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

       layout="vertical"

       verticalAlign="middle"

       backgroundColor="white" viewSourceURL="srcview/index.html">

 

    <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="3"

           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"?>

<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"?>

 

<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>

标签：

猜你喜欢