Cairngorm框架使用总结

Cairngorm框架使用总结

????????

?? ? ? ?从8月份开始接触Flex，因为要着急上项目，所以把在最短的时间最快的熟悉Flex成为了那段时间的主要任务。我和大多数在网络是搜索Flex学习教程，框架应用示例讲解资源的童鞋是有着一个共同的经历，熟悉其他的一些编程语言，了解一些事件驱动的实质内涵。但是作为一个普通人，想要尽快的去熟悉Flex ，如若有一些javascript和ajax的编程经验 会更好一些（Flex中的语法和javascript很类似，并且有事件监听和异步通信等特点。）。

?

?? ? ? ?编程语言的通性有很多，数据类型、事件方法、控件应用，这些都是可以靠以前的语言基础来即时应用的，略微不同的可能就是一些属性、事件的名称变化，还有Flex的一些特殊效果和安全机制了。

?

?? ? ? 我从熟悉Flex基础到接触Cairngorm框架，也就是个三五天的时间。当时接触到Cairngorm框架，从定义上来看，并没有那种了然于胸的感觉，从MVC分层来看待Cairngorm框架，若是没有进行Flex编程的话，一下子搞明白这个框架流程图（如下图）的详细含义，还是有难度的。这是一个非常详尽和简单的示意图，以下我主要分析一下这个流程图，以此将Flex中数据绑定，事件广播，远程调用等知识点关联起来。本文旨在帮助大家进一步了解Cairngorm框架，如需Demo，Q我即可。

?

?? ? ? 1．? 宏观来看，这是一个MVC分层架构模型，并由以下7部分组成。

?? ? ? ?即按照流程图中的部分描述，可以得到以下信息。

?? ? ? ? a) Model(数据模型M)：使用singleton(单例)模式共享变量；全局变量、页面的数据绑定

?? ? ? ? b) VO Value Object)：储存特定值对象变量。Flex端实体类，通过Event机制作为参数传递

?? ? ? ? c) ?VIew(视图V)：将Model的数据绑定互组件并广播侦听Cairngorm Event；

?? ? ? ? d) Controller(控制器)：侦听Cairngorm事件并将其映射到Cairngorm Command；Flex特殊机制，来把Event和 Command关联起来

?? ? ? ? e) ?Command(命令)：调用Cairngorm Delegate或其它Command ，并更新Model；调用代理类实现业务逻辑或直接在Flex端实现业务逻辑

?? ? ? ? f) ?Delegate(委托)：实例化RPC(远程过程调用)并将其结果返回给Command；通过配置文件调用服务器端类方法实现业务逻辑

?? ? ? ? g) ? Business(业务)：定义RPC。

?

?? ? ? ?2. 从细节角度去分析这个框架流程，需要有一定的面向对象编程经验。

?? ? ?从View入手：My Contancts页面，体现的业务逻辑就是通过Add Contact将个人联系方式添加到右侧的List of Contacts中。

?? ? ? ? 当点击 Add Contact 按钮，会触发如下事件，将当前页面中的数据封装到VO（Value Object）中的ContactVo里面，然后将ContactVo实体对象以传参形式通过Cairngorm Event机制传递。通过实例化一个AddContactEvent，然后dispach() 掉这个对象，这样框架内部会进行一个事件广播和事件捕获。

?

?? ? ? 3. 接着看一下继承了Cairngorm Event 的AddContactEvent类。具体内容如下图，定义一个属性变量（从页面传参过来的实体类）或者还有其他一些标志量（如，定义一个flag来标示当前调用事件为Add或Update等事件）。这里需要注意将当前Event名称指定给父类（super）下图中的AddContactControl.EVENT_ADD_CONTACT为FrontController中定义的一个常量，用来标示当前Event的一个名称。

?

?? ? ?4. 事件进行捕获，通过FrontController中继承FrontController的AddContactControl类来将上面的Event和Command进行绑定。 这样，当捕获到AddContactEvent的时候，会自动调用相应的AddContactCommand类。

?

?? ? ?整个框架实现逻辑的部分就是在Command这部分，在这里我们一般会调用Delegate（代理）类，通过这样调用Remote ObjectClass 来实现逻辑。

?? ? ?同样AddContactCommand 实现了Command和Responder（利用其回调函数机制）接口 ，按照框架流程图

?

?? ? ?onResult方法会在Delegate类中相应方法正常执行后被调用。如下图所示，在该方法执行中会将当前Event中传参传递过来的VO实体类添加一个全局变量contacts（位于model中，直接在页面的List of Contact上进行数据绑定）中去，由于Flex中数据绑定的特点（双向性），页面会自动将数据更新，显示当前已经添加进去的一条记录。

?

?? ? ? 5. ?Delegate类作为某个Remote Object的代理，需要进行如下配置，Flex和服务端（如Java）进行交互，需要配置service。

?? ? ?关于Flex与Java交互的实现，可参照：《Flex前端与Java服务端交互,反射机制挑大旗 》

?

?

?

参考资料：

?? ? ?Flex3的在线控件使用大全：http://examples.adobe.com/flex3/componentexplorer/explorer.html

?? ? Cairngorm框架流程介绍 ：http://www.cairngormdocs.org/tools/CairngormDiagramExplorer.swf