zengxiangshun
- 浏览: 58440 次
- 性别:
- 来自: 深圳
-
文章分类
最新评论
-
ttianyaren：
你的AdvancedDataGrid呢，不要到处抄连代码都不看 ...
flex AdvancedDataGrid实现checkbox全选 -
zengxiangshun：
star245 写道怎么取得选中的复选框的值哦，新手求教中，， ...
flex AdvancedDataGrid实现checkbox全选 -
star245：
怎么取得选中的复选框的值哦，新手求教中，，，，
flex AdvancedDataGrid实现checkbox全选 -
zdf1943：
怎么用的，求教
牛人写的50行俄罗斯方块代码（附带声音） -
citybuster_one：
very GOOD!
HP大中华区总裁孙振耀退休感言
Cairngorm是Flex的一个MVC框架结构
使用Cairngorm的第一步是建立框架结构的骨架，包括了三个对象：
Model Locater；
Service Locator；
Front Controller；
Model Locator：承载了组件之间的所有的传递的信息和数据，这是一个Bindable（可绑定的）对象。
Service Locator：定义了与数据源（Httpservice，Webservice，Remoteobject）之间通讯的界面。
Front Controller：建立播送事件（Dispatch event）和命令层（command）之间的对应关系（mapping）。
看一下相关的代码：
BuddyAppModelLocator.as:
Xml代码
在Model Locator代码中，定义了三个public的变量，buddyList：用来存放由数据库获取的密友列表；loginUser：定义一个User类型对象；viewStackSelectedIndex：定义viewStack指向的视窗。
几乎所有的服务层返回的信息都需要在Model Locator中有一个相应的对象。
BuddyServiceLocator.mxml:
Xml代码
上述代码定义了程序将要调用的RemoteObject ，RemoteObject 所调用的Destination需要和remote_config.xml文件中的Destination相一致。在此，Destination的值为“flexmvcRO”。
BuddyListController.as:
Xml代码
很显然，上述的Controller代码是事件和命令的对应处理的地方。
如何能将这些乱七八糟的东西结合在一起？其Magic的地方是在主页（Main application）上，代码如下：
BuddList_Main_Cairngorm.mxml:
Xml代码
现在用户可以建立视图组件，并从这些组件中播送事件:
LoginView.mxml:
Xml代码
每一个动作都需要建立一个相应的事件：
LoginEvent.as:
Xml代码
每一个事件都 要对应于一个命令：
LoginCommand.as:
Xml代码
然后，在Front Controller（前端控制器）中build对应关系：
addCommand(LoginEvent.LOGIN_EVENT,LoginCommand);
命令层需要完成商务逻辑，用户需要在执行方法中加入商务逻辑代码：
Xml代码
Delegate（代表）用来通过服务层（Service Locator）调用数据源：
LoginDelegate.as:
Xml代码
返回的结果将回复到命令层(LoginCommand.as)的结果方法中，在此方法中Model被更新，然后数据被绑定到结果视图上：
LoginCommand.as:
Xml代码
其它的视图工作流程同上，整个密友列表项目的结构如下图所示：
使用Cairngorm的第一步是建立框架结构的骨架，包括了三个对象：
Model Locater；
Service Locator；
Front Controller；
Model Locator：承载了组件之间的所有的传递的信息和数据，这是一个Bindable（可绑定的）对象。
Service Locator：定义了与数据源（Httpservice，Webservice，Remoteobject）之间通讯的界面。
Front Controller：建立播送事件（Dispatch event）和命令层（command）之间的对应关系（mapping）。
看一下相关的代码：
BuddyAppModelLocator.as:
Xml代码
1. <EM>package com.ny.flex.cairngorm.model
2. {
3. import com.ny.flex.cairngorm.vo.User;
4.
5. import mx.collections.ArrayCollection;
6.
7. [Bindable]
8. public class BuddyAppModelLocator
9. {
10. public var buddyList:ArrayCollection=new ArrayCollection();
11. public var loginUser:User=new User();
12. public var viewStackSelectedIndex :int = 0;
13.
14. static private var __instance:BuddyAppModelLocator=null;
15.
16. static public function getInstance():BuddyAppModelLocator
17. {
18. if(__instance == null)
19. {
20. __instance=new BuddyAppModelLocator();
21. }
22. return __instance;
23. }
24. }
25. }
26. </EM>
在Model Locator代码中，定义了三个public的变量，buddyList：用来存放由数据库获取的密友列表；loginUser：定义一个User类型对象；viewStackSelectedIndex：定义viewStack指向的视窗。
几乎所有的服务层返回的信息都需要在Model Locator中有一个相应的对象。
BuddyServiceLocator.mxml:
Xml代码
1. <EM><EM><?xml version=”1.0″ encoding=”utf-8″?> 2. <cairngorm:ServiceLocator xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:cairngorm=”http://www.adobe.com/2006/cairngorm“> 3. <mx:RemoteObject id=”buddyRo“ destination=”flexmvcRO” > 4. 5. </mx:RemoteObject> 6. </cairngorm:ServiceLocator> 7. </EM></EM>
上述代码定义了程序将要调用的RemoteObject ，RemoteObject 所调用的Destination需要和remote_config.xml文件中的Destination相一致。在此，Destination的值为“flexmvcRO”。
BuddyListController.as:
Xml代码
1. <EM><EM><STRONG>package com.ny.flex.cairngorm.control
2. {
3. import com.adobe.cairngorm.control.FrontController;
4. import com.ny.flex.cairngorm.command.GetBuddyListCommand;
5. import com.ny.flex.cairngorm.command.LoginCommand;
6. import com.ny.flex.cairngorm.event.GetBuddyListEvent;
7. import com.ny.flex.cairngorm.event.LoginEvent;
8.
9. public class BuddyListController extends FrontController
10. {
11. public function BuddyListController()
12. {
13. super();
14. addCommand(LoginEvent.LOGIN_EVENT,LoginCommand);
15. addCommand(GetBuddyListEvent.GET_BUDDY_LIST_EVENT,
16. GetBuddyListCommand);
17. }
18.
19. }
20. }
21. </STRONG></EM></EM>
很显然，上述的Controller代码是事件和命令的对应处理的地方。
如何能将这些乱七八糟的东西结合在一起？其Magic的地方是在主页（Main application）上，代码如下：
BuddList_Main_Cairngorm.mxml:
Xml代码
1. <EM><EM><STRONG><?xml version=”1.0″ encoding=”utf-8″?>
2. <mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml“ xmlns:service=”com.ny.flex.cairngorm.service.*“ xmlns:controller=”com.ny.flex.cairngorm.control.*” xmlns:views=”com.ny.flex.cairngorm.views.*” layout=”absolute“ width=”100%” height=”100%“>
3. <mx:Script>
4. <![CDATA[
5. import com.ny.flex.cairngorm.model.BuddyAppModelLocator;
6. [Bindable]
7. public var myModel:BuddyAppModelLocator = BuddyAppModelLocator.getInstance();
8. ]]>
9. </mx:Script>
10.
11. <service:BuddyServiceLocator id=”myservice“/>
12. <controller:BuddyListController id=”myController“/>
13.
14. <mx:HBox horizontalAlign=”center” verticalAlign=”top“ width=”100%” height=”100%” y=”0” x=”0“>
15. <mx:ViewStack id=”viewStack“ resizeToContent=”true” selectedIndex=”{myModel.viewStackSelectedIndex}” >
16. <views:LoginView />
17. <views:BuddyListView/>
18. </mx:ViewStack>
19. </mx:HBox>
20. </mx:Application>
21. </STRONG></EM></EM>
现在用户可以建立视图组件，并从这些组件中播送事件:
LoginView.mxml:
Xml代码
1. <EM><EM><STRONG><EM> <![CDATA[
2. import com.ny.flex.cairngorm.event.LoginEvent;
3. import com.ny.flex.cairngorm.vo.User;
4. import mx.validators.Validator;
5. private function login():void{
6. if(Validator.validateAll(validators).length == 0){
7. var loginUser:User = new User();
8. loginUser.userName=username.text;
9. loginUser.password=password.text;
10. var loginEvent:LoginEvent = new LoginEvent();
11. loginEvent.loginUser = loginUser;
12. loginEvent.dispatch();
13. }
14. }
15. ]]>
16. </mx:Script>
17.
18. <!– Validators–>
19. <mx:Array id=”validators“>
20. <mx:StringValidator id=”userNameValidator” source=”{username}“ property=”text“ required=”true“/>
21. <mx:StringValidator id=”passwordValidator” source=”{password}“ property=”text” required=”true” />
22. </mx:Array>
23.
24.
25. <mx:Form id=”loginForm” x=”0” y=”0“>
26. <mx:FormItem label=”Username:” >
27. <mx:TextInput id=”username” />
28. </mx:FormItem>
29. <mx:FormItem label=”Password:” >
30. <mx:TextInput id=”password” displayAsPassword=”true” />
31. </mx:FormItem>
32. <mx:FormItem direction=”horizontal” verticalGap=”15” paddingTop=”5” width=”170“>
33. <mx:Button id=”loginBtn” label=”Login” click=”login()”/>
34. </mx:FormItem>
35. </mx:Form>
36.
37. </mx:Panel>
38. </EM></STRONG></EM></EM>
每一个动作都需要建立一个相应的事件：
LoginEvent.as:
Xml代码
1. <EM><EM><STRONG><EM>package com.ny.flex.cairngorm.event
2. {
3. import com.adobe.cairngorm.control.CairngormEvent;
4. import com.ny.flex.cairngorm.vo.User;
5.
6. import flash.events.Event;
7.
8. public class LoginEvent extends CairngormEvent
9. {
10. public static var LOGIN_EVENT:String = “loginEvent”
11. public var loginUser:User ;
12.
13. public function LoginEvent()
14. {
15. super(LOGIN_EVENT);
16. }
17.
18. override public function clone() : Event
19. {
20. return new LoginEvent();
21. }
22. }
23. }
24. </EM></STRONG></EM></EM>
每一个事件都 要对应于一个命令：
LoginCommand.as:
Xml代码
1. <EM><EM><STRONG>package com.ny.flex.cairngorm.command
2. {
3. import com.adobe.cairngorm.commands.ICommand;
4. import com.adobe.cairngorm.control.CairngormEvent;
5. import com.ny.flex.cairngorm.event.LoginEvent;
6. import com.ny.flex.cairngorm.model.BuddyAppModelLocator;
7. import com.ny.flex.cairngorm.service.LoginDelegate;
8. import com.ny.flex.cairngorm.vo.User;
9.
10. import mx.controls.Alert;
11. import mx.rpc.IResponder;
12.
13. public class LoginCommand implements ICommand, IResponder
14. {
15. public function LoginCommand()
16. {
17. }
18.
19. public function execute(event:CairngormEvent):void
20. {
21. var loginEvent:LoginEvent = LoginEvent(event);
22. var user:User = loginEvent.loginUser;
23. var lgoinService :LoginDelegate
24. = new LoginDelegate(this);
25. lgoinService.authenticate(user);
26. }
27.
28. public function result(event:Object):void
29. {
30. var authUser:User = User(event.result);
31. BuddyAppModelLocator.getInstance().loginUser = authUser;
32. BuddyAppModelLocator.getInstance().viewStackSelectedIndex=1;
33. }
34.
35. public function fault(info:Object):void
36. {
37. Alert.show(“Login Fail Error “);
38. }
39.
40. }
41. }
42. </STRONG></EM></EM>
然后，在Front Controller（前端控制器）中build对应关系：
addCommand(LoginEvent.LOGIN_EVENT,LoginCommand);
命令层需要完成商务逻辑，用户需要在执行方法中加入商务逻辑代码：
Xml代码
1. <EM><EM><STRONG> var lgoinService :LoginDelegate = 2. new LoginDelegate(this); 3. lgoinService.authenticate(user); 4. </STRONG></EM></EM>
Delegate（代表）用来通过服务层（Service Locator）调用数据源：
LoginDelegate.as:
Xml代码
1. <EM><EM><STRONG><EM>package com.ny.flex.cairngorm.service
2. {
3. import com.adobe.cairngorm.business.ServiceLocator;
4. import com.ny.flex.cairngorm.vo.User;
5.
6. import mx.rpc.IResponder;
7.
8. public class LoginDelegate
9. {
10. private var responder:IResponder;
11. private var service:Object;
12.
13. public function LoginDelegate(responder :IResponder){
14. this.service =
15. ServiceLocator.getInstance()
16. .getRemoteObject(“buddyRo”);
17. this.responder = responder;
18. }
19.
20. public function authenticate(user:User):void{
21. var call:Object = service.authenticate(user);
22. call.addResponder(responder);
23. }
24. }
25. }
26.
27. </EM></STRONG></EM></EM>
返回的结果将回复到命令层(LoginCommand.as)的结果方法中，在此方法中Model被更新，然后数据被绑定到结果视图上：
LoginCommand.as:
Xml代码
1. <EM><EM><STRONG> public function result(event:Object):void
2. {
3. var authUser:User = User(event.result);
4. BuddyAppModelLocator.getInstance().loginUser
5. = authUser;
6. BuddyAppModelLocator.getInstance().viewStackSelectedIndex=1;
7. }
8. </STRONG></EM></EM>
其它的视图工作流程同上，整个密友列表项目的结构如下图所示：
分享到：
发表评论
-
flex 左右左右选择器
2011-08-10 09:33 1056<?xml version="1.0" ... -
flex AdvancedDataGrid实现checkbox全选
2011-07-17 00:14 3219还有几个好的例子的地址：http://www.ityangba ... -
Flex报表学习网站
2011-06-24 22:14 2436Flex报表学习网站 FusionCharts for Fle ... -
Flex实例一(实现左右多选框的拖拽、点击选择，双击选择，左右互选)
2011-06-24 21:57 1814代码: <?xml version="1.0& ... -
flex控件的学习网站（收藏）
2011-06-24 15:30 1109刚开始看flex，觉得没有什么头绪，里面的控件太多，感觉无从入 ... -
Flex学习网站
2011-06-21 09:25 9801.http://www.adobe.com/devnet/f ... -
牛人写的50行俄罗斯方块代码（附带声音）
2011-06-21 08:50 1645package{ import flash.display ... -
Flex3与Flex4的区别
2011-06-20 10:04 11171. 集成Adobe Catalyst Flex ... -
Flex的MVC框架结构-Cairngorm
2011-06-20 09:56 1Cairngorm是Flex的一个MVC框 ... -
Flex4之DataGrid增删改同步数据库及页面数据示例总结
2011-06-20 09:51 1285有关Flex的DataGrid文章的 ... -
EventDispatcher类详解
2011-06-20 09:48 1145Evevt和EventDispatcher类在as3的事件机制 ...
相关推荐
### Flex流行MVC框架之Cairngorm #### 一、Cairngorm框架简介 Cairngorm作为Adobe Flex中最流行的MVC(Model-View-Controller)架构之一，在Flex开发中占据着重要的地位。它是一种轻量级的框架，旨在简化Flex应用...
"Flex-cairngorm-demo我喜欢的"是一个基于Cairngorm框架的示例项目，开发者对其表现出了浓厚的兴趣。 Cairngorm的核心概念包括： 1. **Model**: 模型层负责处理业务逻辑和数据管理，通常与后端服务进行交互。它保持...
Cairngorm就是一种在Flex中广泛采用的轻量级MVC框架。 Cairngorm由Adobe的首席架构师Rob Tarran创建，它为Flex应用提供了简单但强大的结构，使得开发者能够更好地管理应用程序的状态和业务逻辑。这个框架的核心组件...
#### 三、Cairngorm框架结构详解 Cairngorm框架的核心结构由以下几个主要组成部分构成： 1. **Business（业务逻辑部分）** - `IServiceLocator`：用于获取服务对象（如Java类）的接口。 - `IServices`：服务接口...
Flex Cairngorm框架是Adobe Flex应用程序开发中的一个流行的设计模式，它基于Model-View-Controller（MVC）架构，旨在提高代码的可维护性和可扩展性。Cairngorm框架由SitePen公司开发，最初是为了满足大型企业级Flex...
标题提到的"Flex MVC框架下载"，指的是提供了两种主流的Flex MVC框架——PureMVC和Cairngorm的SWC库文件。SWC是Adobe Flash和Flex中用于共享库和组件的二进制格式，开发者可以直接将这些库导入到项目中使用，无需...
Cairngorm是一个轻量级的MVC（Model-View-Controller）框架，专为Adobe Flex应用程序设计。这个框架提供了一种结构化的方法来...同时，Cairngorm的模式和原则也适用于其他MVC框架，对于提升软件工程能力具有深远意义。
Flex MVC框架提供了良好的组织结构，使得代码分离、职责明确，从而提升开发效率和软件质量。 在Flex MVC框架中，有三个核心组件： 1. **模型（Model）**：模型层负责管理应用程序的数据和业务逻辑。它可以与后端...
Cairngorm是Adobe的官方MVC框架，它为Flex开发者提供了一套结构化的方法来构建复杂的Flex应用。Cairngorm的核心组件包括：Event Dispatcher（事件调度器）、Service Locator（服务定位器）、Command（命令）、...
Cairngorm 框架是 Adobe Flex 开发中的一个著名模型-视图-控制器（MVC）架构，它提供了一种结构化的方法来组织和管理应用程序代码，从而提高开发效率和代码可维护性。该框架的核心思想是将应用程序的不同部分——...
- **Cairngorm框架**：Cairngorm是一个用于构建大型Flex应用的MVC框架。 - **设计理念**：介绍Cairngorm的设计理念及其在Flex开发中的作用。 #### 33. Cairngorm之组成部分 - **ModelLocator**：ModelLocator是...
Cairngorm是一个基于Flex的MVC（Model-View-Controller）框架，它为构建可扩展、可维护的Flex应用程序提供了结构化的支持。MVC模式是软件设计中的一个经典架构，它将应用程序分为三个主要部分：模型（Model）、视图...
通过上述集成，Spring Actionscript 的 IOC 能力可以弥补 Cairngorm 在对象管理和解耦方面的不足，同时 Cairngorm 的 MVC 结构为业务逻辑的组织提供了清晰的框架。这种结合不仅简化了代码，还提高了代码的可测试性，...
Cairngorm是一个轻量级的MVC框架，专门用于Adobe Flex应用程序的开发。这个框架的设计目的是为了提高Flex项目的可维护性和可扩展性，通过分离业务逻辑、视图和控制层，使得代码更加模块化。在Cairngorm中，模型...
Cairngorm是Flex社区中流行的一种轻量级MVC（Model-View-Controller）框架，它提供了一种结构化的方法来组织和管理Flex项目的代码，从而提高开发效率和代码可维护性。 Cairngorm框架的核心组件包括： 1. **模型...
8. **配置文件(Configuration)**：生成必要的配置文件，如flex-config.xml和 Cairngorm-specific的配置，以便正确地初始化框架。 9. **文档(Documentation)**：可能提供关于生成代码的简要说明，帮助开发者理解生成...
Cairngorm是Flex框架中的一个轻量级MVC（Model-View-Controller）设计模式实现，由Adobe社区成员Stephan J. Schmidt在2005年提出。这个框架旨在提高Flex应用的可维护性和可扩展性，通过分离业务逻辑、用户界面和数据...