基于Cairngorm MVC 框架的 Flex 的设计与开发.docVIP

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: 命令接口，位于包 mands，每个命令类需要实现 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( 本文使用版本为 Sun JDK 6) 下载并解压Eclipse( 本文使用版本为 Eclipse Ganymede J2EE SR2 版本 ) 下载并安装FB3_WWEJ_Plugin.exe(Flex Builder 4 plug-in for eclipse) 下载并安装 Tomcat 6.x 安装 FB3_WWEJ_Plugin.exe 过程中选中 eclipse 安装目录。 回页首 一个入门的例子 前面我们讲解了 Cairngorm 的基本概念和一些主要的角色和类，下面我用一个简单的员工管理系统的例子来进一步的理解开发过程。 下载并解压 Cairngorm 2.2 解压出来就是一个 Cairngorm.swc 文件 新建 Flex Project 图 2. 新建项目 Next 配置服务器 图 3. 配置服务器 点击 Finish. 将 Cairngorm.swc 拷贝到项目的 flex_libs 目录下。 在 flex_src 目录下建好包结构 图 4. 建立包结构 每个包中存放的内容一目了然 定义视图 在 views 包中新建一个 MXML Component, 基于 Panel，取名为 PeopleInfo.mxml，如图所示 :图 5. 新建 Panel 在里面添加一个 DataGrid, 还有一些文本框和按钮 , 如图 6 所示：图 6. 视图 三、这里我们希望当 Panel 加载完成后，从服务器读取 xml 文件，将员工信息给读入 DataGrid 中，这里，为了简单明了，仅仅定义了员工 id 和 nam