第一步：写好接口
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);
效果展示：
