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

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 JavaScript 编写的记忆游戏(附源代码)   项目:JavaScript 记忆游戏(附源代码) 记忆检查游戏是一个使用 HTML5、CSS 和 JavaScript 开发的简单项目。这个游戏是关于测试你的短期 记忆技能。玩这个游戏 时,一系列图像会出现在一个盒子形状的区域中 。玩家必须找到两个相同的图像并单击它们以使它们消失。 如何运行游戏? 记忆游戏项目仅包含 HTML、CSS 和 JavaScript。谈到此游戏的功能,用户必须单击两个相同的图像才能使它们消失。 点击卡片或按下键盘键,通过 2 乘 2 旋转来重建鸟儿对,并发现隐藏在下面的图像! 如果翻开的牌面相同(一对),您就赢了,并且该对牌将从游戏中消失! 否则,卡片会自动翻面朝下,您需要重新尝试! 该游戏包含大量的 javascript 以确保游戏正常运行。 如何运行该项目? 要运行此游戏,您不需要任何类型的本地服务器,但需要浏览器。我们建议您使用现代浏览器,如 Google Chrome 和 Mozilla Firefox, 以获得更好、更优化的游戏体验。要玩游戏,首先,通过单击 memorygame-index.html 文件在浏览器中打开游戏。 演示: 该项目为国外大神项目,可以作为毕业设计的项目,也可以作为大作业项目,不用担心代码重复,设计重复等,如果需要对项目进行修改,需要具备一定基础知识。 注意:如果装有360等杀毒软件,可能会出现误报的情况,源码本身并无病毒,使用源码时可以关闭360,或者添加信任。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值