開始之前
Flex 作為富 Internet 應用（RIA）時代的新技術代表，自從 2007 年 Adobe 公司將其開源以來，Flex 就以前所未有的速度在成長。很多公司，包括 IBM 都紛紛加入了 Flex 開發的陣營當中。很多開發人員也按捺不住 Flex 的“誘惑”而準備從事 Flex 開發。本文主要講述 Flex 開發的基礎知識，主要是關于開發環境的搭建，以及介紹簡單的 Flex 項目創建、編碼、調試以及部署的過程和 Flex 編程的基本知識。通過本文的學習，您將會學習如何搭建 Flex 基本的開發環境以及開發、調試和部署方面的基礎知識。為您以后深入系統的學習 Flex 打下良好的基礎。
要學習本文，您需要有一定的 Web 編程經驗和 Eclipse FireFox 使用經驗。
代碼示例和安裝要求
本文所有示例均在 Windows XP SP3 系統中測試完成。您需要一臺能流暢運行 Windows XP 系統的機器，除此之外您還需要一些工具才能試用本文中的代碼。所有這些工具都可以免費下載（參見 參考資源）：
- Java SDK 1.5 或更高版本
- Tomcat 6.0 或更高版本
- Eclipse 3.3 或更高版本
- Flex Builder 3.0 或更高版本
- FireFox2.0 或更高版本
回頁首
安裝配置開發環境
接下來我們便迫不及待的開始吧！首先搭建我們的開發環境，為了減少因為環境不一致而引起的問題，建議讀者使用與本文相同的軟件版本：
- 下載 并安裝 JDK( 本文使用版本為 Sun JDK 6) ；
- 下載 并解壓 Eclipse( 本文使用版本為 Eclipse Ganymede J2EE 版本，含 WTP 插件 );
- 下載 并安裝 Flex Builder Eclipse 插件版 ( 本文使用的 Flex Builder 版本為 3.0.1);
- 下載 并安裝 Tomcat( 本文使用版本為 Tomcat6.0.18);
- 下載 并安裝 FireFox( 由于 Flex3.0 和一些插件的兼容性問題，本文使用 FireFox2.0.0.17)
大家知道 Flex 代碼編譯后是一個 SWF 文件，運行在 Flash Player 中，要想看到 SWF 文件在運行時輸出的一些調試信息是比較困難的。所以在安裝好基本的軟件之后，我們要安裝一些便于我們調試 Flex 的 FireFox 插件：
下載 并安裝 debug 版本的 FireFox Flash Player 插件 ( 本文使用的版本為 Flash Player10)
打開 FireFox，到 FireFox 的 擴展組件站點 上搜索并安裝 HttpFox，FlashTracer，Cache Status 三個插件，如圖 1 所示。
圖 1：開發調試需要的 FireFox 插件
在安裝了 Debug 版本的 Flash Player 之后，Flash Tracer 能顯示您在程序中用 trace() 語句輸出的調試信息，HttpFox 插件不僅能查看 HTTP 通信的過程和數據，還能看到哪些內容是從 Cache 里面讀取的。另外，Cache Status 插件可以讓我們方便的管理緩存。在 Flex 開發過程中，往往需要先清除掉緩存中的內容，才能看到新改動的效果。
接下來我們打開 Flex Builder, 在菜單Window>Preferences>Server>Runtime Environment中設置我們的 Tomcat6 以及在菜單Window>Preferences>General>Web Browser中設置瀏覽器為外部瀏覽器 FireFox，如圖 2 和圖 3 所示：
圖 2：配置 Tomcat
圖 3：設置默認瀏覽器
到此為止，我們的開發環境算是徹底搭建完畢，可以看出這個過程并不算是特別簡單。別急，先苦后甜，小憩一下，讓我們來享受一下 Flex 開發帶來的樂趣吧！
回頁首
Flex 的 Hello World ！
創建項目
打開 Flex Builder, 如圖 4 所示，新建一個 Flex 項目：
圖 4：新建 Flex 項目
在圖 5 所示設置頁面中，我們選擇項目類型是 Web application，關于 AIR 類型應用的基礎知識可參考 developerWorks 上的另一篇文章《使用 Adobe AIR 和 Dojo 開發基于 Ajax 的 Mashup 應用》。 Application server type 我們以 J2EE 為例，并且不要鉤選 Use remote object access service, 關于這些高級內容，我們將在后續的文章中陸續討論。最后我們使用 Eclipse Ganymede J2EE 版本內置的 WTP(Web Tools Platform) 來創建一個后端使用 Java 前端使用 Flex 的 RIA 項目。在默認設置下，src 是 Java 代碼的源代碼文件夾。
圖 5：設置 Flex 項目
在后續的設置頁面中，我們配置項目運行時的 J2EE server 為我們在安裝配置開發環境部分中配置的 Tomcat6 如圖 6 所示：
圖 6：配置運行時 J2EE Server
點擊 Next，在下一個頁面中一切都按照默認設置即可。如圖 7 所示，Main source folder 是設置默認的 flex 代碼 ( 包括 mxml 和 Action script) 的源文件夾，Main application file 是項目默認的主應用。 Out folder URL 是項目運行在我們配置的 Tomcat 上時的 URL.
圖 7：其他屬性設置
一切完成之后，我們來看看項目的組成結構，如圖 8 所示：flex_src 中是默認的 flex 源碼位置，flex_libs 則是存放 flex 其他第三方包的默認路徑。類似于 web 應用的 lib 文件夾。 src 是 java 代碼位置。 WebContent 文件夾的結構和普通由 WTP 建立的 Web Project 的結構完全相同。在默認的輸出路徑 bin-debug 文件夾中，我們可以看出 Flex builder 自動生成的 FlexSample.mxml 文件已經被自動編譯成 FlexSample.swf 文件。
圖 8：Flex 項目結構
接下來，我們在新創建的項目上增加一點內容并讓它運行起來：雙擊 FlexSample.mxml, 在其中添加一個最基本的 Flex 組件 :Label, 并且在該應用初始化的時候調用 init() 方法。我們在 init() 方法中用 trace() 語句輸出調試信息。代碼如下清單 1 所示：
清單 1：FlexSample.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
initialize="init()">
<mx:Script>
<![CDATA[
private function init():void
{
var i:int = 0;
i++;
trace("i="+i);
}
]]>
</mx:Script>
<mx:Label text="Hello World!" />
</mx:Application>
|
運行、調試以及部署
現在，終于到了讓我們的項目運行的時候了 ! 右鍵點擊項目 ->Run As->Run On Server 如圖 9 所示：接下來的幾個頁面選擇默認即可，這時大家我們可以看到項目會被部署到我們配置的 Tomcat6 上去。并且 Flex Builder 會自動打開一個我們剛才配置的外部 FireFox 窗口。
圖 9：運行項目
但可能令您遺憾的是 Flex Builder 自動打開的 FireFox 窗口打開的 URL: http://localhost:8080/FlexSample/ 卻什么也沒有。別著急，還剩下最后一步：
如圖 10 所示：右鍵點擊我們要運行的 FlexSample.mxml > Run As > Flex Application
圖 10：運行 mxml
如果不出意外的話，您應該會看到下面的界面，Flash Tracer 插件輸出了我們用 trace() 語句輸出的 debug 信息，標簽的 Hello World ！也被顯示到了界面上。同樣，打開 FireFox 的 HttpFox 插件，我們也可以看到在運行時 FlexSample.swf 被載入。
圖 11：運行后的界面
如果我們希望像調試 Java 代碼那樣，在運行時觀察變量的值怎么辦呢？首先我們像在 Java 代碼中設置斷點一樣給我們的 Action Script 代碼增加斷點。如圖 12 所示：
圖 12：在 Action Script 代碼中設置斷點
然后選擇我們的 FlexSample.mxml 右鍵選擇調試運行。如圖 13 所示：
圖 13：調試方式運行 flex
然后我們隨提示切換到 Flex 的調試視圖，就會看到我們可以像 Java 調試模式那樣輕松的調試 Flex 代碼。如圖 14 所示：
圖 14：Flex Builder 調試視圖
利用 WTP，我們可以將項目 export 成一個標準的 war file. 將導出的 war 文件放到 Tomcat 的 webapps 目錄或者其他 web 服務器的相應目錄下就可以當作一個標準的 web 應用來部署運行。
到此為止，我們應該慶祝一下我們已經邁入了 Flex 的大門了！我們已經編譯出了我們自己的 swf 文件，并且運行在服務器上了。熟悉了這個開發過程之后，讓我們乘勝前進，結合一個小例子學習一下 Flex 的編程基礎知識吧！
回頁首
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：項目運行結果
回頁首
結束語
Flex 作為 RIA 的新技術，對傳統 web 開發技術有繼承也有發展。這篇文作為入門文，主要作用是幫助大家掌握 Flex 的開發環境、開發方式、開發調試部署的流程以及 Flex 的基本編程知識。但 Flex 除了國際化、Unit 測試、Ant 編譯等傳統問題之外，作為新技術 Flex 還有很多不同以往的地方，比如模塊開發，RSL(Runtime Shared Libraries), Shared object、和 JavaScript 交互以及它的 MVC 框架 cairngorm，遠程調用和消息傳遞框架 BlazeDS 等。所有這些問題都是值得我們進行后續討論的。
致謝
在本文完成之際，特別感謝 IBM 中國軟件開發中心 IM 開發團隊我的同事們在工作和學習中給我的巨大幫助！
參考資料
學習
獲得產品和技術
- 下載 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 開發領域有著多年開發經驗，喜歡關注新技術。他畢業于中國科技大學，并擁有碩士學位。