利用swiz框架从服务器获取图片列表并显示的实例

最新推荐文章于 2024-11-04 16:01:37 发布

dayong9117

最新推荐文章于 2024-11-04 16:01:37 发布

阅读量127

点赞数

文章标签：大数据

原文链接：http://www.cnblogs.com/shanlanjie/archive/2012/06/07/2540006.html

版权

第一步：写好接口

 1 package com.service
 2 {
 3     import flash.net.URLVariables;
 4     
 5     import mx.rpc.AsyncToken;
 6 
 7     public interface IImageDelegate
 8     {
 9         function getImageList(urlVars:URLVariables):AsyncToken;
10     }
11 }

第二步：在Beans文件，写好service

 1     <fx:Declarations>
 2         
 3         <s:HTTPService
 4             id="getImageListService"
 5             url="{ConstantManager.BASE_URL + '/getImageList.'+ConstantManager.URL_SUFFIX}"
 6             resultFormat="e4x"
 7             />
 8     <fx:Declarations>
 9     
10     <swiz:ServiceHelper />

第三步：写一个类去实现接口

 1 package com.service
 2 {
 3     import flash.net.URLVariables;
 4     
 5     import mx.rpc.AsyncToken;
 6     import mx.rpc.http.mxml.HTTPService;
 7     
 8     public class ImageDelegate implements IImageDelegate
 9     {
10         [Inject(source="getImageListService")]
11         public var getImageListService:HTTPService;   //向这个地址发出请求
12         
13         public function ImageDelegate()
14         {
15         }
16         
17         public function getImageList(urlVars:URLVariables):AsyncToken
18         {
19             return getImageListService.send(urlVars);
20         }
21     }
22 }

第四步：修改Beans.mxml,加入获取数据的类

<service:ImageDelegate />

第五步：写获取图片列表的事件

 1 package com.event
 2 {
 3     import flash.events.Event;
 4     
 5     public class ImageEvent extends Event
 6     {
 7         public static const GET_IMAGE_LIST:String = "ImageEvent.GET_IMAGE_LIST";
 8         
 9         public function ImageEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
10         {
11             super(type, bubbles, cancelable);
12         }
13     }
14 }

第六步：写Controller，在这里侦听事件，并从后台获取数据，注入获取数据的类

 1 package com.controller
 2 {
 3     import com.domain.vo.resourceImageVO;
 4     import com.model.AppModel;
 5     import com.model.ImageModel;
 6     import com.service.IImageDelegate;
 7     import com.service.ImageDelegate;
 8     import com.util.ErrorUtil;
 9     
10     import flash.display.JointStyle;
11     import flash.events.IEventDispatcher;
12     import flash.net.URLVariables;
13     
14     import mx.collections.ArrayCollection;
15     import mx.graphics.codec.IImageEncoder;
16     import mx.rpc.AsyncToken;
17     import mx.rpc.events.FaultEvent;
18     import mx.rpc.events.ResultEvent;
19     
20     import org.swizframework.utils.services.ServiceHelper;
21 
22     public class ImageController
23     {
24         [Inject]
25         public var serviceHelper:ServiceHelper;
26         
27         [Inject]
28         public var imageListDelegate:IImageDelegate;
29         
30         public function ImageController()
31         {
32         }
33         
34         /**
35          * 
36          *   获得图片List
37          */
38         [EventHandler(event="ImageEvent.GET_IMAGE_LIST")]
39 
40         public function getImageList():void
41         {
42             var urlVars:URLVariables = new URLVariables();
43             urlVars.userID = appModel.userId;  //需要传入的参数
44 
45             var asyncCall:AsyncToken = imageListDelegate.getImageList(urlVars);
46             serviceHelper.executeServiceCall(asyncCall,getImageListResultHandler,getImageListErrorHandler);
47 
48         }
49         
50         public function getImageListResultHandler(evt:ResultEvent):void
51         {
52             var xml:XML;
53             try
54             {
55                 xml = evt.result as XML;
56             }
57             catch(error:Error)
58             {
59                 ErrorUtil.showError(error.toString());
60             }
61             parseImageListXML(xml);
62         }
63         
64         private function parseImageListXML(xml:XML):void
65         {
66             if(xml == null)
67             {
68                 throw new Error("photo list xml error");
69             }
70             
71             var resourceImageList:ArrayCollection = new ArrayCollection();
72             
73             for each(var child:XML in xml.children())
74             {
75                     
76             }
77             
78         }
79         
80         public function getImageListErrorHandler(evt:FaultEvent):void
81         {
82             ErrorUtil.showError(evt.toString());
83         }
84         
85     }
86 }

第七步：写ImageVO

 1 package com.domain.vo
 2 {
 3     public class resourceImageVO extends Object
 4     {
 5         [Bindable]
 6         public var imgID:String;
 7         
 8         [Bindable]
 9         public var imgTitle:String;
10         
11         [Bindable]
12         public var s:String;
13         
14         [Bindable]
15         public var m:String;
16         
17         [Bindable]
18         public var b:String;
19         
20         
21         public function resourceImageVO()
22         {
23             super();
24         }
25     }
26 }

第八步：写Model，把获取到的VO存放到Model中，供全局调用

 1 package com.model
 2 {
 3     import mx.collections.ArrayCollection;
 4 
 5     public class ImageModel
 6     {
 7         [Bindable]
 8         public var imageList:ArrayCollection= new ArrayCollection();
 9         
10         public function ImageModel()
11         {
12         }
13     }
14 }

第九步：完善Beans,加入Model

    <!--image-->
    <controller:ImageController />
    <model:ImageModel id="imageModel" />

第十步：完善Controller，注入model，解析获取的xml数据，赋值到VO中，在增加到model中

 1 package com.controller
 2 {
 3     import com.domain.vo.resourceImageVO;
 4     import com.model.AppModel;
 5     import com.model.ImageModel;
 6     import com.service.IImageDelegate;
 7     import com.service.ImageDelegate;
 8     import com.util.ErrorUtil;
 9     
10     import flash.display.JointStyle;
11     import flash.events.IEventDispatcher;
12     import flash.net.URLVariables;
13     
14     import mx.collections.ArrayCollection;
15     import mx.graphics.codec.IImageEncoder;
16     import mx.rpc.AsyncToken;
17     import mx.rpc.events.FaultEvent;
18     import mx.rpc.events.ResultEvent;
19     
20     import org.swizframework.utils.services.ServiceHelper;
21 
22     public class ImageController
23     {
24         [Inject(source="imageModel")]
25         public var imageModel:ImageModel;
26         
27         [Inject(source="appModel")]
28         public var appModel:AppModel;
29         
30         [Inject]
31         public var serviceHelper:ServiceHelper;
32         
33         [Inject]
34         public var imageListDelegate:IImageDelegate;
35         
36         public function ImageController()
37         {
38         }
39         
40         /**
41          * 
42          *   获得图片List
43          */
44         [EventHandler(event="ImageEvent.GET_IMAGE_LIST")]
45 
46         public function getImageList():void
47         {
48             var urlVars:URLVariables = new URLVariables();
49             urlVars.userID = appModel.userId;  //需要传入的参数
50 
51             var asyncCall:AsyncToken = imageListDelegate.getImageList(urlVars);
52             serviceHelper.executeServiceCall(asyncCall,getImageListResultHandler,getImageListErrorHandler);
53         }
54         
55         public function getImageListResultHandler(evt:ResultEvent):void
56         {
57             var xml:XML;
58             try
59             {
60                 xml = evt.result as XML;
61             }
62             catch(error:Error)
63             {
64                 ErrorUtil.showError(error.toString());
65             }
66             parseImageListXML(xml);
67         }
68         
69         private function parseImageListXML(xml:XML):void
70         {
71             if(xml == null)
72             {
73                 throw new Error("photo list xml error");
74             }
75             
76             var imageList:ArrayCollection = new ArrayCollection();
77             
78             for each(var child:XML in xml.children())
79             {
80                 var imageVO:resourceImageVO = new resourceImageVO();
81                 imageVO.s = child.s;
82                 imageVO.m = child.m;
83                 imageVO.b =  child.b;
84                 imageVO.imgID = child.imgID;
85                 imageVO.imgTitle = child.title;
86                 imageList.addItem(imageVO);
87             }
88             imageModel.imageList = imageList;
89         }
90         
91         public function getImageListErrorHandler(evt:FaultEvent):void
92         {
93             ErrorUtil.showError(evt.toString());
94         }
95         
96     }
97 }

第十一步：写ViewPM,作为处理视图层与数据操作的中介，注入model

 1 package com.presentation
 2 {
 3     import flash.events.EventDispatcher;
 4     import flash.events.IEventDispatcher;
 5     
 6     import mx.collections.ArrayCollection;
 7     
 8     public class ImageListViewPM extends EventDispatcher
 9     {
10         [Dispatcher]
11         public var dispatcher:IEventDispatcher;
12         
13         [Bindable]
14         [Inject(source="imageModel.imageList",bind="true")]
15         public var imageList:ArrayCollection;
16         
17         
18         public function ImageListViewPM(target:IEventDispatcher=null)
19         {
20             super(target);
21         }
22     }
23 }

第十二步：完善Beans,加入PM

<swiz:Prototype
      type="{ImageListViewPM}"
      singleton="true"
       />

第十三步：写View层，注入PM

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
 3                       xmlns:s="library://ns.adobe.com/flex/spark" 
 4                       xmlns:mx="library://ns.adobe.com/flex/mx"
 5                        width="100%"
 6                       >
 7     
 8     <fx:Script>
 9         <![CDATA[
10             import com.presentation.ImageListViewPM;
11             
12             [Bindable]
13             [Inject]
14             public var model:ImageListViewPM;
15         ]]>
16     </fx:Script>
17     <s:VGroup>
18         <s:HGroup>
19             <s:Label text=    "将图片拖入方框"  fontSize="16"   color="#838383" styleName="labelStyle"/>
20             <s:Label text="图片：{imageList.dataProvider.length}" paddingLeft="20" color="#838383"  fontSize="14" styleName="labelStyle"/>
21         </s:HGroup>
22     <s:List id="imageList" width="100%"  height="550"
23              borderVisible="false" verticalCenter="0" horizontalCenter="0"
24              left="15" top="10" right="5" bottom="10"
25              dataProvider="{model.imageList}"
26               dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"
27              skinClass="com.view.skin.ImageListSkin"
28              itemRenderer="com.view.renderer.ImageListItemsrenderer"
29                verticalScrollPolicy="auto"  
30              >
31         <s:layout>
32             <s:TileLayout requestedColumnCount="3"/>
33         </s:layout>
34     </s:List>
35     </s:VGroup>
36 </s:SkinnableContainer>

ItemRenderer.mxml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
 3                 xmlns:s="library://ns.adobe.com/flex/spark" 
 4                 xmlns:mx="library://ns.adobe.com/flex/mx" 
 5                 autoDrawBackground="true">
 6     
 7     <s:Rect left="0" top="0" bottom="0" right="0">
 8         <s:fill>
 9             <s:SolidColor color="0xffffff" />
10         </s:fill>
11     </s:Rect>
12     <s:BorderContainer id="imageCtn" dropShadowVisible="true" cornerRadius="4" borderAlpha="0.2" minHeight="0" minWidth="0" mouseDown="mouseDownHandler(event)">
13         <s:Image id="img" source="{data.s}" width="100" height="100" smooth="true" left="2" right="2" bottom="2" top="2"/>
14     </s:BorderContainer>
15     
16 </s:ItemRenderer>

第十四步：触发获取图片列表事件即可

var imageEvent:ImageEvent = new ImageEvent(ImageEvent.GET_IMAGE_LIST); //获取图片列表事件
//在imageController中侦听
dispatcher.dispatchEvent(imageEvent);

效果展示：

转载于:https://www.cnblogs.com/shanlanjie/archive/2012/06/07/2540006.html

dayong9117

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫