您的位置：首页 > 大数据 > 人工智能

基于 Cairngorm MVC 框架的 Flex 程序设计与开发

2010-11-17 16:15 507 查看
Cairngorm框架简介

Cairngorm是一种MVC框架，它可以帮助开发者很好的组织代码，分层，从而使得代码更加清晰易懂，可以使设计者，UI组件开发者，数据服务开发者并行工作，从而提高开发效率。Cairngorm由五大组件构成，分别作为存放数据的仓库(ModelLocator)，存放服务的仓库(ServiceLocator)，处理业务逻辑的命令(Command)，自定义的用于触发命令执行的事件(Event)，用于把事件映射到命令的前端控制器(FrontController)。它应用了代理模式，命令模式，观察者和单例等几种设计模式。

回页首

Cairngorm详解

ModelLocator:用于保存应用程序的数据，与HttpSession类似，区别主要在于数据是保存客户端，实现时将ModelLocator实现为单例，所有的应用数据都存储在唯一的一个ModelLocator对象中。

CairngormEvent:这个类由Cairngorm框架提供，位于包com.adobe.cairngorm.control，所有的自定义的事件类都必须继承CairngormEvent，在自定义事件类中定义VO的引用，可以通过它来存储从View层传递过来的VO。

ICommand:命令接口，位于包com.adobe.cairngorm.commands，每个命令类需要实现ICommand接口，命令类用于处理业务逻辑，通过实现其execute方法来实现业务逻辑。execute方法以事件作为参数，通过传入的事件中包含的详细信息来进行相应的处理。

FrontController:前端控制器，位于包com.adobe.cairngorm.control，自定义的前端控制器必须继承FrontController，它主要用于完成CairngormEvent和ICommand之间的映射。

CairngormEventDispatcher:CairngormEvent的分发器，位于包com.adobe.cairngorm.control

Delegate:服务代理，一般定义一个Delegate类，持有ServiceLocator的引用，Delegate类是唯一的了解Service有关的类。

回页首

系统处理流程

图1.使用Cairngorm后系统处理流程



在基于Cairngorm的应用程序中，应用程序的数据都放在一个仓库中，这个仓库就是ModelLocator，整个应用程序只生成维护一个ModelLocator的实例，在需要数据的组件中引用这个实例。比如视图需要数据进行渲染，那么视图就维护ModelLocator实例的引用，在视图中触发事件后，事件通过前端控制器映射为一个对应的命令，然后命令通过调用服务代理，执行相应的逻辑，命令通过更新自身维护的ModelLocator的引用，因为ModelLocator只有一个，这样就相当于更新了视图。

回页首

安装配置开发环境

开始前先让我们来搭建我们的开发环境：

下载并安装JDK(本文使用版本为SunJDK6)

下载并解压Eclipse(本文使用版本为EclipseGanymedeJ2EESR2版本)

下载并安装FB3_WWEJ_Plugin.exe(FlexBuilder4plug-inforeclipse)

下载并安装Tomcat6.x

安装FB3_WWEJ_Plugin.exe过程中选中eclipse安装目录。

回页首

一个入门的例子

前面我们讲解了Cairngorm的基本概念和一些主要的角色和类，下面我用一个简单的员工管理系统的例子来进一步的理解开发过程。

下载并解压Cairngorm2.2

解压出来就是一个Cairngorm.swc文件

新建FlexProject

图2.新建项目



Next配置服务器

图3.配置服务器



点击Finish.

将Cairngorm.swc拷贝到项目的flex_libs目录下。

在flex_src目录下建好包结构

图4.建立包结构



每个包中存放的内容一目了然

定义视图

在views包中新建一个MXMLComponent,基于Panel，取名为PeopleInfo.mxml，如图所示:

图5.新建Panel



在里面添加一个DataGrid,还有一些文本框和按钮,如图6所示：

图6.视图



三、这里我们希望当Panel加载完成后，从服务器读取xml文件，将员工信息给读入DataGrid中，这里，为了简单明了，仅仅定义了员工id和name属性。所以在Panel中添加属性creationComplete="LoadPersons();"
，然后添加
<mx:Script>
标签，并添加
LoadPersons()
方法，原型如下所示：


清单1.原型

public
functionLoadPersons():void
{
}
定义ModelLocator

视图中的DataGrid是需要数据进行渲染的，下面定义数据的仓库ModelLocator，该类维护一个ArrayCollectionpersonInfos的引用，它就是应用程序所需的数据。

新建一个Actionscriptclass，取名为ModelLocator.as，代码如下：

清单2.ModelLocator.as

packagemodel
{
importmx.collections.ArrayCollection;
[Bindable]
publicclassModelLocator
{
privatestaticvar__instance:ModelLocator=null;
//以下这个ArrayCollection用于填充DataGrid
publicvarpersonInfos:ArrayCollection=newArrayCollection();
publicstaticfunctiongetInstance():ModelLocator
{
if(__instance==null)
{
__instance=newModelLocator();
}
return__instance;
}
}
}
ArrayCollection对象personInfos用于存储从xml读出的员工信息。

定义事件

在event包中新建一个ActionScriptclass，取名为LoadPersonsEvent.as，该事件必须继承于CairngormEvent，通过CairngormEventDispatcher来分发,
EVENT_ID
用来唯一的标识一个事件，
代码如下：

清单3.LoadPersonsEvent.as


packageevent
{
importcom.adobe.cairngorm.control.CairngormEvent;

publicclassLoadPersonsEventextendsCairngormEvent
{
//事件名称
publicstaticvarEVENT_ID:String="LoadPersons";
publicfunctionLoadPersonsEvent()
{
super(EVENT_ID);
}
}
}
在页面中注册并分发事件

在PeopleInfo.mxml的<mx:Panel>下面添加如下代码：

清单4.

<mx:Metadata>
[Event(name="LoadPersons",type="event.LoadPersonsEvent")]
</mx:Metadata>
type属性就是类的完整路径。

在LoadPersons()方法中添加如下代码：

清单5.


vare:LoadPersonsEvent=newLoadPersonsEvent();
e.dispatch();
当事件分发后，通过FrontController将事件映射为命令，然后命令更新ModelLocator中的数据的时候，从而引起DataGrid的变化，从中可以看出，需要在页面中维护一个ModelLocator单例的引用,代码如下：

然后在<mx:Script>中添加以下代码：

清单6.


[Bindable]
publicvar_model:ModelLocator=ModelLocator.getInstance();
然后将_model.personInfos作为DataGrid的dataProvider,为<mx:DataGrid>添加如下属性：

清单7.

dataProvider="{_model.personInfos}"
定义FrontController

事件分发后，应该执行一个对应的命令，命令通过执行相应的业务逻辑，更新数据，从而视图得到更新，那到底事件和命令之间是如何映射的呢？

在包control中新建一个ActionScriptclass，取名为MyFrontControl.as，代码如下：

清单8.MyFrontControl.as


packagecontrol
{
importcom.adobe.cairngorm.control.FrontController;
importevent.*;
importcommands.*;
publicclassMyFrontControlextendsFrontController
{
publicfunctionMyFrontControl()
{
super();

//注册一个事件，将其与一个命令绑定

this.addCommand(LoadPersonsEvent.EVENT_ID,LoadPersonCommand);
}

}
}
这里的addCommand()方法将事件和命令关联起来,第一个参数是事件的name，第二个参数是具体的命令类，这里LoadPersonCommand还没有定义，编译错，下面就来定义LoadPersonCommand.

定义Command

新建一个ActionScriptclass，取名为LoadPersonCommand.as，实现ICommand接口，

命令调用服务代理完成相应的逻辑，然后通过更新数据，间接的反映到视图上，所以命令中需要维护ModelLocator单例的引用，每个命令类的入口函数是execute()方法。

代码如下：

清单9.LoadPersonCommand.as


packagecommands
{
importcom.adobe.cairngorm.commands.ICommand;
importcom.adobe.cairngorm.control.CairngormEvent;
importmx.collections.ArrayCollection;
importmx.controls.Alert;
importmx.rpc.Responder;
importmx.rpc.events.FaultEvent;
importmx.rpc.events.ResultEvent;
publicclassLoadPersonCommandimplementsICommand
{
publicfunctionexecute(event:CairngormEvent):void
{

}

//如果请求发送成功则执行这个方法
publicfunctiononResults_loadPersons(event:ResultEvent):void
{

}
//如果请求失败则执行这个方法
publicfunctiononFaults_loadPersons(event:FaultEvent):void
{

}

}
}
execute()方法具体怎么实现，需要依赖于service,下面就来定义ServiceLocator

定义ServiceLocator

在business包下新建一个MXMLComponent，取名为ServiceLocator.mxml，由于插件不支持com.adobe.cairngorm.business.ServiceLocator，所以Basedon暂时随便选择，等会手工修改，修改后的代码如下：

清单10.ServiceLocator.mxml


<?xmlversion="1.0"encoding="utf-8"?>
<rds:ServiceLocatorxmlns:rds="com.adobe.cairngorm.business.*"
xmlns:mx="http://www.adobe.com/2006/mxml">
<!—服务-->
<mx:HTTPServiceid="getPersonInfos"url="/xml/abc.xml"/>
</rds:ServiceLocator>
这里定义了一个HTTPService服务，获取服务器下的xml目录下的abc.xml的内容，在WebContent目录下建立一个目录，取名为xml，并且在其下建立一个abc.xml，内容如下：

清单11.abc.xml

<menus>
<Box>
<id>1</id>
<name>zhangsan</name>
</Box>
<Box>
<id>2</id>
<name>lisi</name>
</Box>
<Box>
<id>3</id>
<name>wangwu</name>
</Box>
</menus>
前面提到，通过定义delegate类来对服务进行管理易于维护，以下定义delegate类

定义Delegate类

在business包下新建一个delegates包，在其下建立一个ActionScriptclass类，取名为PersonDelegate.as，该方法通过引用ServiceLocator，获取并调用其中的服务，代码如下：

清单12.PersonDelegate.as


packagebusiness.delegates
{
importcom.adobe.cairngorm.business.ServiceLocator;
importmx.rpc.http.HTTPService;
importmx.rpc.IResponder;
importmx.rpc.AsyncToken;
importmx.controls.Alert;
publicclassPersonDelegate
{
publicvarserviceLocator:ServiceLocator=ServiceLocator.getInstance();

publicvar_service:HTTPService;

publicvar_responder:IResponder;

publicfunctionPersonDelegate(responder:IResponder)
{
//getHTTPService的参数对应Services.mxml中的id
_service=serviceLocator.getHTTPService("getPersonInfos");
_responder=responder;
}

publicfunctiongetPersonInfos():void
{
//发送请求
vartoken:AsyncToken=_service.send();
token.addResponder(_responder);
}

}
}
方法getPersonInfos()用于发送查询abc.xml文件的请求。

定义VO

从xml文件中读取过来的数据实际上都是一个个的员工的信息，便于存储，定义VO类来封装员工信息，在vo包中定义ActionScriptclass，取名为PersonForm.as，代码如下：

清单13.PersonForm.as


packagevo
{
publicclassPersonForm
{
publicvarid:String="";
publicvarname:String="";
publicfunctionPersonForm()
{

}
}
}
实现Command

通过在Command中维护ModelLocator单例的引用，当更新ModelLocator中的数据时，因为ModelLocator是单例，所以页面中的ModelLocator中的数据也相应的更新，详细的原理请看注释，LoadPersonCommand.as完整代码如下：

清单14.LoadPersonCommand.as


packagecommands
{
importbusiness.delegates.PersonDelegate;
importcom.adobe.cairngorm.commands.ICommand;
importcom.adobe.cairngorm.control.CairngormEvent;
importmodel.ModelLocator;
importmx.collections.ArrayCollection;
importmx.controls.Alert;
importmx.rpc.Responder;
importmx.rpc.events.FaultEvent;
importmx.rpc.events.ResultEvent;
importvo.PersonForm;
publicclassLoadPersonCommandimplementsICommand
{
privatevar_model:ModelLocator=ModelLocator.getInstance();
publicfunctionexecute(event:CairngormEvent):void
{
//注册两个回调函数
varresponder:Responder=
newResponder(onResults_loadPersons,onFaults_loadPersons);
vardelegate:PersonDelegate=newPersonDelegate(responder);
delegate.getPersonInfos();
}
//如果请求发送成功则执行
publicfunctiononResults_loadPersons(event:ResultEvent):void
{
//用xml文件中的数据填充ArrayCollection
varpersonRaw:ArrayCollection=event.result.menus.Box;
//用personInfo填充Model
for(vari:int=0;i<personRaw.length;i++)
{
vartempPerson:PersonForm=newPersonForm();
varpersonFromXML:Object=personRaw.getItemAt(i);
tempPerson.id=personFromXML.id;
tempPerson.name=personFromXML.name;
_model.personInfos.addItem(tempPerson);
}
}
//如果请求发送不成功则执行
publicfunctiononFaults_loadPersons(event:FaultEvent):void
{
Alert.show("failed");
}
}
}
execute()方法中PersonDelegate执行getPersonInfos()方法，当请求发送成功，返回数据的时候，通过注册的回调函数onResults_loadPersons(event:ResultEvent)接收返回的数据，将每条员工信息用VO封装起来，然后更新ModelLocator中的数据，从而页面上的数据得到更新。

创建MXMLApplication

以上将所有的组件已经创建完毕，现在是时候创建一个Application将它们组装起来。

在flex_src下新建一个MXMLApplication，取名为Cairngormdemo.mxml，代码如下：

清单15.Cairngormdemo.mxml


<?xmlversion="1.0"encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"
xmlns:views="views.*"
xmlns:rds="business.*"
xmlns:control="control.*">
<mx:Stylesource="assets/style.css"/>

<views:PeopleInfox="51"/>
<rds:Services/>
<control:MyFrontControl/>

</mx:Application>
在页面中将自定义组件PeopleInfo，ServiceLocator和FrontController实例化。

运行

运行Cairngormdemo.mxml，如下图所示:

图7.结果



这里仅仅实现了加载数据的功能，增删改留给读者自己实现。

回页首

结束语

本文对FlexMVC框架Cairngorm的重要部分作了一个详细的介绍，当然还有一些细节问题值得研究，相信通过本文的示例项目，可以帮助您更快的掌握这种全新的开发方式。

回页首

下载

描述名字大小下载方法
演示代码Cairngormdemo.zip699KBHTTP
关于下载方法的信息

参考资料

学习

关于Flex3入门资料，请参考GettingStartedwithFlex3

关于Flex3语言参考，请参考Flex3LanguageReferences

关于Flex3SDK相关参考，请参考LiveDocumentationFortheFlexSDK

关于Cairngorm开发文档，请参考Cairngormdeveloperdocumentation

Flex开发专题：Flex是目前富Internet应用开发的一个生力军，它能够让开发人员开发出与传统HTML页面效果迥然不同的用户界面和应用效果。本专题从“入门”、“高级”和“集成”三个方面向您全面地介绍了一些和Flex开发相关的学习资源，让您了解到更多的开发技巧和应用方式。

developerWorks技术活动和网络广播：随时关注developerWorks技术活动和网络广播。

developerWorksWebdevelopment专区：通过专门关于Web技术的文章和教程，扩展您在网站开发方面的技能。

developerWorksAjax资源中心：这是有关Ajax编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki和新闻。任何Ajax的新信息都能在这里找到。

developerWorksWeb2.0资源中心，这是有关Web2.0相关信息的一站式中心，包括大量Web2.0技术文章、教程、下载和相关技术资源。您还可以通过Web2.0新手入门栏目，迅速了解Web2.0的相关概念。

讨论

MydeveloperWorks中文社区

作者简介

翟峰在J2EE和Web开发领域有着多年开发经验，喜欢关注新技术。毕业于西北大学，拥有计算机硕士学位。

吴镝主要关注J2EE和Web开发领域，喜欢关注和学习新技术，目前就读于天津大学，攻读计算机科学与技术硕士学位。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航