Flex学习笔记[2] - Flex 编程基础

最新推荐文章于 2018-04-16 16:37:40 发布

xiangcns

最新推荐文章于 2018-04-16 16:37:40 发布

阅读量577

点赞数

分类专栏：其它文章标签： flex import javascript servlet function action

其它专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Flex 编程基础

面向对象的编程

在上面 Hello World 的例子中我们可以看出，就像在 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：项目运行结果

图 16：项目运行结果

结束语

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

致谢

在本文完成之际，特别感谢 IBM 中国软件开发中心 IM 开发团队我的同事们在工作和学习中给我的巨大帮助！

参考资料

学习

“Flex 3 Developer's Guide”：很好的 Flex 基础知识入门材料。
“Flex Developer Center”：针对具体开发场景的大量示例代码和文章。
“Flex Ant Tasks”：介绍了如何结合 Ant 工具来编译 Flex。
“Flex RSL”：对Flex RSL开发的各方面进行详细介绍的官方文档。
“集成 Flex 与 Ajax 应用程序”（developerWorks，2008 年 7 月）：阅读完本文后，您将能够利用通过 Flash 资源获得的丰富功能。
“使用 Flex SDK 实现一个 Facebook 相册”（developerWorks，2008 年 12 月）：在本篇教程中，将在 Adobe Flex 中开发一个 Facebook 应用程序，它可以以幻灯片的形式显示用户的 Facebook 相册。
“Fluint 的官方站点”：Fluint 是 Flex Unit Test 的框架 Flex Unit 的升级版本。
“Cairngorm 框架的 Adobe 官方站点”：Cairngorm 是 Flex 开发最著名和最成熟的一个 MVC 框架。
“BlazeDS 框架的开源站点”：BlazeDS 是 Adobe 的一个开源项目。基于服务器的 Java 远程调用（remoting）和 Web 消息传递（messaging）技术，它能够使得后台的 Java 应用程序和运行在浏览器上的 Flex 应用程序或 AIR 应用程序相互通信。

获得产品和技术

下载 JRE 或 JDK。
下载 Eclipss Ganymede。
下载 Flex Builder Eclipse 插件版。
下载 Tomcat 6。
下载 FireFox 2.0。
下载 BDebug 版本的 FireFox Flash Player 插件。

关于作者

刘庆，目前在 IBM 软件开发中心（IBM CSDL）IM 开发团队担任开发工程师，拥有 IBM DB2 DBA 专业认证，他在 J2EE 和 Web 开发领域有着多年开发经验，喜欢关注新技术。他毕业于中国科技大学，并拥有硕士学位。

xiangcns

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flex学习笔记[2] - Flex 编程基础

Flex 编程基础面向对象的编程在上面 Hello World 的例子中我们可以看出，就像在 HTML 中嵌入 JavaScript 那样，我们可以在 mxml 里面嵌入 Action Script 代码来实现业务逻辑。没错！如果您把 Flex 中 mxml 和 Action Script 的关系理解为 Html 和 JavaScript 的关系，您会忽然发现您对 Flex 变的如
复制链接

扫一扫