![]() |
Flash Builder 4 正式版下載:http://subject.csdn.net/adobedownload/index.html
級(jí)別: 初級(jí)
劉 慶 (qlcdl@cn.ibm.com), 軟件工程師, IBM 軟件開(kāi)發(fā)中心
2009 年 1 月 07 日
本文介紹 Flex 開(kāi)發(fā)的基礎(chǔ)知識(shí):包括如何搭建開(kāi)發(fā)環(huán)境,如何調(diào)試,以及如何建立和部署簡(jiǎn)單的 Flex 項(xiàng)目。通過(guò)本文的學(xué)習(xí),可以為您將來(lái)深入地學(xué)習(xí) Flex 打下良好的基礎(chǔ)。
Flex 作為富 Internet 應(yīng)用(RIA)時(shí)代的新技術(shù)代表,自從 2007 年 Adobe 公司將其開(kāi)源以來(lái),F(xiàn)lex 就以前所未有的速度在成長(zhǎng)。很多公司,包括 IBM 都紛紛加入了 Flex 開(kāi)發(fā)的陣營(yíng)當(dāng)中。很多開(kāi)發(fā)人員也按捺不住 Flex 的“誘惑”而準(zhǔn)備從事 Flex 開(kāi)發(fā)。本文主要講述 Flex 開(kāi)發(fā)的基礎(chǔ)知識(shí),主要是關(guān)于開(kāi)發(fā)環(huán)境的搭建,以及介紹簡(jiǎn)單的 Flex 項(xiàng)目創(chuàng)建、編碼、調(diào)試以及部署的過(guò)程和 Flex 編程的基本知識(shí)。通過(guò)本文的學(xué)習(xí),您將會(huì)學(xué)習(xí)如何搭建 Flex 基本的開(kāi)發(fā)環(huán)境以及開(kāi)發(fā)、調(diào)試和部署方面的基礎(chǔ)知識(shí)。為您以后深入系統(tǒng)的學(xué)習(xí) Flex 打下良好的基礎(chǔ)。
要學(xué)習(xí)本文,您需要有一定的 Web 編程經(jīng)驗(yàn)和 Eclipse FireFox 使用經(jīng)驗(yàn)。
本文所有示例均在 Windows XP SP3 系統(tǒng)中測(cè)試完成。您需要一臺(tái)能流暢運(yùn)行 Windows XP 系統(tǒng)的機(jī)器,除此之外您還需要一些工具才能試用本文中的代碼。所有這些工具都可以免費(fèi)下載(參見(jiàn) 參考資源):
![]() ![]() |
![]()
|
接下來(lái)我們便迫不及待的開(kāi)始吧!首先搭建我們的開(kāi)發(fā)環(huán)境,為了減少因?yàn)榄h(huán)境不一致而引起的問(wèn)題,建議讀者使用與本文相同的軟件版本:
![]() |
|
大家知道 Flex 代碼編譯后是一個(gè) SWF 文件,運(yùn)行在 Flash Player 中,要想看到 SWF 文件在運(yùn)行時(shí)輸出的一些調(diào)試信息是比較困難的。所以在安裝好基本的軟件之后,我們要安裝一些便于我們調(diào)試 Flex 的 FireFox 插件:
下載 并安裝 debug 版本的 FireFox Flash Player 插件 ( 本文使用的版本為 Flash Player10)
打開(kāi) FireFox,到 FireFox 的 擴(kuò)展組件站點(diǎn) 上搜索并安裝 HttpFox,F(xiàn)lashTracer,Cache Status 三個(gè)插件,如圖 1 所示。
圖 1:開(kāi)發(fā)調(diào)試需要的 FireFox 插件
![]() |
|
在安裝了 Debug 版本的 Flash Player 之后,F(xiàn)lash Tracer 能顯示您在程序中用 trace() 語(yǔ)句輸出的調(diào)試信息,HttpFox 插件不僅能查看 HTTP 通信的過(guò)程和數(shù)據(jù),還能看到哪些內(nèi)容是從 Cache 里面讀取的。另外,Cache Status 插件可以讓我們方便的管理緩存。在 Flex 開(kāi)發(fā)過(guò)程中,往往需要先清除掉緩存中的內(nèi)容,才能看到新改動(dòng)的效果。
接下來(lái)我們打開(kāi) Flex Builder, 在菜單Window>Preferences>Server>Runtime Environment中設(shè)置我們的 Tomcat6 以及在菜單Window>Preferences>General>Web Browser中設(shè)置瀏覽器為外部瀏覽器 FireFox,如圖 2 和圖 3 所示:
到此為止,我們的開(kāi)發(fā)環(huán)境算是徹底搭建完畢,可以看出這個(gè)過(guò)程并不算是特別簡(jiǎn)單。別急,先苦后甜,小憩一下,讓我們來(lái)享受一下 Flex 開(kāi)發(fā)帶來(lái)的樂(lè)趣吧!
![]() ![]() |
![]()
|
打開(kāi) Flex Builder, 如圖 4 所示,新建一個(gè) Flex 項(xiàng)目:
在圖 5 所示設(shè)置頁(yè)面中,我們選擇項(xiàng)目類型是 Web application,關(guān)于 AIR 類型應(yīng)用的基礎(chǔ)知識(shí)可參考 developerWorks 上的另一篇文章《使用 Adobe AIR 和 Dojo 開(kāi)發(fā)基于 Ajax 的 Mashup 應(yīng)用》。 Application server type 我們以 J2EE 為例,并且不要鉤選 Use remote object access service, 關(guān)于這些高級(jí)內(nèi)容,我們將在后續(xù)的文章中陸續(xù)討論。最后我們使用 Eclipse Ganymede J2EE 版本內(nèi)置的 WTP(Web Tools Platform) 來(lái)創(chuàng)建一個(gè)后端使用 Java 前端使用 Flex 的 RIA 項(xiàng)目。在默認(rèn)設(shè)置下,src 是 Java 代碼的源代碼文件夾。
在后續(xù)的設(shè)置頁(yè)面中,我們配置項(xiàng)目運(yùn)行時(shí)的 J2EE server 為我們?cè)诎惭b配置開(kāi)發(fā)環(huán)境部分中配置的 Tomcat6 如圖 6 所示:
點(diǎn)擊 Next,在下一個(gè)頁(yè)面中一切都按照默認(rèn)設(shè)置即可。如圖 7 所示,Main source folder 是設(shè)置默認(rèn)的 flex 代碼 ( 包括 mxml 和 Action script) 的源文件夾,Main application file 是項(xiàng)目默認(rèn)的主應(yīng)用。 Out folder URL 是項(xiàng)目運(yùn)行在我們配置的 Tomcat 上時(shí)的 URL.
一切完成之后,我們來(lái)看看項(xiàng)目的組成結(jié)構(gòu),如圖 8 所示:flex_src 中是默認(rèn)的 flex 源碼位置,flex_libs 則是存放 flex 其他第三方包的默認(rèn)路徑。類似于 web 應(yīng)用的 lib 文件夾。 src 是 java 代碼位置。 WebContent 文件夾的結(jié)構(gòu)和普通由 WTP 建立的 Web Project 的結(jié)構(gòu)完全相同。在默認(rèn)的輸出路徑 bin-debug 文件夾中,我們可以看出 Flex builder 自動(dòng)生成的 FlexSample.mxml 文件已經(jīng)被自動(dòng)編譯成 FlexSample.swf 文件。
接下來(lái),我們?cè)谛聞?chuàng)建的項(xiàng)目上增加一點(diǎn)內(nèi)容并讓它運(yùn)行起來(lái):雙擊 FlexSample.mxml, 在其中添加一個(gè)最基本的 Flex 組件 :Label, 并且在該應(yīng)用初始化的時(shí)候調(diào)用 init() 方法。我們?cè)?init() 方法中用 trace() 語(yǔ)句輸出調(diào)試信息。代碼如下清單 1 所示:
|
現(xiàn)在,終于到了讓我們的項(xiàng)目運(yùn)行的時(shí)候了 ! 右鍵點(diǎn)擊項(xiàng)目 ->Run As->Run On Server 如圖 9 所示:接下來(lái)的幾個(gè)頁(yè)面選擇默認(rèn)即可,這時(shí)大家我們可以看到項(xiàng)目會(huì)被部署到我們配置的 Tomcat6 上去。并且 Flex Builder 會(huì)自動(dòng)打開(kāi)一個(gè)我們剛才配置的外部 FireFox 窗口。
但可能令您遺憾的是 Flex Builder 自動(dòng)打開(kāi)的 FireFox 窗口打開(kāi)的 URL: http://localhost:8080/FlexSample/ 卻什么也沒(méi)有。別著急,還剩下最后一步:
如圖 10 所示:右鍵點(diǎn)擊我們要運(yùn)行的 FlexSample.mxml > Run As > Flex Application
如果不出意外的話,您應(yīng)該會(huì)看到下面的界面,F(xiàn)lash Tracer 插件輸出了我們用 trace() 語(yǔ)句輸出的 debug 信息,標(biāo)簽的 Hello World !也被顯示到了界面上。同樣,打開(kāi) FireFox 的 HttpFox 插件,我們也可以看到在運(yùn)行時(shí) FlexSample.swf 被載入。
如果我們希望像調(diào)試 Java 代碼那樣,在運(yùn)行時(shí)觀察變量的值怎么辦呢?首先我們像在 Java 代碼中設(shè)置斷點(diǎn)一樣給我們的 Action Script 代碼增加斷點(diǎn)。如圖 12 所示:
然后選擇我們的 FlexSample.mxml 右鍵選擇調(diào)試運(yùn)行。如圖 13 所示:
然后我們隨提示切換到 Flex 的調(diào)試視圖,就會(huì)看到我們可以像 Java 調(diào)試模式那樣輕松的調(diào)試 Flex 代碼。如圖 14 所示:
利用 WTP,我們可以將項(xiàng)目 export 成一個(gè)標(biāo)準(zhǔn)的 war file. 將導(dǎo)出的 war 文件放到 Tomcat 的 webapps 目錄或者其他 web 服務(wù)器的相應(yīng)目錄下就可以當(dāng)作一個(gè)標(biāo)準(zhǔn)的 web 應(yīng)用來(lái)部署運(yùn)行。
到此為止,我們應(yīng)該慶祝一下我們已經(jīng)邁入了 Flex 的大門(mén)了!我們已經(jīng)編譯出了我們自己的 swf 文件,并且運(yùn)行在服務(wù)器上了。熟悉了這個(gè)開(kāi)發(fā)過(guò)程之后,讓我們乘勝前進(jìn),結(jié)合一個(gè)小例子學(xué)習(xí)一下 Flex 的編程基礎(chǔ)知識(shí)吧!
![]() ![]() |
![]()
|
在上面 Hello World 的例子中我們可以看出,就像在 HTML 中嵌入 JavaScript 那樣,我們可以在 mxml 里面嵌入 Action Script 代碼來(lái)實(shí)現(xiàn)業(yè)務(wù)邏輯。沒(méi)錯(cuò)!如果您把 Flex 中 mxml 和 Action Script 的關(guān)系理解為 Html 和 JavaScript 的關(guān)系,您會(huì)忽然發(fā)現(xiàn)您對(duì) Flex 變的如此熟悉!
Action Script 語(yǔ)言是面向?qū)ο蟮哪_本語(yǔ)言,它連編寫(xiě)方式都和 JavaScript 非常的相似。除了可以嵌套在 mxml 里面之外,它還可以像 JavaScript 寫(xiě)在單獨(dú)的 .js 文件里面那樣寫(xiě)在單獨(dú)的 .as 文件里面,然后在 mxml 里面引入它。
下面我們新建一個(gè) Action Script 的類 J2eeServer.as 如清單 2 所示:
|
在這個(gè)類定義里面,熟悉 Java 的開(kāi)發(fā)人員可以看出其編碼規(guī)范和 Java 非常類似。在其中我們定義了一個(gè) sendRequest() 方法, 使用 HTTPService 對(duì)象發(fā)起一個(gè) http 的 get 請(qǐng)求 , 并且對(duì)于不同的返回結(jié)果我們定義了 onSuccess() 和 onFault() 兩個(gè)方法去處理。在這兩個(gè)結(jié)果處理方法中,我們將事件 dispatch 出去。
在 J2eeServer.as 中,我們通過(guò) Action Script 發(fā)出 http 請(qǐng)求,現(xiàn)在我們定義一個(gè)服務(wù)器端的 servlet 來(lái)處理該請(qǐng)求。如清單 3 所示:
|
和普通 web 應(yīng)用一樣配置 web.xml, 如清單 4
|
從 J2eeServer.as 中我們依稀可以看出 Flex 事件驅(qū)動(dòng)的影子。的確,F(xiàn)lex 的業(yè)務(wù)流程大多是靠事件來(lái)驅(qū)動(dòng)的。某一個(gè)方法結(jié)束后,dispatch 出去一個(gè)事件。事件的監(jiān)聽(tīng)者監(jiān)聽(tīng)到這個(gè)事件后就會(huì)采取相應(yīng)的動(dòng)作來(lái)處理事件。如清單 5 所示:我們?cè)?init() 方法中進(jìn)行了事件綁定,綁定了兩個(gè)監(jiān)聽(tīng)方法 successHandler () 和 errorHandler () 到 J2eeServer 上。當(dāng) J2eeServer 完成和服務(wù)器端 servlet 通信 dispatch 出相應(yīng)的事件后,兩個(gè)監(jiān)聽(tīng)方法便會(huì)監(jiān)聽(tīng)到相應(yīng)的事件并進(jìn)行處理。
Flex 的另外一個(gè)重要的特點(diǎn)就是支持?jǐn)?shù)據(jù)綁定,在另一篇文章《使用 Eclipse 和 JavaFX 開(kāi)發(fā) Mashup 應(yīng)用》中 我們?cè)榻B了 JavaFx 的數(shù)據(jù)綁定特性,同樣 Flex 也支持?jǐn)?shù)據(jù)綁定。當(dāng)數(shù)據(jù)源被綁定到另外一個(gè)對(duì)象的某屬性上時(shí),數(shù)據(jù)源的數(shù)據(jù)如果發(fā)生變化,開(kāi)發(fā)人員不需要寫(xiě)額外的代碼該對(duì)象的屬性值就可以相應(yīng)的變化。如 清單 5 中所示:如果要進(jìn)行數(shù)據(jù)綁定,則要先定義一個(gè)可綁定的數(shù)據(jù)源,例如我們?cè)谧兞?code> private var
serverResponse:String =
""
;
的 上面設(shè)置 [Bindable] 屬性,表示其為可綁定變量。然后我們?cè)?resultLable 中使用花括號(hào) {serverResponse
} 將變量serverResponse
綁定到 resultLable 的 text 屬性上。
|
最終項(xiàng)目的文件結(jié)構(gòu)如圖 15 所示:
運(yùn)行項(xiàng)目,我們可以看到當(dāng)我們改變下拉框的值的時(shí)候,會(huì)觸發(fā) localeComboxChangeHandler() 函數(shù)調(diào)用 J2eeServer 的 sendRequest() 方法將選擇的 locale 值發(fā)送給服務(wù)器端的 servlet,并且在結(jié)果返回后,將從服務(wù)器端得到的 response 顯示在 resultLable 上。如圖 16 所示:
![]() ![]() |
![]()
|
Flex 作為 RIA 的新技術(shù),對(duì)傳統(tǒng) web 開(kāi)發(fā)技術(shù)有繼承也有發(fā)展。這篇文作為入門(mén)文,主要作用是幫助大家掌握 Flex 的開(kāi)發(fā)環(huán)境、開(kāi)發(fā)方式、開(kāi)發(fā)調(diào)試部署的流程以及 Flex 的基本編程知識(shí)。但 Flex 除了國(guó)際化、Unit 測(cè)試、Ant 編譯等傳統(tǒng)問(wèn)題之外,作為新技術(shù) Flex 還有很多不同以往的地方,比如模塊開(kāi)發(fā),RSL(Runtime Shared Libraries), Shared object、和 JavaScript 交互以及它的 MVC 框架 cairngorm,遠(yuǎn)程調(diào)用和消息傳遞框架 BlazeDS 等。所有這些問(wèn)題都是值得我們進(jìn)行后續(xù)討論的。
在本文完成之際,特別感謝 IBM 中國(guó)軟件開(kāi)發(fā)中心 IM 開(kāi)發(fā)團(tuán)隊(duì)我的同事們?cè)诠ぷ骱蛯W(xué)習(xí)中給我的巨大幫助!
劉慶,目前在 IBM 軟件開(kāi)發(fā)中心(IBM CSDL)IM 開(kāi)發(fā)團(tuán)隊(duì)擔(dān)任開(kāi)發(fā)工程師,擁有 IBM DB2 DBA 專業(yè)認(rèn)證,他在 J2EE 和 Web 開(kāi)發(fā)領(lǐng)域有著多年開(kāi)發(fā)經(jīng)驗(yàn),喜歡關(guān)注新技術(shù)。他畢業(yè)于中國(guó)科技大學(xué),并擁有碩士學(xué)位。
本文來(lái)自:http://blog.csdn.net/xinmengqc/archive/2010/05/01/5544565.aspx
聯(lián)系客服