flex环境搭建技术指导.doc

Flex+Spring+Hibernate整合文件编号：Miapsoft-java-2010-12-002起草：审核：批准：Flex、spring、hibernate 整合精益有容（北京）科技有限公司2010年12月1 flex概述FLEX，是一种基于标准变成模型的RIA开发产品集，最开始是由Macromedia公司2004年发布，2005年4月，Adobe公司收购Macromedia公司，现在FLEX系Adobe公司系列产品。官方网站：。Adobe公司有两款开发应用产品，一款是Flash Professional，一款是FLEX。Flash Professional主要是面向设计者的工具，一般单兵作战就可以了；而Flex是面向开发者的工具，需要团队合作，专业性更高。FLEX需要注意以下两个概念（MXML和ActionScript，这是flex开发的两种语言）：MXML：一种XML标识语言，用来进行组件布局，数据绑定等，和HTML语言有点类似。ActionScript：刚开始时是FLASH的脚本语言，到了3.0，已经完全面向对象了2 flex3及flex Builder安装2.1 Flex3Flex3，是Adobe公司开发RIA工具产品。包括以下几个部分：Flex3 SDK是Flex产品最基础也是必需的组件。包括编译器、Flex类库以及调试工具。Flex Builder 3是基于eclipse的集成开发环境。支持可视化界面以及MXML和ActionScript编写。LiveCycle Enterprise Suite是Flex企业及开发部署套件，可以使Flex部署到JavaEE服务器上。2.2 Flex Builder安装(1) 访问/products/flex/，下载flex Builder安装文件(2) 点击安装软件开始安装，安装界面如下：3 Flex、Spring和hibernate整合3.1 使用版本BlazeDS：3.2.0(flex与java通信，一般使用LCDS（LiveCycle Data Service），不过LCDS是收费的，所以使用免费的BlazeDS代替，BlazeDS是官方从LCDS中分离出来的开源数据服务中间件)。Spring：2.5.6Hibernate：3.xCairngorm：2.2.1（Flex的一个MVC框架）3.2 Cairngorm框架介绍Cairngorm 是一种 MVC 框架，它可以帮助开发者很好的组织代码，分层，从而使得代码更加清晰易懂，可以使设计者，UI 组件开发者，数据服务开发者并行工作，从而提高开发效率。Cairngorm 由五大组件构成（也可以说成七部分组成，还有VO和views），分别作为存放数据的仓库 (ModelLocator)，存放服务的仓库 (ServiceLocator)，处理业务逻辑的命令 (Command)，自定义的用于触发命令执行的事件 (Event)，用于把事件映射到命令的前端控制器 (FrontController)。它应用了代理模式，命令模式，观察者和单例等几种设计模式。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.controlDelegate: 服务代理，一般定义一个 Delegate 类，持有 ServiceLocator 的引用，Delegate 类是唯一的了解 Service 有关的类。另外：VO：用于存放实体类（相当于java中的PO）。Views：存放页面展示的组件页面。Cairngorm系统处理流程：在基于 Cairngorm 的应用程序中，应用程序的数据都放在一个仓库中，这个仓库就是 ModelLocator，整个应用程序只生成维护一个 ModelLocator 的实例，在需要数据的组件中引用这个实例。比如视图需要数据进行渲染，那么视图就维护 ModelLocator 实例的引用，在视图中触发事件后，事件通过前端控制器映射为一个对应的命令，然后命令通过调用服务代理，执行相应的逻辑，命令通过更新自身维护的 ModelLocator 的引用，因为 ModelLocator 只有一个，这样就相当于更新了视图。3.3 工具整合Flex3与MyEclipse7.5进行整合即将flex3开发工具作为MyEclipse的一个插件方式安装。安装步骤：一、 安装flex3二、 安装MyEclipse7.5三、 建立java工程项目运行CreatePluginsConfig.java类，将输出到控制台的信息拷贝四、 将拷贝CreatePluginsConfig.java类输出的信息追加到Myeclipse安装目录下的 五、 重启MyEclipse，新建Flex项目3.4 Spring+Hibernate+Flex整合示例此示例为查询地域表中的前20条记录1. 在MyEclipse工具中，切换到Flex视图，新建一Flex工程，如下图： 2. 填写工程名勾选此项，此目录下存放java代码选择J2EE，和java整合选择Web applicateion,用于web开发3. 点击Next，进入下图：Flex编译后放到此目录下添加BlazeDS包，用于flex和java通信示例工程中将此项改为了WebRoot填写部署容器，如果没有配置，选择此选择框后面的New新建，此工程使用Tomcat 6.04. 点击Next，进入下图：需要将此项后面加上/bin，否则不能访问5. 点击【完成】按钮后，在新建的flex工程上右键点击选择MyEclipseAdd Web Project.6. 点击上步后，将显示以下页面，选择J2EE5.0，点击完成，即可将此flex项目添加到web工程中。7. 在工程上右键点击Properties上选择Flex Server，将Context root修改为“/工程名”后，点击【OK】完成，如下图：8. 通过以上步骤，将会出现以下目录结构，其中viewdomo/src目录下开发java代码，flex_src目录下开发flex代码，flex编译后将会到WebRoot/bin目录下9. 以上步骤配置完成后，访问http:/localhost:8080/viewdemo/bin/viewdemo.html链接，如果能够访问，说明配置成功，以下步骤将添加Spring、Hibernate和Cairngorm10. 此工程中使用到的一些jar包如下：12. 将所需jar包添加成功后，修改web.xml文件，内容如下：demoflex.class.path/WEB-INF/flex/hotfixes,/WEB-INF/flex/jarsflex.messaging.HttpFlexSessioncontextConfigLocationclasspath:applicationContext.xmlhibernateOpenSessionInViewFilterorg.springframework.orm.hibernate3.support.OpenSessionInViewFilterhibernateOpenSessionInViewFilter/*org.springframework.web.context.ContextLoaderListenerMessageBrokerServletflex.messaging.MessageBrokerServletservices.configuration.file/WEB-INF/flex/services-config.xmlflex.write.path/WEB-INF/flex1MessageBrokerServlet/messagebroker/*13. 添加Spring配置文件和Hibernate配置文件，加到此目录结构下：14. 添加SpringFactory.java，代码如下：package com.miapsoft;import org.springframework.beans.BeansException;import org.springframework.beans.factory.NoSuchBeanDefinitionException;import org.springframework.context.ApplicationContext;import org.springframework.web.context.support.WebApplicationContextUtils;import flex.messaging.FactoryInstance;import flex.messaging.FlexFactory;import flex.messaging.config.ConfigMap;import flex.messaging.services.ServiceException;public class SpringFactory implements FlexFactorypublic void initialize(String id, ConfigMap configMap) public FactoryInstance createFactoryInstance(String id, ConfigMap properties)SpringFactoryInstance instance = new SpringFactoryInstance(this, id, properties);instance.setSource(properties.getPropertyAsString(SOURCE, instance.getId();System.out.println(SpringSpringSpring + instance.toString();return instance; / end method createFactoryInstance()public Object lookup(FactoryInstance inst)SpringFactoryInstance factoryInstance = (SpringFactoryInstance) inst;return factoryInstance.lookup();static class SpringFactoryInstance extends FactoryInstanceSpringFactoryInstance(SpringFactory factory, String id, ConfigMap properties)super(factory, id, properties);public String toString()return SpringFactory instance for id= + getId() + source= + getSource() + scope= +getScope();public Object lookup()ApplicationContext appContext =WebApplicationContextUtils.getWebApplicationContext(flex.messaging.FlexContext.getServletConfig().getServletContext();String beanName = getSource();tryreturn appContext.getBean(beanName);catch (NoSuchBeanDefinitionException nexc)ServiceException e = new ServiceException();String msg = Spring service named + beanName + does not exist.;e.setMessage(msg);e.setRootCause(nexc);e.setDetails(msg);e.setCode(Server.Processing);throw e;catch (BeansException bexc)ServiceException e = new ServiceException();String msg = Unable to create Spring service named + beanName + ;e.setMessage(msg);e.setRootCause(bexc);e.setDetails(msg);e.setCode(Server.Processing);throw e;15. 在WebRoot/WEB-INF/flex目录下的services-config.xml文件中注册SpringFactory,配置如下：16. 下面编写服务器端代码，代码结构如下图：此示例是查询地域表中的前20条记录，manger和model包下和平常写的业务类一样，services包下是客户端调用的业务类，其中RegionView.java的代码如下：package com.miapsoft.services; import java.util.List; import javax.annotation.Resource; import com.miapsoft.manager.RegionManager; public class RegionView Resourceprivate RegionManager regionManager;public List getRegions()return regionManager.findRegions();然后在applicationContext.xml中加入以下代码：至此，服务器端代码编写完成，下面编写客户端代码。17. 将Cairngorm框架添加到此工程中，在要添加的工程上右键点击Properties，选择Flex Builde Path到Liberary Path页面，如下图，点击Add SWC Folder，将Cairngorm.swc添加到此工程中：18. 客户端包结构如下图： 首先在WebRoot/WEB-INF/flex目录下的remoting-config.xml文件中添加如下代码：springregionView 在以上目录图中的Services.mxml中编写如下代码：其中第一个regionView是以后客户端需要调用的，第二个regionView对应remoting-config.xml文件中的idevents包中：RegionViewEvent.as代码如下（此类继承CairngormEvent类）：package business.eventsimport com.adobe.cairngorm.control.CairngormEvent; public class RegionViewEvent extends CairngormEventstatic public var EVENT_ID:String=regionView;public function RegionViewEvent()super(EVENT_ID);Command包中：RegionViewCommand.as代码如下（此类实现ICommand和IResponder接口）：package mandimport business.delegates.RegionViewDelegates;import com.adobe.cairngorm.business.ServiceLocator;import mands.ICommand;import com.adobe.cairngorm.control.CairngormEvent;import models.ModelLocator;import mx.collections.ArrayCollection;import mx.rpc.IResponder;import vo.TbDimRegion;public class RegionViewCommand implements ICommand, IResponderprivate var model:ModelLocator = ModelLocator.getInstance();private var locator:ServiceLocator=ServiceLocator.getInstance(); public function execute(event:CairngormEvent):voidvar delegate:RegionViewDelegates = new RegionViewDelegates(this); delegate.findRegions();/* *返回结果处理 */ public function result(event:Object):void var regionList:ArrayCollection = event.result as ArrayCollection; model.regionData.removeAll(); for(var i:int=0;iregionList.length;i+) var region:TbDimRegion = new TbDimRegion(); var reg:Object = regionList.getItemAt(i); region.regionId = reg1; region.regionParentId = reg2; region.lvlId = reg3; region.regionName = reg4; region.regionDesc = reg5; region.beginDate = reg6; region.endDate = reg7; model.regionData.addItem(region); public function fault(info:Object):void throw new Error(info.toString(), 加载失败！); delegates包中：RegionViewDelegates.as代码如下：package business.delegatesimport com.adobe.cairngorm.business.ServiceLocator;import mx.rpc.AsyncToken;import mx.rpc.IResponder;import mx.rpc.remoting.RemoteObject;public class RegionViewDelegatesprivate var locator:ServiceLocator = ServiceLocator.getInstance(); private var responder:IResponder;public function RegionViewDelegates(responder:IResponder):voidthis.responder = responder;public function findRegions():voidvar service:RemoteObject = locator.getRemoteObject(regionView);var token:AsyncToken = service.getRegions(); token.addResponder(this.responder);前端控制器：FSController.as代码如下：package businessimport mand.RegionViewCommand;import business.events.RegionViewEvent;import com.adobe.cairngo