Flex4系列教程之十 – 整合Cairngorm2

本系列教程目标:使初学者了解富网络应用概念,理解并掌握以下四种架构方法。
1. Flex + BlazeDS + Spring(< 2.5.6) + iBATIS + Cairngorm
2. Flex + BlazeDS + Spring BlazeDS Integration + Spring(>= 2.5.6) + iBATIS + Cairngorm
3. Flex + BlazeDS + Spring(< 2.5.6) + iBATIS + pureMVC
4. Flex + BlazeDS + Spring BlazeDS Integration + Spring(>= 2.5.6) + iBATIS + pureMVC

Cairngorm 2 概述

  1. Cairngorm 2 是什么?
    Cairngorm 2 是一个简单规范的 MVC 模式框架。
  2. Cairngorm 2 的两个版本
    Cairngorm 2 分为“普通版“和“企业版“,后者依赖于 LiveCycle Data Services ,所以我们只探讨普通版(因为我们用的是 BlazeDS

    :)

    )。
  3. Cairngorm 2 原理图示

  4. Cairngorm 2 教程

 

为什么不整合 Cairngorm 3 ?
Cairngorm 3 已经不是 Cairngorm 2 的升级。它由跨框架的“指导原则”、“工具”和“库”三部分组成,目的在于帮助开发者应用 Flex 和第三方框架。

 

开始整合

  1. 注意事项:
    以下内容基于“Flex4系列教程之九”中最后形成的 sampleApp 项目。
  2. 准备所需组件
    下载 Cairngorm 2 普通版,将解压后的 Cairngorm.swc 拷贝到 flex_libs 文件夹。
  3. 在 flex_src 下创建以下文件夹
    • business :放置 Delegate 类和 ServiceLocator 文件
    • command :放置 Command 类
    • event :放置 Event 类
    • vo :放置 VO 类
    • util :放置工具类
    • model :放置 Model 类
    • view :放置视图文件(即 mxml 文件)
    • controller:放置 Controller 类
  4. 在继续之前,还是回顾一下 Cairngorm 2 的原理吧(总觉得 Cairngorm 2 概述中的图示有点乱

    :)


    记住一点: Cairngorm 2 是事件驱动的。

    所以要显示存储在数据库中的职员信息需经过以下过程:

    • 触发一个 Event;
    • 控制器依据 Event ID 找到对应的 Command;
    • Command 调用 Delegate(Delegate 又调用 Server 端对象),并把返回的职员信息存储到 Model 中的某个属性;
    • 把 Mxml 文件中的 DateGrid 组件与上述 Model 中的属性绑定。因为绑定是动态的,所以一旦属性值发生变化 DateGrid 内容会立即体现。
  5. 在 business 下创建 Services.mxml,以统一管理远程对象
    <?xml version="1.0" encoding="utf-8"?>
    <cairngorm:ServiceLocator
               xmlns:mx="http://www.adobe.com/2006/mxml"
               xmlns:cairngorm="http://www.adobe.com/2006/cairngorm">               
    
        <mx:RemoteObject id="employeeServiceRO" destination="employeeServiceDest" />
    
    </cairngorm:ServiceLocator>
  6. 在 business 下创建 LoadEmployeesDelegate 代理,调用远程对象
    package business
    {
        import com.adobe.cairngorm.business.ServiceLocator;
    
        import mx.rpc.AsyncToken;
        import mx.rpc.IResponder;
    
        public class LoadEmployeesDelegate
        {
            private var responder:IResponder;
            private var service:Object;
    
            public function LoadEmployeesDelegate(responder:IResponder) {
                this.responder = responder;
                this.service = ServiceLocator.getInstance().getRemoteObject("employeeServiceRO");
            }
    
            public function load():void {
                var token:AsyncToken = service.getList();
                token.addResponder(responder);
            }
        }
    }
  7. 在 model 下创建 EmployeesModelLocator(单例模式),用于存储返回的雇员信息
    package model
    {
        import com.adobe.cairngorm.model.IModelLocator;
        import com.adobe.cairngorm.CairngormMessageCodes;
        import com.adobe.cairngorm.CairngormError;
    
        import mx.collections.ArrayCollection;
    
        [Bindable]
        public class EmployeesModelLocator implements IModelLocator
        {
            public var employeesList:ArrayCollection;
    
            private static var _instance:EmployeesModelLocator;
    
            public function EmployeesModelLocator() {
                if (_instance != null ) {
                    throw new CairngormError(CairngormMessageCodes.SINGLETON_EXCEPTION,"EmployeesModelLocator");
                }
    
                _instance = this;
            }
    
            public static function getInstance():EmployeesModelLocator {
                if (_instance == null) {
                    _instance = new EmployeesModelLocator();
                }
    
                return _instance;
            }
        }
    }
  8. 在 event 下创建 LoadEmployeesEvent 事件
    package event
    {
        import com.adobe.cairngorm.control.CairngormEvent;
    
        public class LoadEmployeesEvent extends CairngormEvent
        {
            static public var EVENT_ID:String = "loadEmployees";
    
            public function LoadEmployeesEvent() {
                super(EVENT_ID);
            }
        }
    }
  9. 在 command 下创建 BaseCommand,作为所有 Commmand 类的基类,以便统一处理 fault 事件。
    package command
    {
        import com.adobe.cairngorm.commands.ICommand;
        import com.adobe.cairngorm.control.CairngormEvent;
    
        import mx.rpc.IResponder;
        import mx.controls.Alert;
    
        public class BaseCommand implements ICommand,IResponder
        {
            public function execute(event:CairngormEvent):void {
            }
    
            public function result(data:Object):void {
            }
    
            public function fault(info:Object):void {
                Alert.show("We are sorry,a system error has occurred.
                            Please try again later.");
            }
        }
    }
  10. 在 command 下创建 BaseCommand 的子类 LoadEmployeesCommand。调用 LoadEmployeesDelegate,并把取得的雇员信息保存到 EmployeesModelLocator。
    package command
    {
        import com.adobe.cairngorm.control.CairngormEvent;
    
        import business.LoadEmployeesDelegate;
        import model.EmployeesModelLocator;
    
        public class LoadEmployeesCommand extends BaseCommand
        {
            public override function execute(event:CairngormEvent):void {
                var delegate:LoadEmployeesDelegate = new LoadEmployeesDelegate(this);
                delegate.load();
            }
    
            public override function result(data:Object):void {
                var employeesModelLocator:EmployeesModelLocator = EmployeesModelLocator.getInstance();
                employeesModelLocator.employeesList = data.result;
            }
        }
    }
  11. 到目前你可能比较疑惑:LoadEmployeesEvent 和 LoadEmployeesCommand 是怎样关联上的呢?这就需要控制器了,在 control 下创建 FSController。
    package controller
    {
        import com.adobe.cairngorm.control.FrontController;
    
        import event.LoadEmployeesEvent;
        import command.LoadEmployeesCommand;
    
        public class FSController extends FrontController
        {
            public function FSController() {
                addCommand(LoadEmployeesEvent.EVENT_ID,LoadEmployeesCommand);
            }
        }
    }
  12. 是不是觉得都 OK 了?呵呵,别高兴的太早。我们还需要把 Services.mxml 和 FSController.as 引入到主应用文件(即 <s:Application> 标签所在的文件 )。
    把 sampleApp.mxml 文件的 29~30 行替换为以下内容:

    <rds:Services xmlns:rds="business.*"/>
    <router:FSController xmlns:router="controller.*"/>
  13. 触发 LoadEmployeesEvent 事件
    替换 sampleApp.mxml 的 8~25 行:

    import event.LoadEmployeesEvent;
    
     private function init():void {
         var loadEmployeesEvent:LoadEmployeesEvent = new LoadEmployeesEvent();
         loadEmployeesEvent.dispatch();
     }
  14. 终于到最后一步了:绑定数据源
    引入 EmployeesModelLocator

    import model.EmployeesModelLocator;

    把以下内容

    dataProvider="{employeeList}"

    替换为

    dataProvider="{EmployeesModelLocator.getInstance().employeesList}"
  15. 运行

 

附件:

sampleApp-10.7z

sampleApp(CRUD)_Cairngorm-2 + Spring-3.0.2 + iBATIS-2.3.7z

Tagged BlazeDS, Cairngorm, Flash Builder, Flex, Flex教程,iBATIS,mybatis, pureMVC,RIA,Spring Framework

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


一:display:flex布局display:flex是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。Flex是FlexibleBox的缩写,意为"弹性布局",用来为盒状模型提供最大的灵
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何垂直居中对齐,方法有很多,但是在学习了flex布局之后,垂直居中更加容易实现HTML代码:1<divclass="demo">2<divclass="inner">3<p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p>4</div
移动端开发知识点pc端软件和移动端apppc端软件是什么,有哪些应用。常见的例子,比如360杀毒,photoShop,VisualStudioCode等等移动端app是什么,有哪些应用。常见的例子,比如手机微信,手机qq,手机浏览器,美颜相机等等PC端与移动端的区别第一:PC考虑的是浏览器的兼容性,移动端考
最近挺忙的,准备考试,还有其他的事,没时间研究东西,快周末了,难得学点东西,grid是之前看到的,很好奇,讲的二维的布局,看起来很方便,应该很适合移动端布局,所以今天抽时间学一学,这个当是笔记了。参考的是阮老师的博客。阮一峰:CSSGrid网格布局教程http://www.ruanyifeng.com/blog/2019/03/g
display:flex;把容器设置为弹性盒模型(设置为弹性盒模型之后,浮动,定位将不会有效果)给父元素设置的属性:(1)display:flex---把容器设置为弹性盒模型。(2)flex-direction---设置弹性盒模型主轴方向默认情况下主
我在网页上运行了一个Flex应用程序,我想使用Command←组合键在应用程序中触发某些操作.这在大多数浏览器上都很好,但在Safari上,浏览器拦截此键盘事件并导致浏览器“返回”事件.有没有办法,通过Flex或通过页面上的其他地方的JavaScript,我可以告诉Safari不要这样做?解决方法:简短的
flex布局,flex-item1<template>2<viewclass="container">3<viewclass="greentxt">4A5</view>6<viewclass="redtxt">7B8<
我应该设计一个大型多点触控屏幕的应用程序.从大到大,我的意思是新闻广播员(大约55英寸及以上).该应用程序是一个交互式地图.我的问题是:开发应用程序的技术.我的第一个想法是在AdobeFlex中制作,但是HTML5也是如此……必须有一些非常棒的Java库用于触摸交互,但是在Windows平台上
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&quo
【1】需求:  【2】解决方案:最近遇到布局上要求item两端对齐,且最后一行在列不满的情况下要求左对齐,使用flex的justify-content:space-between;实现时发现最后一行不能左对齐,而是两端对齐方式。 不是项目上想要的效果#网上查了一些资料,有两种方法可以实现效果:**1.
我有一个java套接字服务器,它在连接时将Animal对象发送到Flash客户端.对象发送方式如下:Amf3Outputamf3Output=newAmf3Output(SerializationContext.getSerializationContext());amf3Output.setOutputStream(userSocket.getOutputStream());amf3Output.writeObject(animal)
我正在开发一个Flex3.4应用程序,它通过最新版本的BlazeDS与JBoss-4.2.2服务器上运行的JavaEE后端进行交互.当我在Tomcat上从FlashBuilder4beta2运行Flex应用程序时,一切都很好,Flex应用程序能够进行所需的远程调用.但我的生产环境是在JBoss上,当我将应用程序移动到JBoss时(更
我有一个非常大的问题.我使用Flex3/Tomcat/BlazeDS/Spring编写了一个大型应用程序,在本地开发时运行良好,当我部署到公共开发环境时很好,但是当部署到我们的测试环境时经常失败.当远程处理请求花费大量时间(超过20秒)时,故障似乎最常发生.在我的开发服务器上,错误发生,但仅
弹性和布局display:flex在ie6,ie7不兼容状态,一般在pc用的比较少,在手机端所有的浏览器都是支持的控制子元素在父元素里面的位置关系display:flex是给父元素加的文档流是按照主轴排列,只要父元素加了flex,那么里面的子元素全部可以直接添加宽高主轴的方向
FLEX2.0源码分析(一)https://www.jianshu.com/p/8bc4c5f4b19fFLEX源码分析二(网络监测swizzle)https://www.jianshu.com/p/ffb95f2cbda6FLEX源码分析三(网络监测记录FLEXNetworkRecorder)https://www.jianshu.com/p/66267dc922c5FLEX源码分析四(Systemlog)https://www.jianshu.
1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title><itle>6<style>7*{8margin:0;9padding:0;10
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&qu
flex:将对象作为弹性伸缩盒显示inline-flex:将对象作为内联块级弹性伸缩盒显示两者都是使子元素们弹性布局,但是如果是flex,父元素的尺寸不由子元素尺寸动态调整,不设置时默认是100%,而inline-flex则会使父元素尺寸跟随子元素们的尺寸动态调整。
<html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>test<itle><stylemedia="screen">.tab-head{list-style-type:no
有没有办法使用邮政编码找到径向距离?我的任务是搜索居住在指定距离内的所有用户.我知道用户的zipcodes.例如,距离当前位置25英里的用户.我有其他搜索类别,我正在使用mysql查询.我无法解决距离问题.我的后端是在PHP中Flex的前端和前端.对我来说最好的选择就是www.zip-codes.com