一 引言
在用过了一年多的AJAX之后,忽然有一天接触到了Flex,几乎就是一瞬间,我就被它完全吸引。出色的设计理念、方便的调试及调优、完整而详细的API、友好而个性的界面、平台无关性,并且,会促使企业在服务端采用SOA等等,相比于现在流行的RIA如AJAX,我相信它比后者更能得到开发人员、项目经理、以及最终客户的青睐。相比于AJAX,我认为它至少有以下几点吸引我:
1)调试
在最近一年带新人学习的过程中我发现,大家学习服务器端的java及各种框架相对容易,反而是学习客户端的AJAX会比较困难,因为他们被迫要学习Html、jsp/servlet原理、struts标签、OGNL表达式、EL表达式、Java script 、prototype、dojo、dwr等等,最痛苦的是,即便firefox的firedebug可以提供调试功能,但是,由于很少有项目是独立界面,所以,这个调试功能至今我们也没有用起来。如果发生了一个简单的JS错误,新手们往往会浪费一个上午的时间去解决。
Flex是基于MXML与Action script 3,后者是强类型语言,在Flex Builder 3下开发,借助编译器可以在开发时发现编译异常,在运行时可以通过设置断点来分步调试,而MXML的底层实际上也是Action script 3,这无论从开发、设计还是调试方面都比传统的HTML+Java script 要强大的多。
2)调优
有多少AJAX开发人员会在编写他们的代码时关注内存占用情况?当客户端变得很慢、内存泄露、甚至溢出时,我们往往只是对客户一笑,告诉他重启浏览器。由于不好的开发习惯,很多项目代码中充斥着垃圾回收机制无法回收的内存占用,这些内存浪费就是所谓的内存泄露,更可怕的是,当你的程序运行时间越长,会累积越来越多的内存泄露,最终导致内存溢出,系统崩溃。
Flex的profile可以轻松帮助我们发现内存溢出的根源,帮助我们写出功能性能俱佳的代码。
3)CS与BS部署方便
传统的J2EE是基于BS架构,J2SE是CS架构,很难想象将一个J2EE应用很轻松的转变成一个J2SE应用。
Flex的代码对于部署到web application以及AIR上的代码差别不大,当然IE对于访问本地资源会有安全限制,这是无法避免的。在AIR上Adobe甚至还提供了一个内置数据库。
其实SUN的Applet技术和Flex的这种设计理念很像,但现在我宁可用Delphi去做一个CS系统,也不愿意用JAVA Swing,我想很多人都会同意这点。
4)摒弃传统的J2EE架构
传统的J2EE架构基于JSP/Servlet,而这种技术是基于HTML标准的,HTML标准最大的问题就是请求/响应机制,这种机制带来的最大问题就是无法满足用户实时性的要求,我们能做的,也只是定时刷新,就像开心网上有了新消息后的提示,就是通过定时(好像是1S)刷新<head>的方式来实现,但对于更大数据量,则无法采用服务器“推”技术。
Flex技术的传输协议支持HTML、SOAP、AMF(BlazeDS就是采用这种方式)通信,其中SOAP我印象中在SOAP1.2中就可以支持四种客户端/服务器的响应方式,非常灵活。采用Flex,可以使你的客户端与服务器不用局限于传统的HTML约束。
5)客户端与服务器完全独立
传统的J2EE技术通常要求客户端与服务器同时采用JAVA技术,除非采用像Web Service这种技术,才可以实现客户端与服务器采用不同技术实现。
Flex就是实现客户端应用,它并不关心你的服务器应用是什么技术来实现,这就与传统的SOA理念很合拍,而我一直认为,SOA理念是企业平台最理想的实现准则。
6)丰富的框架
与传统的Java script 库不同,目前的Flex框架会提供一套方法学来统一处理开发协作问题,使你的项目风险降到最低,代码的兼容性也会更好。比如Adobe官方的Cairngrom,就是基于客户端MVC架构的一套Flex框架,大小只有500多K,当然还有技术无关性的PureMVC、Fondry、ARP、Guasax Flex Framework等等。
最重要的是,与一本500多页的《Struts2 权威指南》不同,Cairngrom的官方文档只有30来页。
当然,Flex带给我的冲击还不仅仅上述这些,它最大的优势我觉得是它的设计理念,相信在你接触到它以后,会和我一样被它吸引。
这篇文章试图通过一个Hello World的例子来展示如何将Flex,BlazeDS以及Spring进行整合,本文不会讨论上述技术的具体细节。之所以决定写这篇文章,是因为虽然网上关于这方面的文章比较多,但在过程中还是有不少小陷阱,这篇文章会带领读者从容进行搭建。
二 环境搭建
Flex : Flex Builder 3
BlazeDS : http://opensource.adobe.com/wiki/display/blazeds/Release+Builds ,我下载的是
3.2.0.3978 Turnkey版本
Spring : spring2.55
服务器端开发IDE我选用的是Eclipse3.3
三 服务器搭建
1 在Eclipse中新建一个动态web项目
2 下一步
这里运行时J2EE容器采用Tomcat6.020(这里需要先配Eclipse的动态server,如下图),BlazeDS的Turnkey版本会自带一个Tomcat6.010,我没有采用这个,但如果你用的是教6.010的版本更低的版本,我不确定会不会有问题。
3 如果你没有别的需求,可以finish
4 接下来,我们需要导入如下jar包:
其中,以flex为前缀的五个jar包可以从\blazeds-turnkey-3.2.0.3978\resources\lib中找到,除此之外,junit的两个包是可选的,log4j也是可选的,spring-mock以及spring-modules也是可选的,剩下的,spring2-5-5是spring的jar包,其它的jar包,都在\blazeds-turnkey-3.2.0.3978\blazeds.war中
5 写个service
6 将blazeds.war\WEB-INF\flex中的四个配置文件放到工程WEB-INF\flex中
7 在 remoting-config中配上刚刚写的service
像这样配置,类似于RMI的方式,直接将具体的service暴露给客户端,没有经过spring托管,显然不是我们的预期。按照我们的预期,我们的service应该由spring bean factory进行管理,然后在客户端调用时动态进行实例化。
所以,这里,我们不按照上述做法配置,改成下面的方式:
8 在services-config中配置factory
9 编写factory,
FlexFactoryImpl 实现了 FlexFactory 接口,该接口完成两件事情:
因此,需要一个 FactoryInstance 的实现类,我们编写一个 SpringFactoryInstance,以便从 Spring 的容器中查找 FlexService:
FlexFactoryImpl 负责实例化 SpringFactoryInstance 并通过 SpringFactoryInstance 的 lookup() 方法查找 FlexService 接口对象:
10 web.xml:
由于我们在factory中需要WebApplicationContext,所以,需要配spring的监听ContextLoaderListener,后面的配置是处理flex客户端发送过来的请求,进入BlazeDS的MessageBrokerServlet.
server端的项目目录如下:
WebContent/BlazeDSDemo-debug这是后面Flex客户端自动生成的用来放置flex部署文件的地方,暂时不去管它。
四 客户端搭建:
1 在Flex Builder 3中创建Flex Project
2 这里我们采用Web application,理论上通过AIR方式也不应该有问题
服务器选择J2EE,通过选中LiveCycle Data Services,那么LiveCycle Data Services是什么呢,其实,BlazeDS是Adobe LiveCycle Data Services的开源版本,如下图:
3 下一步
Root folder:tomcat的webapp,必须保证这个路径下有WEB-INF/flex,我这里配置的是eclipse动态server时运行的tomcat webapp,这样,比较方便开发调试。当然,在部署时,这里的地址应填实际tomcat的webapp
Root url : 这是你项目的根路径
Content root : 这是上面去掉http://localhost:端口号的部分
记住,在eclipse中启动动态tomcat,然后点击Validate configuration,如果配置成功,就会出现“the web root folder and root URL are valid”,这里必须保证配置成功,才能点击下一步。
Output folder: 我在这里也是填入动态tomcat的位置,这个地址应该是root folder\[flex项目名-debug],flex builder会把编译后的文件放到这个目录下,最后通过eclipse统一部署。
4 如果没有其它详细配置,点击finish.
5 程序入口 BlazeDSDemo.mxml:
6 如果这时程序报server SDK不正确的错误,需要到工程的properties中配置SDK的编译器
五 验证
单击按钮,eclipse console中出现hello world,大功告成,
参考资料:
1 我的开发模式采用的是客户端与服务器独立IDE,目前还有另外两种开发模式,详细请见http://robocoder.blog.51cto.com/305256/88664
2 坐地铁时看的一篇IBM Developer的文章,写的很深入,但例子小有问题
http://www.ibm.com/developerworks/cn/java/j-lo-jeeflex
3 InfoQ上关于flex的一个专题,很全面
http://www.infoq.com/cn/news/2009/07/flash-platform-downloads
4 最后,就是adobe的官方网站,有关于Cairngorm框架的讨论、flex视频教学(中文字幕)、as3 API、各种开发文档及论坛