创建弹出窗口的图片展示 - 星^_^風

本帖最后由 oisweb 于 2009-11-24 14:11 编辑

图片有点大了显示不是很好自己看着办吧
1 创建工程设置页面属性

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
   horizontalAlign="center"  verticalAlign="middle" >

2 创建xml文件读取图片

<?xml version="1.0"?>
<gallery>

<movie>
<pic>1.jpg</pic>
<title>腾焰飞芒</title>
<date>腾焰飞芒</date>
</movie>

<movie>
<pic>2.jpg</pic>
<title>凌波微步</title>
<date>凌波微步</date>
</movie>

<movie>
<pic>3.jpg</pic>
<title>飞侠失足</title>
<date>飞侠失足</date>
</movie>

      <movie>
<pic>4.jpg</pic>
<title>得失寸心知</title>
<date>得失寸心知</date>
</movie>

<movie>
<pic>5.jpg</pic>
<title>直冲云霄</title>
<date>直冲云霄</date>
</movie>

<movie>
<pic>6.jpg</pic>
<title>势不可挡</title>
<date>势不可挡</date>
</movie>

   <movie>
<pic>7.jpg</pic>
<title>鹰击长空</title>
<date>鹰击长空</date>
</movie>

<movie>
<pic>8.jpg</pic>
<title>凝神聚气</title>
<date>凝神聚气</date>
</movie>

<movie>
<pic>9.jpg</pic>
<title>风激电飞</title>
<date>风激电飞</date>
</movie>

<movie>
<pic>10.jpg</pic>
<title>百万吨暴扣</title>
<date>百万吨暴扣</date>
</movie>

<movie>
<pic>11.jpg</pic>
<title>虎视眈眈</title>
<date>虎视眈眈</date>
</movie>

<movie>
<pic>12.jpg</pic>
<title>一意专心</title>
<date>一意专心</date>
</movie>
</gallery>

3 创建图片文件夹 images 放要展示的图片
4 加入<mx:HTTPService id="service" url="images.xml" result="serviceHandler(event)"/>
5好开始写代码把先as吧
<mx:Script>
      <![CDATA[
         import mx.collections.ArrayCollection;
         import mx.rpc.events.ResultEvent;

         [Bindable]
         private var movies:ArrayCollection;

         private function serviceHandler(event:ResultEvent):void{
            movies = event.result.gallery.movie;
         }

      ]]>
</mx:Script>

6 读取xml数据我们需要呼叫httpservice

头顶加入send()方法
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
   horizontalAlign="center"  verticalAlign="middle"
   creationComplete="service.send()" >

7 缩略图展示我们用TileList组件

<mx:TileList id="moviesList" dataProvider="{movies}"
      direction="horizontal"
      width="800" height="450" rowHeight="150" columnWidth="200">
      <mx:itemRenderer>
         <mx:Component>
            <mx:VBox horizontalAlign="center" verticalAlign="middle">
                  <mx:Image source="images/thumbs/{data.pic}"/>
                  <mx

abel text="{data.date}" />
            </mx:VBox>
         </mx:Component>
      </mx:itemRenderer>
</mx:TileList>

8 有了缩略图我们要最终显示大图片我们建一个自定义组件mx:TitleWindow
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" width="400" height="520"
horizontalAlign="center"
showCloseButton="true"
close="closeWindow(event);" >

<mx:Script>
<![CDATA[

import mx.events.CloseEvent;
import mx.managers.PopUpManager;

[Bindable]
public var sourceImage:String;

private function closeWindow(e:CloseEvent):void {
PopUpManager.removePopUp(this);
}

]]>
</mx:Script>

<mx:Image source="{sourceImage}"/>

</mx:TitleWindow>
9 同时为使弹出窗口更加得心应手，我们希望能够关闭它，只是上按一下。为此，我们要派出一个click事件侦听CloseEvent。
<mx:TileList id="moviesList" dataProvider="{movies}"
      direction="horizontal"
      width="800" height="450" rowHeight="150" columnWidth="200"
      click="launchPopUp(event)">
10 返回主文件增加点击事件
<mx:TileList id="moviesList" dataProvider="{movies}"
      direction="horizontal"
      width="800" height="450" rowHeight="150" columnWidth="200"
      click="launchPopUp(event)">

11 增加

private function launchPopUp(e:MouseEvent):void {
      if(moviesList.selectedItem){
            var win : Window = new Window();
            win.sourceImage = "images/"+moviesList.selectedItem.pic;
            win.title =  moviesList.selectedItem.title;
            PopUpManager.addPopUp(win,this,true);
            PopUpManager.centerPopUp(win);
      }
}

12 ok ！具体看最终代码吧图片文件夹内容自己加吧给出三个文件

Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
   horizontalAlign="center"  verticalAlign="middle"
   creationComplete="service.send()" viewSourceURL="srcview/index.html">

<mx:Style>
global{
     modalTransparency : .8;
modalTransparencyColor : #000000;
     }
     Application{
          backgroundGradientColors: #ffffff, #ffffff;
   backgroundGradientAlphas: 1, 1;
     }
      TileList{
         selectionColor:  #717070;
         rollOverColor: #CCCCCC;
         borderStyle : none;
      }
      TitleWindow{
     borderColor : #C1C1C1;
     borderAlpha : .8;
     fontSize : 14;
     fontFamily :Georgia;
     fontWeight : bold ;
     color : #FFFFFF;
     }
     Label{
     color : #000000;
     fontStyle : italic;
     }
</mx:Style>

<mx:Script>
      <![CDATA[
         import mx.collections.ArrayCollection;
         import mx.rpc.events.ResultEvent;
         import mx.managers.PopUpManager;

         [Bindable]
         private var movies:ArrayCollection;

         private function serviceHandler(event:ResultEvent):void{
            movies = event.result.gallery.movie;
         }

         private function launchPopUp(e:MouseEvent):void {
if(moviesList.selectedItem){
var win : Window = new Window();
win.sourceImage = "images/"+moviesList.selectedItem.pic;
win.title =  moviesList.selectedItem.title;
PopUpManager.addPopUp(win,this,true);
PopUpManager.centerPopUp(win);
}
}

      ]]>
</mx:Script>

<mx:HTTPService id="service" url="images.xml" result="serviceHandler(event)"/>
<mx:TileList id="moviesList" dataProvider="{movies}"
      direction="horizontal"
      width="100%" height="100%" rowHeight="250" columnWidth="200"
      click="launchPopUp(event)">
      <mx:itemRenderer>
         <mx:Component>
            <mx:VBox horizontalAlign="center" verticalAlign="middle">
                  <mx:Image source="images/thumbs/{data.pic}"/>
                  <mx

abel text="{data.date}" />
            </mx:VBox>
         </mx:Component>
      </mx:itemRenderer>
</mx:TileList>

</mx:Application>

images.xml

<?xml version="1.0"?>
<gallery>

<movie>
<pic>1.jpg</pic>
<title>腾焰飞芒</title>
<date>腾焰飞芒</date>
</movie>

<movie>
<pic>2.jpg</pic>
<title>凌波微步</title>
<date>凌波微步</date>
</movie>

<movie>
<pic>3.jpg</pic>
<title>飞侠失足</title>
<date>飞侠失足</date>
</movie>

      <movie>
<pic>4.jpg</pic>
<title>得失寸心知</title>
<date>得失寸心知</date>
</movie>

<movie>
<pic>5.jpg</pic>
<title>直冲云霄</title>
<date>直冲云霄</date>
</movie>

<movie>
<pic>6.jpg</pic>
<title>势不可挡</title>
<date>势不可挡</date>
</movie>

   <movie>
<pic>7.jpg</pic>
<title>鹰击长空</title>
<date>鹰击长空</date>
</movie>

<movie>
<pic>8.jpg</pic>
<title>凝神聚气</title>
<date>凝神聚气</date>
</movie>

<movie>
<pic>9.jpg</pic>
<title>风激电飞</title>
<date>风激电飞</date>
</movie>

<movie>
<pic>10.jpg</pic>
<title>百万吨暴扣</title>
<date>百万吨暴扣</date>
</movie>

<movie>
<pic>11.jpg</pic>
<title>虎视眈眈</title>
<date>虎视眈眈</date>
</movie>

<movie>
<pic>12.jpg</pic>
<title>一意专心</title>
<date>一意专心</date>
</movie>
</gallery>

Window.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="100%" height="100%"
horizontalAlign="left"
showCloseButton="true"
close="closeWindow(event);"
click="dispatchEvent(new CloseEvent(CloseEvent.CLOSE));">

<mx:Script>
<![CDATA[

import mx.events.CloseEvent;
import mx.managers.PopUpManager;

[Bindable]
public var sourceImage:String;

private function closeWindow(e:CloseEvent):void {
PopUpManager.removePopUp(this);
}

]]>
</mx:Script>

<mx:Image source="{sourceImage}"/>

</mx:TitleWindow>

posted on 2012-02-22 21:44 星^_^風阅读(257) 评论(0) 编辑收藏举报

刷新页面返回顶部