flex企业开发.doc

在Java领域，为寻求创建用户界面的最佳方式所作的努力从未停止过。Java作为一门高级编程语言，其强大的语言特性，丰富的数据结构，浩瀚的各类API支持及成熟的跨平台能力使其成为IT行业的领跑者和事实上的行业标准之一。基于Java三大平台(J2EE/J2SE/J2EE或JavaEE)所开发的各类产品和项目在各个行业都拥有无数成功的案例。然而，与Java数十年辉煌的行业地位极不协调的是，在UI(User Interface)设计领域，无论是基于AWT或Swing的桌面应用，还是以JSP(Servlet)或JSF为前端的企业级应用，都或多或少地让人们感觉到了Java在界面展现和用户体验方面有点力不从心。AWT和Swing最为让人诟病的就是程序的响应速度和内存泄露等诸多问题，而JSP在“富客户端”的互联网应用盛行的今天并没有提供多少可供开发人员使用甚至扩展的页面组件，JSP程序员仍然需要花大量的时间去开发标签库，需要在并不熟悉的JavaScript上面耗费大量的开发和调试时间，因此多年来JSP始终只能作为各种商业控件的“载体”，始终在JSP+标签库+表达式语言的前端开发模式中扮演“绿叶”。而JSF技术，是Sun公司力图使Java互联网应用从“请求-响应”机制向“事件处理”机制进化跨出的革命性的一步，其特点为强大的事件处理功能和界面组件支持及其对Request和Response对象处理细节的隐藏，应该说JSF代表了未来互联网应用的方向，但是JSF对开发人员的角色区分较为细致，例如分网页设计人员、应用程序设计人员和组件设计(集成)人员等，要想精通JSF，就必须深入了解JSF标准标签的使用、自定义标签开发、事件驱动模型、UI组件开发等技术细节，学习的难度较大，周期较长。在RIA领域，最近几年最为风生水起的技术就要算是Flex了。在当今流行的RIA解决方案中，不乏Applet这样“沉”熟稳“重”的老兵，也不乏Ajax这样风风火火的新贵，而Flex却是独树一帜，稳健而不失犀利。Flex会在未来几年成为RIA平台的领航者，理由有两条： 第一是其基于Flash Player的开发模型。Flash Player提供了Flex应用在不同操作系统和不同浏览器之间整合的能力。据统计，全世界84%的个人计算机上安装有Flash Player，并保有80%的升级率。这使我们在几乎所有的互联网用户的运行时中发布跨平台的RIA应用成为可能，因为应用的最终形式只是一个swf文件，而这个文件能在任何安装了Flash Player的浏览器中运行，无论用户使用的是Windows、Linux还是Mac OS。第二是框架的成熟度。Flex开始进入人们的视野是在2004年，最初作为企业级应用服务器打入市场。从那时起，Flex根据技术和市场的需要进行了一系列的改进。升级了Flash运行时、ActionScript语言和服务器组件的Flex 2.0于2006年6月发布，Adobe于2007年4月宣布Flex框架开源。Flex使得软件开发人员为增强用户体验开发健壮，开源的框架成为现实。开源社区也会为Flex技术的成熟与高速发展提供强大的技术支撑。 待续。 Java技术非常成熟，大量的企业级应用采用Java技术构建。Java能为这些复杂的应用提供强大的业务计算能力，但却往往不能为其提供完美的界面和良好的用户体验。对于技术人员来说，保留Java强大的业务逻辑处理能力，以非Java技术取代其略显晦涩的界面展现能力，不失为一种好的选择。现在，是Java开发人员向Flex敞开怀抱的时候了！Flex体系结构类似于Java/J2EE架构构建，如果你有过Java开发背景，当你接触Flex编程的时候，你会发现Flex其框架、语言和工具非常易于上手。反之，如果你精通Flex编程，在学习Java的时候，你常常会发现某些ActionScript的语言特征(诸如面向对象)和Java极为相似，甚至完全一致。Flex Builder是基于Eclipse构建的，可以同时以独立产品和插件的形式提供。几乎所有的Java开发人员都使用Eclipse进行开发，所以他们自然对Flex Builder不会陌生。Flex还提供了大量Ant任务，为自动构建Flex工程提供了足够的支持。而Ant则早已成为Java开发人员和Java社区最密切的朋友，这又为Java开发人员向Flex领域进军提供了天然的条件。Flex的优势在于构建绚丽的用户界面，提供所谓的“富客户端”体验，业务处理并不是Flex的强项，毕竟ActionScript的数据结构、语言特性及库函数支持尚不能和成熟的高级语言(诸如Java、C 等)相提并论，Flex的开发者们在Flex面世时就考虑到了Flex的定位，同时推出了其获取后台服务的工具-LiveCycle Data Service ES。LiveCycle组件为Flex前端提供了多种与Java后台交互的方式，如远程对象调用、Java消息服务和数据管理服务。基于Flex框架构建的RIA应用允许Java开发人员利用强大和成熟的Java平台实现复杂的服务器端业务逻辑；同时用Flex能取代传统的Java用户界面技术如JSP，Servlet等，提供极为出色的用户体验和数据展现能力。可见Flex和Java的结合实在是既自然而又必然的事情。 Flex & Struts由于MVC在能够清晰地为应用进行分层并因此带来很多优势，很多大型的项目都会基于MVC模式进行架构。在笔者曾经参与的几家世界500强公司的互联网应用项目中无一例外地采用了MVC架构。更确切地说，都采用了Struts框架，那么Struts是什么呢？Struts在最近几年的Java互联网应用领域中可以说是占有举足轻重的地位，它是Apache基金会Jakarta项目组的一个开源项目，采用了MVC模式，是一个能够帮助开发人员迅速建立起自己的项目的一个半成品框架。就是说，如果基于Struts开发应用，开发者只需要做下面几件事情： 为应用开发视图。通常是JSP，将界面上的表单对应到Struts-config.xml中的ActionForm中，以处理用户输入。 为应用设计业务逻辑处理程序。Struts框架中的控制器是一个ActionServlet(确切地说是RequestProcessor)实例，一般不需要开发者自己定义或修改控制器，但是必须设计业务处理逻辑，控制器会将相应的请求映射到这些处理程序中(Action)，相应的配置也在Struts-config.xml中。 开发模型层。这是几乎所有应用都要做的，可结合一些ORM框架(如Hibernate)简化这一层的工作综上所述，开发基于Struts框架的应用非常简单，主要是管理好Struts-config.xml这个文件，实际上，这个配置文件就像一瓶“胶水”，将界面和业务逻辑处理“粘合”在一起，隐藏了ActionServlet这个请求的核心控制者，只要读懂Struts-config文件，你就能很清楚，你页面上的请求由谁来处理。Struts框架还为互联网应用面临的一些共通的问题提供了解决方案，诸如国际化支持、页面重用与复合(tiles框架)等。尽管Struts大大地方便了开发人员的工作，但是在改善用户体验这一点上并没能有革命性的突破：使用的仍然是“请求-响应”的传统的处理机制，每当客户端发起请求，服务器端会根据请求进行计算并产生结果，重新生成HTML页面发回客户端。这样，用户会感到页面“刷新”了。相比而言，Flex应用中的文件会最终编译成一个二进制的SWF文件，发送到客户端，当其发送请求到服务器的时候，服务器仅仅传送所需的数据回客户端，并不会重新编译SWF文件，也不会刷新页面。这也正是RIA的优势所在。其实，Flex本身也是一个MVC架构的产品，只不过更多地关心MVC中“View”的实现，而Struts的业务处理应该是核心，视图层使用了大量的标签库以简化开发人员的工作。所以，如何能将Flex在视图设计和Struts在业务处理方面的优势结合到一个应用当中，应该是我们此时考虑并亟待获得答案的问题。 前面对Struts及MVC模式做了阐述，也介绍了Java互联网应用开发中流行的Struts框架。我们知道，Flex框架本身也是MVC模式非常标准的实践，那么为什么我们不直接使用Flex框架的MVC实现，而要在本节中将Flex和Struts结合使用呢？如果您仔细权衡一下Flex和Struts各自的优势所在，您会发现，这种整合是非常必要的。我们已经对Flex在用户界面设计方面的强大能力印象深刻，现在，只需结合Struts在核心控制和后台数据整合方面的先天优势，一个“内外兼修”的应用便会浮现在眼前。接下来的开发过程将采用下列的开发工具、应用框架和应用服务器： Eclipse-jee-europa-fall2-win32版 Flex Builder Eclipse plug-in Adobe LiveCycle Data Service ES struts-1.3.8 apache-tomcat-6.0.16 现在，我们将着手开发一个简单的基于Struts的用户管理系统，将Flex作为其视图层实现，旨在介绍如何将Struts和Flex良好地集成在一起。首先，打开Eclipse，按Ctrl N组合键新建项目，选择Flex Project。 单击Next按钮进入下一步，输入项目名“UserInfoSys”，勾选“Use default location”，使用默认的工作区目录；选择应用类型为“Web Application(runs in Flash Player)”，指定我们要创建的项目是互联网应用，运行在浏览器中；在Server technology中选择“J2EE”，因为我们要使用Tomcat作为服务器；不要勾选“Use remote object access service”，因为在这个示例中，我们会使用HTTPService组件，采取URL访问远端服务的形式；勾选“Create combined Java/Flex project using WTP”，这样会为Flex和Java分别生成存放代码的目录。 项目将部署和运行在Tomcat上，这一步将进行其相关设置。由于是第一次进行配置，所以在Target runtime后单击New按钮，新建一个服务器配置。在弹出的对话框中选择“Tomcat v6.0 Server”，其他默认，单击Next按钮进入服务器运行时设置 在弹出的对话框中选择您的Tomcat安装路径，使Eclipse能够找到启动它的命令和相关运行时库，单击Finish按钮，刚刚建立的配置出现在Target runtime下拉框中,选择“Apache Tomcat v6.0”，其他保留默认设置；单击Next按钮进入下一步；此时Eclipse会生成项目所需文件，并将Flex运行时库加入到项目的类路径中。 可以看到Flex的相关运行时库都已经出现在了Build path libraries中。单击Finish按钮结束项目的配置，这是Eclipse会提醒我们是否切换到Flex视图，选择“是”，我们建立的项目在Flex Navigator中显示。 此时，我们完成了配置的第一步，这时的项目是一个Flex互联网应用，但是如果现在就将其部署到Tomcat上，用URL访问MXML文件，你只能看到响应的源代码(XML格式)，MXML并不会被编译成SWF文件。因为Tomcat会把MXML格式的文件当作普通的XML文件，不会对其进行处理，此时我们需要一种“映射”机制，将访问MXML的请求交给专门的Servlet处理。这个专门的Servlet存在LiveCycle Data Service ES运行时中，下载和安装LiveCycle的过程非常简单，不再赘述。 下面，我们介绍如何为访问MXML提供支持。在Flex Navigator中右击，从弹出的快捷菜单中选择Import命令。在弹出的对话框中选择“WAR file”。单击Next按钮，在弹出的对话框中选择LiveCycle安装目录下的flex.war，这是LiveCycle提供的一个空的应用，开发人员可以在其基础上添加自己的界面及业务逻辑，这个空的应用提供了与企业级应用进行各种形式交互的支持，包括JMS、RPC(远程调用)，代理服务及数据管理服务；我们的应用使用了RPC功能中的HTTPService调用，如果单纯调用HTTPService，其实并不需要LiveCycle，后面我将对LiveCycle的各种服务进行详细的介绍。单击Finish按钮完成导入。flex.war在导入后会作为一个Web项目出现在Flex Navigator中。 在flex项目的WebContentWEB-INF目录下找到web.xml文件，将 直到 前的所有内容复制到FlexStruts项目的web.xml的相应位置。选择flexWebContentWEB-INF下的flex目录并右击，在弹出的快捷菜单中选择Copy命令。打开我们的UserInfoSys项目，在WebContentWEB-INFflex目录的右键快捷菜单中选择Paste命令，将整个flex目录拷贝到下面。用同样的方式，将flex项目中WebContentWEB-INF下的“lib”目录下的所有jar包拷贝到UserInfoSys项目的相应位置。我们需要做一些修改，修改后的web.xml内容如下： UserInfoSys flex.class.path /WEB-INF/flex/hotfixes,/WEB-INF/flex/jars /b FlexMxmlServlet MXML Processor Servlet wrapper for the Mxml Compiler flex.bootstrap.BootstrapServlet servlet.class flex.webtier.server.j2ee.MxmlServlet webtier.configuration.file /WEB-INF/flex/flex-webtier-config.xml 1 FlexMxmlServlet *.mxml FlexTagLib /WEB-INF/lib/flex-bootstrap-jsp.jar 此时，我们第二步的配置就完成了，当前UserInfoSys项目中的MXML文件已经能够在被访问时编译成SWF文件，发送到客户端。下面，我们 让这个项目变成一个集成Struts框架的互联网应用。首先，下载Struts1.3.8并解压到本地目录，打开其根目录下的lib，选中所有jar包，复制到UserInfoSys的lib目录下。 将$ struts安装目录 srcappsblanksrcmainwebappWEB-INF下的struts-config.xml拷贝到UserInfoSys的WebContentWEB-INF下，只保留如下内容： 代码 复制 - 运行 然后，在FlexStruts的web.xml中的相应位置添加如下内容，这是将所有以“.do”结尾的请求映射到ActionServlet(前面讲到的控制器)，ActionServlet会根据ActionMapping的设置，将请求分发给相应的Action进行处理。 首先，添加servlet定义： 代码 复制 - 运行 actionorg.apache.struts.action.ActionServletconfig/WEB-INF/struts-config.xml2 然后，添加相应的servlet映射定义： 代码 复制 - 运行 action*.do注意， 和 段一定要放在对应位置，例如servlet定义放在了其他servlet定义的最前面，那么相应地也应把servlet-mapping定义放在其他servlet-mapping的最前面，反之亦然。目前，我们已经完成了项目的所有配置，现在的UserInfoSys是一个集成了Flex特性、基于Struts框架的互联网应用。这个实例是一个用户管理系统，登录后，管理员可以浏览和更新用户的基本信息。在后面的连载中，我将拿出专门的篇幅来叙述如何基于Flex开发复杂的数据库应用，包括如何与常用的ORM框架进行集成等，这里，我们采用的数据库是一个经常用于演示功能的轻量级Java开源数据库-Hsqldb。 可以先登录Hsqldb的官方网站/下载其最新版本并阅读相关文档，对Hsqldb的基本操作和特性作一些了解。将下载得到的Hsqldb压缩包解压，其中的lib目录中含有一个hsqldb.jar，将其拷贝到将我们项目中WEB-INF下的lib目录下。们将为项目建立库表。首先，右击WebContent下的WEB-INF目录，在弹出的快捷菜单中选择NewFolder命令，创建一个dbuser文件夹。现在我们将使用Hsqldb的客户端，在Eclipse菜单栏选择RunOpen Run Dialog命令，打开运行程序设置对话框,在弹出的对话框中选择Java Application并右击，在弹出的快捷菜单中选择New命令 在右面出现的界面中填入我们运行程序的名称“Hsqldb”，单击Main Class右边的Search按钮，在弹出的对话框中输入“DatabaseManager”在列表框中选择DatabaseManager，单击OK按钮。在Run对话框中单击Run按钮，此时，Hsqldb的数据库管理客户端就启动了，如图： 在弹出对话框的Type下拉框中选择“HSQL Database Engine Standalone”。Hsqldb主要的3种运行模式为Server模式、Standalone模式(又称In-Process模式)和Memory-only模式。其中Server模式又分Hsqldb Server、Hsqldb Web Server和Hsqldb Servlet模式。我们选择的是Standalone模式，这种模式下，数据库引擎作为应用程序的一部分在同一个JVM中运行，因为数据不用转换和通过网络传送而具有较快的速度。主要缺点是默认不能从应用程序外连接到数据库，就是说应用程序运行的时候，不能通过数据库管理器查看数据库内容。其他几种模式的解释请参考Hsqldb官方网站上的文档。 选定之后，我们将在URL文本框中填入刚才我们新建的db目录在文件系统中的绝对路径，并且加上数据库的名称，如下图： 其中第二个“user”是我们定义的数据库名称。单击OK按钮，会进入Hsqldb的主界面。至此我们完成了进行Hsqldb的连接工作。 刚才我们建立的dbuser目录下会多出几个文件： user.lck user.log perties user.script其中，perties是数据库的配置文件，user.script是数据库的脚本，每次启动时都会执行，user.lck表示数据库此时正在使用中，user.log是日志文件。我们要建立一个非常简单的用户表，名称为“USERPROFILE”，里面存储用户的基本信息，包括用户ID、用户名、职位、照片名称、照片缩略图名称以及个人简介。在Hsqldb主界面的SQL文本框中输入建表语句(数据库建表脚本)： CREATE MEMORY TABLE USERPROFILE(USER_ID INTEGER GENERATED BY DEFAULTAS IDENTITY(START WITH 0) NOT NULL PRIMARY KEY,NAME VARCHAR(40),TITLE VARCHAR(40),IMAGE VARCHAR(40),IMAGEBREF VARCHAR(40),DESCRIPTION VARCHAR(255) 单击Execute按钮，语句执行正确后，会在结果框显示“update count0”。 选择View菜单下的Refresh Tree或按Ctrl+R组合键，将刷新当前数据库内容视图，我们将看到，USERPROFILE表已经建立。 我们可以往刚建好的表里面插入几条数据：INSERT INTO USERPROFILE VALUES(1,张无忌,架构师, ym.jpg, ymbref.gif,八年软件开发和设计经验，参与过多个大型项目的设计)INSERT INTO USERPROFILE VALUES(2,张三丰,技术顾问, yzp.jpg, yzpbref.gif,五年软件开发和设计经验，担任过多个跨国公司的技术顾问)INSERT INTO USERPROFILE VALUES(3,奥特曼,高级工程师, wy.jpg, wybref.gif,三年软件开发和设计经验，参与过多个项目核心功能的研发) 接下来，我们会编写连接数据库、读取及更新数据库的代码。 按Ctrl+N组合键，打开New对话框，在新建类型中选择JavaClass，在弹出的对话框中，输入包名和类名，如图所示。 单击Finish按钮，然后输入程序代码。ConnectionHelper.java的代码很简单，如下：代码 复制 - 运行 package flex.userinfosys.db;import java.sql.Connection;import java.sql.DriverManager;import java.sql.SQLException;import .URLDecoder;public class ConnectionHelper private String url;private static ConnectionHelper instance;private ConnectionHelper() try Class.forName(org.hsqldb.jdbcDriver);String str = URLDecoder.decode(getClass().getClassLoader().getResource(flex/userinfosys/db).toString(),UTF-8);url = jdbc:hsqldb:+ str.substring(0, str.indexOf(classes/flex/userinfosys/db)+ db/user/user; catch (Exception e) e.printStackTrace();public static Connection getConnection() throws SQLException if (instance = null) instance = new ConnectionHelper();return DriverManager.getConnection(instance.url); 相信学习过Java编程的读者会很容易读懂这段代码的意思。同样，我们将构建其他必要的Java类UserProfile是我们常说的POJO类，对应于USERPROFILE表，是用户基本信息的描述，UserProfile.java的代码如下： 代码 复制 - 运行 package flex.userinfosys.db.user; public class UserProfile public UserProfile(int userId, String name, String title, String image, String imagebref, String description) this.userId = userId; = name; this.title = title; this.image = image; this.imagebref = imagebref; this.description = description; public int getUserId() return userId; public void setUserId(int userId) this.userId = userId; public String getName() return name; public void setName(String name) = name; public String getTitle() return title; public void setTitle(String title) this.title = title; public String getImage() return image; public void setImage(String image) this.image = image; public String getImagebref() return imagebref; public void setImagebref(String imagebref) this.imagebref = imagebref; public String getDescription() return description; public void setDescription(String description) this.description = description; private int userId; private String name; private String title; private String image; private String imagebref; private String description; UserService类似于我们在开发中常用到的DAO类，封装了数据库的增删改查功能，同样非常简单，UserService.java的代码如下： 代码 复制 - 运行 package flex.userinfosys.db.user; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import java.util.ArrayList; import java.util.List; import flex.userinfosys.db.ConnectionHelper; import flex.userinfosys.db.DAOException; public class UserService public List getUsers() ArrayList list = new ArrayList(); Connection c = null; try c = ConnectionHelper.getConnection(); Statement s = c.createStatement(); ResultSet rs = s.executeQuery(SELECT * FROM USERPROFILE ORDER BY name); while (rs.next() list.add(new UserProfile( rs.getInt(user_id), rs.getString(name), rs.getString(title), rs.getString(image), rs.getString(imagebref), rs.getString(description); catch (Exception e) e.printStackTrace(); finally try c.close(); catch (SQLException e) e.printStackTrace(); return list; public UserProfile getUserProfile(int userId) throws DAOException return null; public void update(UserProfile user) throws DAOException, ConcurrencyException Connection c = null; System.out.println(updating . ); try c = ConnectionHelper.getConnection(); PreparedStatement ps = c.prepareStatement( UPDATE USERPROFILE SET + name=?, title=?, image=?, imagebref=?, + description=? WHERE user_id=?); ps.setString(1, user.getName(); ps.setString(2, user.getTitle(); ps.setString(3, user.getImage(); ps.setString(4, user.getImagebref(); ps.setString(5, user.getDescription(); ps.setInt(6, user.getUserId(); if (ps.executeUpdate() = 0) throw new ConcurrencyException(Item not found); catch (Exception e) e.printStackTrace(); throw new DAOException(e); finally try c.close(); catch (SQLException e) e.printStackTrace(); 接下来，我们将实现相应的Action类，这里的Action类是Struts框架命令模式的核心所在，我们将先创建一个用于显示所有用户信息的Action，注意在Superclass中输入org.apache.struts.action.Action，使其成为Struts Action的子类，如图。 ListUserAction.java的代码如下： 代码 复制 - 运行 package flex.userinfosys.action; import java.io.PrintWriter; import java.util.List; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.struts.action.Action; import org.apache.struts.action.ActionForm; import org.apache.struts.action.ActionForward; import org.apache.struts.action.ActionMapping; import flex.userinfosys.db.user.UserProfile; import flex.userinfosys.db.user.UserService; public class ListUserAction extends Action public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception System.out.println(Starting processing.); UserService us = new UserService(); List users = us.getUsers(); String userprofile = ; if (users != null) for (int i = 0; i users.size(); i+) userprofile += populateUser(UserProfile) users.get(i); /Its important! response.setCharacterEncoding(utf-8); PrintWriter pw = response.getWriter(); pw.print(userprofile); return null; private String populateUser(UserProfile user) return + + user.getUserId()+ + + user.getName() + + + user.getTitle() + + + use