Flex面向对象编程 - 实例

     比如在HTML 中嵌入 JavaScript 那样，我们可以在 mxml 里面嵌入 Action Script 代码来实现业务逻辑。没错！如果您把 Flex 中 mxml 和 Action Script 的关系理解为 Html 和 JavaScript 的关系，您会忽然发现您对 Flex 变的如此熟悉！

Action Script 语言是面向对象的脚本语言，它连编写方式都和 JavaScript 非常的相似。除了可以嵌套在 mxml 里面之外，它还可以像 JavaScript 写在单独的 .js 文件里面那样写在单独的 .as 文件里面，然后在 mxml 里面引入它。

下面我们新建一个 Action Script 的类 J2eeServer.as 如清单 2 所示：

清单 2：J2eeServer.as

package com.ibm.flex { 　　import flash.events.EventDispatcher; 　　import mx.rpc.AsyncToken; 　　import mx.rpc.events.FaultEvent; 　　import mx.rpc.events.ResultEvent; 　　import mx.rpc.http.HTTPService; 　　public class J2eeServer extends EventDispatcher 　　{ 　　　　public function J2eeServer() 　　　　{ 　　　　} 　　　　public function sendRequest(locale:String):void 　　　　{ 　　　　　　var httpObject:HTTPService = new HTTPService(); 　　　　　　httpObject.resultFormat = "text"; 　　　　　　httpObject.url = 　　　　　　　　"http://localhost:8080/FlexSample/SampleServlet?locale="+locale; 　　　　　　var responder:mx.rpc.Responder = new mx.rpc.Responder(onSuccess, onFault); 　　　　　　var call:AsyncToken = httpObject.send(); 　　　　　　call.addResponder(responder); 　　　　} 　　　　private function onSuccess(event:ResultEvent):void 　　　　{ 　　　　　　this.dispatchEvent(event); 　　　　} 　　　　private function onFault(event:FaultEvent):void 　　　　{ 　　　　　　trace("communication failed!"); 　　　　　　this.dispatchEvent(event); 　　　　} 　　} }

 

在这个类定义里面，熟悉 Java 的开发人员可以看出其编码规范和 Java 非常类似。在其中我们定义了一个 sendRequest() 方法， 使用 HTTPService 对象发起一个 http 的 get 请求 , 并且对于不同的返回结果我们定义了 onSuccess() 和 onFault() 两个方法去处理。在这两个结果处理方法中，我们将事件 dispatch 出去。

与 Servlet 集成

在 J2eeServer.as 中，我们通过 Action Script 发出 http 请求，现在我们定义一个服务器端的 servlet 来处理该请求。如清单 3 所示：

清单 3：SampleServlet.java

package com.ibm.sample; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class SampleServlet extends HttpServlet { 　　private static final long serialVersionUID = 1L; 　　public SampleServlet() { 　　　　super(); 　　} 　　protected void doGet(HttpServletRequest request, 　　　　　　HttpServletResponse response) throws ServletException, IOException { 　　　　doPost(request, response); 　　} 　　protected void doPost(HttpServletRequest request, 　　　　　　HttpServletResponse response) throws ServletException, IOException { 　　　　String locale = request.getParameter("locale"); 　　　　response.setContentType("text/html"); 　　　　PrintWriter out = response.getWriter(); 　　　　out.println("The locale you selected is " + locale); 　　} }

和普通 web 应用一样配置 web.xml, 如清单 4

清单 4：web.xml

<?xml version="1.0" encoding="UTF-8"?> <web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" 　　xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 　　xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 　　　　http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> 　　<display-name>FlexSample</display-name> 　　<servlet> 　　　　<display-name>SampleServlet</display-name> 　　　　<servlet-name>SampleServlet</servlet-name> 　　　　<servlet-class>com.ibm.sample.SampleServlet</servlet-class> 　　</servlet> 　　<servlet-mapping> 　　　　<servlet-name>SampleServlet</servlet-name> 　　　　<url-pattern>/SampleServlet</url-pattern> 　　</servlet-mapping> 　　<welcome-file-list> 　　　　<welcome-file>FlexSample.html</welcome-file> 　　</welcome-file-list> </web-app>

事件驱动与数据绑定

从 J2eeServer.as 中我们依稀可以看出 Flex 事件驱动的影子。的确，Flex 的业务流程大多是靠事件来驱动的。某一个方法结束后，dispatch 出去一个事件。事件的监听者监听到这个事件后就会采取相应的动作来处理事件。如清单 5 所示：我们在 init() 方法中进行了事件绑定，绑定了两个监听方法 successHandler () 和 errorHandler () 到 J2eeServer 上。当 J2eeServer 完成和服务器端 servlet 通信 dispatch 出相应的事件后，两个监听方法便会监听到相应的事件并进行处理。

Flex 的另外一个重要的特点就是支持数据绑定，在另一篇文章《使用 Eclipse 和 JavaFX 开发 Mashup 应用》中我们曾介绍了 JavaFx 的数据绑定特性，同样 Flex 也支持数据绑定。当数据源被绑定到另外一个对象的某属性上时，数据源的数据如果发生变化，开发人员不需要写额外的代码该对象的属性值就可以相应的变化。如清单 5 中所示：如果要进行数据绑定，则要先定义一个可绑定的数据源，例如我们在变量 private var serverResponse:String = "" ;的上面设置 [Bindable] 属性，表示其为可绑定变量。然后我们在 resultLable 中使用花括号 {serverResponse} 将变量serverResponse绑定到 resultLable 的 text 属性上。

清单 5：FlexSample.mxml

 

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 　　 creationComplete="init()"> 　　 <mx:Script> 　　　　 <!--[CDATA[ 　　　　　　 import mx.rpc.events.ResultEvent; 　　　　　　 import mx.rpc.events.FaultEvent; 　　　　　　 import com.ibm.flex.J2eeServer; 　　　　　　 import mx.collections.ArrayCollection; 　　　　　　private var jserver:J2eeServer = new J2eeServer(); 　　　　　　//可绑定变量 　　　　　　[Bindable] 　　　　　　private var serverResponse:String = ""; 　　　　　　//可绑定变量 　　　　　　[Bindable] 　　　　　　private var locales:ArrayCollection = new ArrayCollection( 　　　　　　　　　　　　　　　　　　　　　　　　　　　[ {label:"en_us", data:"en_us"}, 　　　　　　　　　　　　　　　　　　　　　　　　　　　　 {label:"zh_cn", data:"zh_cn"}]); 　　　　　　 private function init():void 　　　　　　 { 　　　　　　　　 //事件绑定 　　　　　　　　jserver.addEventListener(ResultEvent.RESULT, successHandler); 　　　　　　　　jserver.addEventListener(FaultEvent.FAULT, errorHandler); 　　　　　　 } 　　　　　　 private function localeComboxChangeHandler(event:Event):void 　　　　　　 { 　　　　　　　　 jserver.sendRequest(localeCombox.selectedItem.data); 　　　　　　 } 　　　　　　 private function successHandler(event:ResultEvent):void 　　　　　　 { 　　　　　　　　 serverResponse = event.result.toString(); 　　　　　　　　 trace(event.result); 　　　　　　 } 　　　　　　 private function errorHandler(event:FaultEvent):void 　　　　　　 { 　　　　　　　　 serverResponse = event.message.toString(); 　　　　　　　　 trace(event.message); 　　　　　　 } 　　　　 ]]--> 　　 </mx:Script> 　　 <mx:VBox> 　　　　<mx:Label text="Select your locale:" /> 　　　　<mx:ComboBox 　　　　　　id="localeCombox" 　　　　　　width="160" 　　　　　　dataProvider="{locales}" 　　　　　　change="localeComboxChangeHandler(event)"/> 　　　　<mx:Label 　　　　　　id="resultLabel" 　　　　　　text="The response from server is: {serverResponse}" /> 　　 </mx:VBox> </mx:Application>

最终项目的文件结构如图 15 所示：

图 15：项目文件结构图

运行项目，我们可以看到当我们改变下拉框的值的时候，会触发 localeComboxChangeHandler() 函数调用 J2eeServer 的 sendRequest() 方法将选择的 locale 值发送给服务器端的 servlet，并且在结果返回后，将从服务器端得到的 response 显示在 resultLable 上。如图 16 所示：

图 16：项目运行结果

 

 

Flex 作为 RIA 的新技术，对传统 web 开发技术有继承也有发展。这篇文作为入门文，主要作用是帮助大家掌握 Flex 的开发环境、开发方式、开发调试部署的流程以及 Flex 的基本编程知识。但 Flex 除了国际化、Unit 测试、Ant 编译等传统问题之外，作为新技术 Flex 还有很多不同以往的地方，比如模块开发，RSL(Runtime Shared Libraries), Shared object、和 JavaScript 交互以及它的 MVC 框架 cairngorm，远程调用和消息传递框架 BlazeDS 等。