创建弹出窗口的图片展示

本帖最后由 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}"/>
                    <mxabel 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}"/>
                    <mxabel 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>