Flex 4 最佳集成实践.doc

Flex 4 最佳集成实践 苏 春波, 高级软件工程师, HP苏春波，有 7 年 Java EE 开发经验，对 Java 开源框架有一定的研究。简介：Flex 受到越来越多人的青睐，同时一些问题也涌现出来了，比如，代码结构，不同层间的信息交换不是很清晰等，使后期维护成本升高。本文将通过具体实例来解决这些问题。前言对于一个 web 软件项目而言，实现客户需要的基本功能往往是最基本的需求，随着软件的进一步发展和人们审美水平的逐步提高，客户已经不仅仅只是能满足功能性需求那么简单了，他们有了进一步的追求，呵呵，功能不但要强大，而且还要有漂亮、易于操作，甚至是能减少视觉疲劳的界面，这样一来一大群 UI 设计者如雨后春笋般应势而生，UI 也变得复杂起来了。软件的生命周期因此而有小幅增长，“天空一声霹雳响，诞生 Flex 来帮忙”借用一下顺溜里面的一句话，Flex 的出现是软件开发者的福音，用它设计的界面不但绚丽多彩而且开发起来也相对简单，不但能缩短软件开发周期，还能给用户有一种好的视觉享受。Flex 4 新特性总结了一下 Flex 4 的新特性，有助于用户更好的使用，理解它。1) 代码模板 虽然现在我们也可以通过插件来实现代码模板，但是总还是原生支持来的更舒服。代码模板还支持“环境变量”，例如你可以向模板中添加“$project_name”，则这部分内容会被转化成工程名称。代码模板可以在偏好 (Preference) 中进行配置。 2) 悬停时的 ASDoc 提示 也是从 Eclipse 中“继承”下来的功能，支持 ASDoc 中的链结 3) Getter & Setter 方便地在代码中添加 Getter 和 Setter。（这里有个小插曲，Heidi 在演示前忘了把代码恢复成没有 Setter 的状态，所以她不得不现场把代码改回去，还很可爱的对观众们说“别看” _ )。 4) 自动生成 Event Handler 这个功能比用代码模板要方便得多。5) 包重构 重构功能一直是我对 Flex Builder 比较不满意的地方。说实话，基于包的重构应该是比较基本的功能了。 6) Run to Line 有的时候我们调试时会发现断点设置的并不合理，例如断点位置离我们关注的代码段还远得很，这时候可以使用 Run to Line 功能立刻将程序执行到指定位置。 条件断点 顾名思义，就是当满足某种条件的时候才会中断程序，个人认为非常有用，特别是在调试一些复杂逻辑时，会大大节约时间，同时也能放松你的神经，免得一不注意错过了还要从头来过。 7) Network Monitor 现在调试模式下可以监控网络连接的数据，例如 web Services 的 SOAP 数据以及 HTTP 的请求和响应内容，也是一个非常有用的特性。 8) Package Explorer 如果你熟悉 Eclipse 中 JDT，对这个特性一定不陌生。Flex Builder 3 只支持资源浏览器，即以工程文件的形式浏览。而 Package Explorer，顾名思义，是针对 Pakcage 的结构进行浏览，这种模式更适于开发者使用，另外也可以展开一个类来浏览该类的结构（同 Outline）。不仅如此，Package Explorer 还支持以这种结构浏览 SWC 文件。9）Service Explorer Service Explorer 可以方便的浏览服务端 API( 如 WebServices 或 Remoting Services) 及其 Value Object，同时也可以根据服务端的 VO 自动创建 AS 端的 VO。概要介绍本文通过具体实例来讲解 Flex 4 与当前流行框架的集成过程，首先介绍的是与 BlazeDS 的集成，然后讲解与 Spring，Hibernate，pureMVC 的集成过程，这些框架都是我经过实践和研究过的，可以说它们与 Flex 4 的集成堪称完美，把项目的层次分的很清楚，在可以大大的缩短项目周期的同时还能有利于后期的项目维护，职责分明，易于理解。基本开发环境1. 下载开发 Flex 的 SDK ：/cfusion/entitlement/index.cfm?e=flex4sdk（注意：是 flex4sdk）； 2. Flex SDK 下载完后点击安装文件开始安装，安装完后激活即可使用； 3. 安装 web 环境，将下载的 Apache-Tomcat-6.0.18 解压到指定目录，如 c:tomcat6; 4. 下载 Spring Framework：/download； 5. 下载 BlazeDS：/wiki/display/blazeds/BlazeDS 下面就进入愉快的开发过程。初识 Flex 4新建一个 flex project，命名为 flexProjectForIBM, Flex SKD version 选择 Flex 4.1( 一定是 4 以上的版本，版本 3 和 4 有很多差别的 )，其他选项默认即可，Main source folder 选择默认，Output folder 为 bin-debug, Output folder URL 为 http:/localhost:8080/flexProjectForIBM, 规则为服务器地址加上工程名称，之所以是工程名称是因为我们以工程名称为包名部署到服务器中的，然后我们编辑 flexProjectForIBM.mxml 文件，增加一个 label，一个输入框，一个按钮，label 文本内容为“请输入员工姓名”，按钮命名为“查询”，然后我们在浏览器中输入 http:/localhost:8080/flexProjectForIBM/bin-debug/flexProjectForIBM.html, 我们就可以看到应用的主页了，主页内容显示如下：图 1.Flex UIFlex project 我们已经成功部署到服务器。下面我们看下 Flex 是 怎样与 BlazeDS 集成的。Flex 4 与 BlazeDS 集成首先我们修改 web.xml 文件，增加一个监听，内容见清单 1，一个 Servlet，内容如清单 2 所示：清单 1. 增加的监听 flex.messaging.HttpFlexSession 清单 2. 增加的 servlet MessageBrokerServlet flex.messaging.MessageBrokerServlet services.configuration.file /WEB-INF/flex/services-config.xml 1 MessageBrokerServlet /messagebroker/* 然后将 blazeds.war 解压到某个目录下，将 WEB-INF 下的 flex 和 lib 目录复制到 flexProjectForIBM 的 WEB-INF 下面，flex 目录下面包括 4 个文件，分别是 messageing-config.xml,proxy-config.xml,remoting-config.xml,services-config.xml，建议不要修改这 4 个文件的名称，他们的具体作用可以参考 BlazeDS 的官方文档，这里不再描述了。下面新建一个 java project 取名为 serviceProjectForIBM, 然后新建一个接口 HelloWorld，并新建一个方法 sayHelloToSomeone，新建一个 HelloWorld 的实现类 HelloWorldImpl，实现 sayHelloToSomeone 方法，如清单 3 所示：清单 3.sayHelloToSomeone 实现方法 package org.ibm.flex.service.impl; import org.ibm.flex.service.HelloWorld; public class HelloWorldImpl implements HelloWorld Override public String sayHelloToSomeone(String name) return Hello +name; 后台的服务已经开发完毕，然后我们打成一个 service-for-flex.jar 包放到上面的 flexProjectForIBM 工程的 WAR 包里面。然后我们在修改下 flexProjectForIBM.mxml 文件，增加 4 个标签，一个输入框和一个命令按钮，详细命名与布局见清单 4 所示：清单 4. 与 BlazeDS 集成的 UI 变化 注意一下 lblView 的 text 值的设置。我们这时候会发现清单 4 中的 remotingSayHello 方法在上面也没有定义呀，你说对了，下面我们看下 remotingSayHello 方法的定义，这是一个调用远程服务的方法，具体内容见清单 5 所示：清单 5. remotingSayHello 内容 注意上面的 say 是我们定义的一个远程对象，具体内容见清单 6 所示：清单 6. 定义远程对象 注意上面的 endpoint 这个时候我们是一定要配置的，否则调用不到远程服务的，后面我们将会去掉这一冗余配置，destination 是我们在 remoting-config.xml 定义的，详细内容见清单 7 所示：清单 7. remoting-config.xml 的配置 org.ibm.flex.service.impl.HelloWorldImpl 以上步骤一定要仔细配置，有时候只是错了一小点，可是检查起来确是很困难的，那样的费时费力确实是使人很郁闷的。 Flex 与 BlazeDS 的配置已经全部完成，将 flexProjectForIBM 工程部署到 tomcat 中，如图 2 所示： 图 2. 发布 flexProjectForIBM 到 tomcat 中下面我们看下成功测试后的界面显示，见图 3. 图 3. Flex 与 BlazeDS 配置成功后的界面显示下面我们具体讲解一下 Flex 4 与 Spring 的整合方法。 Flex 4 与 Spring 集成Flex 4 与 Spring 的集成大概有两种方法，一种是通过 annotation 的方式，一种是通过定义 SpringFactory。SpringFactory 继承自 FlexFactory 来实现的，两种方法各有利弊，第一种方法相对简单一些，直接在要暴露的远程服务类上添加 RemotingDestination annotation 就可以了，我本人还是挺倾向于这种方法的，尤其是多人开发的情况下，不用产生因为多人修改 spring 的配置文件产生冲突而带来的麻烦，当然这种方法他的弊端就是 spring 的 bean 文件与 Flex 有一定的耦合度，给后期的代码维护也会带来一定的困难。第二种方法虽然相对麻烦一些，但是看起来代码显得很清晰，所谓的麻烦也只是在当初配置的时候而已，配置完之后，进入正常开发中就是第一种方法一样方便了，所以本文就详细讲解一下第二种的集成方法。首先我们将下载的 Spring Framework 下的相关 JAR 文件放到我们的 web 工程的 lib 下面，然后添加 applicationContext.xml 文件，添加 HelloWorldImpl 类到该文件中，applicationContext.xml 文件内容见清单 8 所示： 清单 8. applicationContext.xml 文件内容 然后再 web.xml 文件中添加对 Spring 的支持内容。添加内容见清单 9 所示：清单 9. web.xml 中添加对 Spring 的支持 org.springframework.web.context.ContextLoaderListener contextConfigLocation /WEB-INF/applicationContext.xml SpringLog4jConfigServlet org.springframework.web.util.Log4jConfigServlet web org.springframework.web.servlet.DispatcherServlet 然后在 BlazeDS 的配置文件 services-config.xml 中添加 Factory，具体内容见清单 10 所示：清单 10. 在 services-config.xml 中添加 Factory 接下来我们看下 SpringFactory 这个类，SpringFactory 是我们添加的实现 FlexFactory 的类，这个类很关键，具体代码见清单 11 所示：清单 11. SpringFactory 类的代码清单 package org.ibm.flex.spring; import org.springframework.context.ApplicationContext; import org.springframework.web.context.support.WebApplicationContextUtils; import org.springframework.beans.BeansException; import org.springframework.beans.factory.NoSuchBeanDefinitionException; import flex.messaging.FactoryInstance; import flex.messaging.FlexFactory; import flex.messaging.config.ConfigMap; import flex.messaging.services.ServiceException; public class SpringFactory implements FlexFactory private static final String SOURCE = source; /* * This method can be used to initialize the factory itself. * It is called with configuration * parameters from the factory tag which defines the id of the factory. */ public void initialize(String id, ConfigMap configMap) /* * This method is called when we initialize the definition of an instance * which will be looked up by this factory. It should validate that * the properties supplied are valid to define an instance. * Any valid properties used for this configuration must be accessed to * avoid warnings about unused configuration elements. If your factory * is only used for application scoped components, this method can simply * return a factory instance which delegates the creation of the component * to the FactoryInstances lookup method. */ public FactoryInstance createFactoryInstance(String id, ConfigMap properties) SpringFactoryInstance instance = new SpringFactoryInstance(this, id, properties); instance.setSource(properties.getPropertyAsString(SOURCE, instance.getId(); return instance; / end method createFactoryInstance() /* * Returns the instance specified by the source * and properties arguments. For the factory, this may mean * constructing a new instance, optionally registering it in some other * name space such as the session or JNDI, and then returning it * or it may mean creating a new instance and returning it. * This method is called for each request to operate on the * given item by the system so it should be relatively efficient. * * If your factory does not support the scope property, it * report an error if scope is supplied in the properties * for this instance. */ public Object lookup(FactoryInstance inst) SpringFactoryInstance factoryInstance = (SpringFactoryInstance) inst; return factoryInstance.lookup(); static class SpringFactoryInstance extends FactoryInstance SpringFactoryInstance(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; 以上代码加了些注释，希望大家仔细读一下，这样能更好的了解这个类的具体作用。然后我们修改 BlazeDS 的配置文件 remoting-config.xml, 修改内容见清单 12 所示： 清单 12. 修改 remoting-config.xml 内容 spring helloWorld 到目前为止 Flex 与 Spring 的集成我们就全都配置完毕了，打包部署到 tomcat 上，如果看到和图 3 一样的显示结果，说明一切正常，Flex 与 Spring 可以正常工作了，如果你想再添加更多的远程服务类，我们只需要在 Spring 的 applicationContext.xml 添加它们就可以了，并记着修改 remoting-config.xml 文件，是不是挺简单。Ok，下面我们接着讲解下 Flex 与 Hibernate 的集成。Flex 4 与 Hibernate 的集成Flex 与 Hibernate 的集成，我们一看到这句话的时候，有什么感想呢？的确在网上经常能看到这样的话语，其实这么说也没有什么不可以的，只是个人感觉它们是位于不同层的，并且之间还有夹层，通常这两者之间是不会直接产生调用关系的，所以也就无所谓的集成了，其实真正需要集成的是 Spring 与 Hibernate 间的，下面我们就具体讲解下这两者之间的集成方法。首先我们建立一个 Employee 表，语句见清单 13 所示： 清单 13. 创建 Employee 表语句 create table EMPLOYEE ( EMP_ID NVARCHAR2(10), EMP_NAME NVARCHAR2(10) ) 然后把所有相关 JAR 包复制到 lib 下面，接着新建一个 Hibernate 配置文件 hibernate.cfg.xml, 内容见清单 14 所示：清单 14. hibernate.cfg.xml 文件内容 oracle.jdbc.driver.OracleDriver anyone jdbc:oracle:thin:localhost:orcl anyone org.hibernate.dialect.OracleDialect 然后通过 Hibernate Code Generation Tools 生成 mapping 文件和相关类。我们注意一下 EmployeeDao 中的 findById 方法，这个是我们要用到的。下面我们来测试一下这个方法，看看是否可用。首先我们新建一个测试类 EmloyeeTest, 内容见清单 15 所示： 清单 15. 测试类关键代码 public class EemloyeeTest Before public void setUp() throws Exception Test public void testFindById() EmployeeDao employeeHome = new EmployeeDao(); EmployeeId id = new EmployeeId(); id.setEmpId(1); id.setEmpName(Mike); Employee employee = employeeHome.findById(id); Assert.assertEquals(employee.getId().getEmpName(), Mike); 运行后显示绿色长条，恭喜你成功了。下面我们修改下 HelloWorldImpl 类中的 sayHelloToSomeone 方法，修改后的代码见清单 16 所示： 清单 16. 修改后的远程调用方法 sayHelloToSomeone private EmployeeDao employeeDao; Override public String sayHelloToSomeone(String name) EmployeeId id = new EmployeeId(); id.setEmpId(1); id.setEmpName(Mike); Employee employee = employeeDao.findById(id); return Hello +employee.getId().getEmpName(); public EmployeeDao getEmployeeDao() return employeeDao; public void setEmployeeDao(EmployeeDao employeeDao) this.employeeDao = employeeDao; 上面的写法大家有什么疑问吗？想一下，我们知道 sayHelloToSomeone 是 HelloWorldImpl 类直接暴露给远程调用的服务，通常情况下这一层调用 service 层的，应该说基本不与 DAO 层交互的，我们为了节省时间，同时也是为了提示大家，我们省略了 DAO 的 service 层，直接调用 DAO. 下面我们修改下 Spring 的配置文件 applicationContext.xml 文件，首先加入 Hibernate 的配置文件 hibernate.cfg.xml，详细内容见清单 17 所示：清单 17. 加入 sessionFactory 然后将相关 bean 添加到该文件中，比如 EmployeeDao，并修改相关 bean 的配置，如 HelloWorldImpl, 详细内容见清单 18 所示：清单 18. 相关 bean 的配置 然后再修改 hibernate 的配置文件 hibernate.cfg.xml，添加如下内容：清单 19. hibernate.cfg.xml 中需添加的内容thread org.hibernate.transaction.JDBCTransactionFactory 至此 spring 与 hibernate 的集成就结束了，很简单，值得注意的就是 sessionFactory 与事务的配置。下面我们开始讲解 Flex 与 pureMVC 的集成方法。Flex 4 与 pureMVC 集成MVC 大家应该很熟悉了，model( 模型 )，view( 视图 )，control( 控制 )，这个模型的提出可谓是代码界的一次改革呀，呵呵，咱们再来看 pureMVC，翻译过来就是纯 MVC，在 pureMVC 中与 MVC 模型的对应关系是，mediator 对应 view，也就是与 UI 息息相关的，proxy 对应 model，提供数据的，command 对应 control，掌握控制业务逻辑的大权。Flex 工程中通过引用这个模型能使代码更清晰，更易于代码的维护。我们知道 Flex 是基于 event 的，而 pureMVC 确是基于消息的，采用观察者模式，每做完一件事情，都会发送一个消息 (Notification), 来说明这个 action 做完了，在 pureMVC 中的三个层次中对待消息也是不一样操作的，mediator 处于 UI 层，当然要既能接收消息又能发出消息了；proxy 比较大方，只发送消息，从不接收消息，任劳任怨呀；command 既不接收也不发送消息的，他是通过 faade 来和消息交互的，这样也是为了减少代码间的耦合度。我们开发时候只需要引入 PureMVC_AS3_2_0_4.swc 即可，可谓轻量极点了，呵呵。这部分的代码比较简单，只要是概念和 pureMVC 的实现方式弄清楚就可以了，所以省略了具体实现代码，希望大家自己动手体验一下，如有疑问请联系我。 常见问题汇总：异常 1、java.lang.NoClassDefFoundError: javax/transaction/Synchronization 原因：缺少 jta.jar 文件。异常 2、org.hibernate.HibernateException: Unable to instantiate default tuplizer 原因：缺少 javassist.jar 文件。异常 3、org.hibernate.MappingNotFoundException: resource: Employee.hbm.xml not found 原因：配置 mapping resource 时一定要记得指定路径。异常 4、org.hibernate.MappingException: entity class not found: Employee 原因：在 mapping 文件中 class name 一定要指定路径。异常 5:、No No Hibernate Session bound to thread, and configuration does not allow creation of non-transactional one hereNo：原因：添加 thread org.hibernate.transaction.JDBCTransactionFactory 到 hibernate 的配置文件。总结本文通过具体实例一步一步带领大家来学习 Flex 4 与 BlazeDS、Spring、Hibernate 和 pureMVC 的集成方法，尤其是 Flex 4 越来越受到人们青睐的今天，如何来使用 Flex 变得格外重要，什么样的架构方式才能既发挥 Flex 的特性，又不至于使得代码过于难于重构和维护，并且能够使软件运行起来更稳定，更流畅是我们需要考虑更多的问题。本文提供的架构模型有很多真实的案例，个人感觉在那么多的架构模型中，这种模型更具有突出性，所以总结出来与大家分享。当然萝卜白菜各有所爱，这要看个人或项目组内成员的经验和习惯来定义的，如果你在其他模型中有很好的经验，那么请你继续下去，毕竟新的架构中会出现这样或那样的问题，虽然末尾我总结了一些常见问题给大家，但那些只是肤浅的，沧海中的一粒而已。我们知道仅仅通过一片文章来很详细的将他们的集成方法的方方面面都阐述的很清楚，那是不可能的，本文提供了最基本，最基础的开发过程，任何复杂的事务归根结底还是源于