瞭解Flex SDK系列教程(1.Ant和FlexTask)
轉:http://www.riameeting.com/node/1009
推薦兩篇教程
http://www.adobe.com/devnet/flex/articles/flex_ant_pt1.html
http://www.adobe.com/devnet/flex/articles/flex_ant_pt2.html
中文版本的只找到了Part1 http://www.adobe.com/cn/devnet/flex/articles/flex_ant_pt1.html
基於Ant,還是會有很多重複的構建過程,對於消除重複,Apache有更好的解決方案:Maven,Maven實際上是一個專案管理工具,而不簡單是構建工具。關於Maven,RIAMeeting之前有過一次線上課程(http://www.riameeting.com/node/971),還不太瞭解Maven的朋友,可以看一下。
宣告:本文為RIAMeeting原創文章,您可以自由轉載,但請務必說明文章來源並保留原文連結,謝謝!
最近Flex/AS開發者的大事,莫過於Adobe釋出了Flash Builder 4.5 (包含Flex SDK 4.5,點選這裡檢視新聞報道) 和 Adobe CS5.5(下載地址請登入Adobe官網,這裡是相關學習資料)。新版IDE的重點是針對移動應用開發的支援(Android,iOS等等),不過,這些不是文字要探討的內容。讓我們從Flex SDK著手,瞭解一些Flex的內在機制和對企業級開發的支援,這也有助於我們更好的理解Flex這門技術。
獲取Flex SDK
首先,從哪裡可以獲取Flex SDK?最簡單最直接的方式,就是安裝Flash Builder(以下簡稱FB),當您安裝完畢,可以開啟FB的安裝位置,目錄sdks下面,就是目前比較常用的Flex SDK版本。具體位置因您的安裝選擇而異,比如筆者的路徑是:D:\Program Files (x86)\Adobe\Adobe Flash Builder 4.5\sdks。因為筆者安裝的是FB 4.5,所以目錄中實際上包含了兩個版本的SDK:3.6和4.5,如圖所示:
如果您安裝的是FB4.0,則看到的最新SDK版本應該是4.0或4.1。而那個比較老的3.6版本,主要是為了相容之前的Flex3專案(如果您有比較老版本的專案,而且不打算做程式碼變更,那麼3.6這個版本的SDK是必須的)。本文的探討將以最新的SDK,也就是4.5為準。
開啟SDK 4.5這個目錄,讓我們看看SDK中都包含了哪些內容:
- ant 包含Flex對Ant的支援庫,JAR和Java原始碼都有,方便我們基於Ant完成對專案的構建
- asdoc 基於ASDOC我們可以很方便的生成程式碼說明文件,這個目錄則包含了對ASDOC的模板支援(呼叫asdoc的時候,所依賴的HTML模板檔案就存放在這個目錄),以及一個用於Ant構建的示意XML配置檔案,仔細瀏覽這個目錄下的檔案,就可以對ASDOC有更好的瞭解。
- bin 按照慣例,我們基本也能猜出這個目錄下是什麼,沒錯,就是Flex SDK中包含的工具集(編譯工具,庫打包工具,文件生成工具,以及優化工具等等,這些可都是Flex開發所必須的利器),這些工具的具體用法,我們會在後面的文章中介紹。建議您將這個路徑配置到系統使用者的PATH中,方便通過命令列呼叫相應的工具。
- frameworks 這個也是重中之重,包含了Flex框架的核心原始碼(您應該也已經瞭解到,Flex是基於AS3的一個框架,其底層程式碼均是由AS3編寫的(注:不包含工具集,工具是Java編寫)),當您在Flex程式設計中有疑惑,看一眼原始碼或許會讓您茅塞頓開。
- include 包含了一個用於編寫ActionScript擴充套件的C++標頭檔案:FlashRuntimeExtensions.h,如果您基於AIR做一些嵌入式應用(比如一個電視機),需要實現換臺等功能,那就要用C++實現一些ActionScript的擴充套件。
- install 包含了用於移動開發的Android USB驅動程式
- lib 開發和編譯Flex應用所依賴的類庫,開啟這個目錄您就能發現很多的JAR檔案,比如mxmlc.jar,另外您可能已經注意到還有mxmlc_zh_CN.jar,顯然這些庫大都實現了本地化,方便我們的開發和除錯。
- runtimes 包含執行時支援,但沒有Flash Player,只有AIR,包括AIR for Android的APK檔案
- samples 一些例項檔案,包括用於AIR線上無縫安裝的badge,和一些Flex主題。
- templates 包含一些模板檔案,比如用於AIR應用描述的XML約束定義文件,swfobject的示例程式碼等等
因為Flex框架是開源的,所以我們也可以不安裝Flash Builder,直接下載Flex的SDK。官方網站是:
http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK
裡面會有Flex SDK各個時期的版本,如無特殊需求,下載最新的正式版本即可。
這裡插播一段,Flex各個組成部分之間的開源關係(一些朋友可能會對這個方面有疑問)
- Flex框架:開源,包含Flex的類庫(UI庫,工具庫等,基於AS3),和語言(MXML和Action Script3)
- Flex SDK:包含開源的Flex框架和工具(編譯工具,優化工具等等,這些工具免費使用,但不開源)
- Flash Builder:商業IDE,包含Flex SDK,和提高開發者生產力的工具支援
基於字母排序,我們就從Ant著手,來了解Flex SDK。
Flex對Ant的支援
Ant的全稱是Apache Ant,是Apache基金會的一個子專案。它的設計目標是用於完成Java開發中的自動構建。如果您是Java開發者,那麼Ant對於您並不陌生,實際上Ant在Java社群中得到了極為廣泛的應用。如果您並不是從Java開發轉向到Flex開發,還沒有過多接觸過Ant,那麼沒關係,Ant的概念和要解決的問題一定會讓您激動的熱淚盈眶(有點誇張,呵呵),因為開發領域很多概念都是相似的,Java開發中遇到的問題,我們Flex開發者也會遇到很多,比如自動構建,在一個有著N多模組,N處原始碼,構建過程複雜的Flex專案開發中,依賴人力手工構建專案非常不現實(機械重複且枯燥無味的過程,相信哪位開發人員都會避之唯恐不及,而且對於人力是非常大的浪費),而通過使用Ant,我們可以將這些工作交給機器來做,機器最適合乾的就是這些程式固定,順次執行的工作,而且不辭辛苦,又快又好:)
如果你想先詳細瞭解一下Ant,請訪問Baidu文庫中對Ant的定義。這裡不再過多介紹。
下面我們來著重瞭解一下Flex對Ant的支援情況。開啟Flex SDK下的Ant目錄,會看到下面的檔案結構:
lib中包含了Flex對Ant的任務支援庫:flexTasks.jar,src目錄中包含了flexTasks的Java原始碼,build.xml則是用於構建flexTasks本身的配置檔案(如果您修改了flexTask的Java原始碼,可以用這個配置檔案,重新編譯,並打包到flexTasks.jar)。
README.txt這個檔案則簡單描述瞭如何使用flexTask,筆者已經將它翻譯為中文,即README_CN.txt,您可以從本文的頁面底部的下載區下載這個檔案。
開啟MxmlcTask.java,我們可以看到,這就是對mxmlc工具的任務封裝,方便我們在Ant中基於配置檔案來呼叫mxmlc實現對Flex專案的編譯。
下面我們通過一個簡單的演示,來了解使用Ant編譯專案的過程:
1. 安裝
當然,首先您得安裝Ant,並完成必要的配置(新增路徑到系統使用者Path)。下載地址 | 安裝教程
安裝完畢後,開啟CMD視窗,執行ant -version,如果能看到正確的輸入資訊,就代表Ant配置成功了。
然後,將flexTasks.jar這個檔案放到您的Ant安裝目錄中的lib目錄中。雖然也可以採取將JAR檔案的地址作為一個引數傳遞給Ant的方法,但為了方便起見,推薦直接拷貝flexTasks.jar的方式。
另外,注意您想使用的構建工具(比如mxmlc或asc)必須包含在您的PATH設定裡。將sdk/bin這個目錄也配置到Path中,您的Path設定應該類似於下面的:
- C :\Program Files (x86 )\Java\jdk1.6.0_25\bin;D :\Program Files\Adobe\Adobe Flash Builder 4.5\sdks\4.5.0\bin;C :\ant\bin
請輸入下面的命令到CMD視窗:mxmlc -version,如果有正確的輸出,代表Flex SDK的路徑配置成功。
2. 測試
首先到您的磁碟便於尋找的位置,建立一個測試目錄,比如命名為ant_test,裡面建立2個目錄:src和bin。src用於放置Flex原始碼,bin用於放置輸出的SWF檔案。然後建立一個MXML檔案(隨便一個文字編輯工具就可以),命名(比如Main.mxml),放到src下面。程式碼如下,非常簡單,顯示一個按鈕:
- <?xml version= "1.0" encoding= "utf-8" ?>
- <s :Application xmlns :fx= "http://ns.adobe.com/mxml/2009"
- xmlns :s= "library://ns.adobe.com/flex/spark"
- xmlns :mx= "library://ns.adobe.com/flex/mx" minWidth= "955" minHeight= "600" >
- <s :Button x= "52" y= "25" label= "按鈕" />
- </s :Application >
然後為了檢測ASDoc的生成效果,您可以在src目錄中隨意新增一個ActionScript的類,寫一些基於ASDoc規則的註釋,比如:
- package
- {
- import flash.display. Sprite;
- /**
- * Test Class
- * <p>Hi Neo,come here <strong>hello</strong></p>
- * @author NeoGuo
- *
- */
- public class TestClass extends Sprite
- {
- /**
- * UBB Code
- */
- public var ubb : String;
- private var _bbb : String;
- public function TestClass (bbb : String= "1" )
- {
- super ( );
- this._bbb = bbb;
- }
- public function get bbb ( ) : String
- {
- return _bbb;
- }
- public function set bbb ( value : String ) : void
- {
- this._bbb = value;
- }
- }
- }
然後建立build.properties,按照慣例,這是用Ant的變數配置檔案(注意放在src的上一層,即ant_test目錄下),然後寫入以下的配置引數:
- # 設定到您的Flex SDK的所在路徑
- FLEX_HOME=D :/Program Files (x86 ) /Adobe /Adobe Flash Builder 4.5 /sdks /4.5.0
- # 定位到您的專案原始碼的位置
- # {$basedir } 是Ant預設支援的變數
- SOURCE_DIR =$ {basedir } /src
- # 定位到您的Lib路徑,如果存在的話
- LIBS_DIR =$ {basedir } /libs
- # 設定SWF的輸出位置
- OUTPUT_DIR = $ {basedir } /bin
- SDK_VERSION = 4.5.0.20967
- LOCALE = en_US
然後開始編寫build.xml,如下所示,我在主要部分均做了註解:
- <?xml version= "1.0" encoding= "utf-8" ?>
- <project name= "test-flex" default= "build" >
- <!--引用屬性配置檔案 -->
- <property file= "build.properties" />
- <!--定義任務的庫引用路徑,比如下面第 25行我們用到了mxmlc,必須讓Ant知道去哪裡尋找這個任務的定義,包括類名稱和classpath。這裡我們配置了 4個,實際上用到了 3個,即呼叫mxmlc完成編譯,呼叫html -wrapper對SWF進行HTML包裹,呼叫asdoc生成程式碼文件。compc是用來編譯庫 (SWC )檔案,這裡我們沒有用到。 -->
- <taskdef name= "mxmlc" classname= "flex.ant.MxmlcTask" classpath= "${FLEX_HOME}/ant/lib/flexTasks.jar" />
- <taskdef name= "compc" classname= "flex.ant.CompcTask" classpath= "${FLEX_HOME}/ant/lib/flexTasks.jar" />
- <taskdef name= "html-wrapper" classname= "flex.ant.HtmlWrapperTask" classpath= "${FLEX_HOME}/ant/lib/flexTasks.jar" />
- <taskdef name= "asdoc" classname= "flex.ant.AsDocTask" classpath= "${FLEX_HOME}/ant/lib/flexTasks.jar" />
- <!--完成當前構建任務所需的 4個呼叫,首先是清理,如果bin下面有檔案,刪除掉;然後是編譯,HTML包裹,和ASDoc文件生成 -->
- <target name= "build" >
- <antcall target= "clean" />
- <antcall target= "compile" />
- <antcall target= "wrapper" />
- <antcall target= "asdoc" />
- </target >
- <!--執行清理 -->
- <target name= "clean" >
- <delete includeemptydirs= "true" >
- <fileset dir= "${OUTPUT_DIR}" includes= "**/*" />
- </delete >
- </target >
- <!--執行編譯,注意debug引數,預設是 false,如果您需要開啟Debug功能,可以將它設定為 true (會增大檔案體積 ) -->
- <target name= "compile" >
- <mxmlc
- file= "${SOURCE_DIR}/Main.mxml"
- output= "${OUTPUT_DIR}/Main.swf"
- locale= "${LOCALE}"
- static -rsls= "false"
- accessible= "true"
- debug= "false"
- >
- <!--載入Flex配置檔案,如果您有特殊需求(比如要保留自定義的Metadata標籤,則可以設定自己定義的Flex配置檔案) -->
- <load -config filename= "${FLEX_HOME}/frameworks/flex-config.xml" />
- <!--設定原始碼位置 -->
- <source -path path -element= "${SOURCE_DIR}" />
- <!--下面是對執行時共享庫RSL的配置,不是必須,如果您不採用RSL機制,可以刪除下面的定義;如果您沒用到一些RSL,可以刪除,只保留核心的framework, spark等引用 -->
- <runtime -shared -library -path path -element= "${FLEX_HOME}/frameworks/libs/framework.swc" >
- <url rsl - url= "http://fpdownload.adobe.com/pub/swz/flex/${SDK_VERSION}/framework_${SDK_VERSION}.swz" policy -file - url= "http://fpdownload.adobe.com/pub/swz/crossdomain.xml" />
- <url rsl - url= "framework_${SDK_VERSION}.swz" policy -file - url= "" />
- </runtime -shared -library -path >
- <runtime -shared -library -path path -element= "${FLEX_HOME}/frameworks/libs/textLayout.swc" >
- <url rsl - url= "http://fpdownload.adobe.com/pub/swz/tlf/2.0.0.232/textLayout_2.0.0.232.swz" policy -file - url= "http://fpdownload.adobe.com/pub/swz/crossdomain.xml" />
- <url rsl - url= "textLayout_2.0.0.232.swz" policy -file - url= "" />
- </runtime -shared -library -path >
- <runtime -shared -library -path path -element= "${FLEX_HOME}/frameworks/libs/mx/mx.swc" >
- <url rsl - url= "http://fpdownload.adobe.com/pub/swz/flex/${SDK_VERSION}/mx_${SDK_VERSION}.swz" policy -file - url= "http://fpdownload.adobe.com/pub/swz/crossdomain.xml" />
- <url rsl - url= "mx_${SDK_VERSION}.swz" policy -file - url= "" />
- </runtime -shared -library -path >
- <library -path file= "${FLEX_HOME}/frameworks/libs/flash-integration.swc" append= "true" />
- <runtime -shared -library -path path -element= "${FLEX_HOME}/frameworks/libs/rpc.swc" >
- <url rsl - url= "http://fpdownload.adobe.com/pub/swz/flex/${SDK_VERSION}/rpc_${SDK_VERSION}.swz" policy -file - url= "http://fpdownload.adobe.com/pub/swz/crossdomain.xml" />
- <url rsl - url= "rpc_${SDK_VERSION}.swz" policy -file - url= "" />
- </runtime -shared -library -path >
- <runtime -shared -library -path path -element= "${FLEX_HOME}/frameworks/libs/charts.swc" >
- <url rsl - url= "http://fpdownload.adobe.com/pub/swz/flex/${SDK_VERSION}/charts_${SDK_VERSION}.swz" policy -file - url= "http://fpdownload.adobe.com/pub/swz/crossdomain.xml" />
- <url rsl - url= "charts_${SDK_VERSION}.swz" policy -file - url= "" />
- </runtime -shared -library -path >
- <runtime -shared -library -path path -element= "${FLEX_HOME}/frameworks/libs/spark.swc" >
- <url rsl - url= "http://fpdownload.adobe.com/pub/swz/flex/${SDK_VERSION}/spark_${SDK_VERSION}.swz" policy -file - url= "http://fpdownload.adobe.com/pub/swz/crossdomain.xml" />
- <url rsl - url= "spark_${SDK_VERSION}.swz" policy -file - url= "" />
- </runtime -shared -library -path >
- <library -path file= "${FLEX_HOME}/frameworks/libs/authoringsupport.swc" append= "true" />
- <runtime -shared -library -path path -element= "${FLEX_HOME}/frameworks/libs/advancedgrids.swc" >
- <url rsl - url= "http://fpdownload.adobe.com/pub/swz/flex/${SDK_VERSION}/advancedgrids_${SDK_VERSION}.swz" policy -file - url= "http://fpdownload.adobe.com/pub/swz/crossdomain.xml" />
- <url rsl - url= "advancedgrids_${SDK_VERSION}.swz" policy -file - url= "" />
- </runtime -shared -library -path >
- <runtime -shared -library -path path -element= "${FLEX_HOME}/frameworks/libs/sparkskins.swc" >
- <url rsl - url= "http://fpdownload.adobe.com/pub/swz/flex/${SDK_VERSION}/sparkskins_${SDK_VERSION}.swz" policy -file - url= "http://fpdownload.adobe.com/pub/swz/crossdomain.xml" />
- <url rsl - url= "sparkskins_${SDK_VERSION}.swz" policy -file - url= "" />
- </runtime -shared -library -path >
- <runtime -shared -library -path path -element= "${FLEX_HOME}/frameworks/libs/spark_dmv.swc" >
- <url rsl - url= "http://fpdownload.adobe.com/pub/swz/flex/${SDK_VERSION}/spark_dmv_${SDK_VERSION}.swz" policy -file - url= "http://fpdownload.adobe.com/pub/swz/crossdomain.xml" />
- <url rsl - url= "spark_dmv_${SDK_VERSION}.swz" policy -file - url= "" />
- </runtime -shared -library -path >
- <library -path file= "${FLEX_HOME}/frameworks/locale/${LOCALE}" append= "true" />
- <library -path file= "${LIBS_DIR}" append= "true" />
- <!--因為Flash Player內建的庫,不需要打包到SWF,所以對playerglobal採取了排除方式 -->
- <external -library -path file= "${FLEX_HOME}/frameworks/libs/player/10.2/playerglobal.swc" append= "true" />
- <library -path file= "${FLEX_HOME}/frameworks/libs/flash-integration.swc" append= "true" />
- <library -path file= "${FLEX_HOME}/frameworks/libs/authoringsupport.swc" append= "true" />
- <!--引用本地化的庫支援 -->
- <library -path dir= "${FLEX_HOME}/frameworks/locale/${LOCALE}" includes= "*" append= "true" />
- <!--當前專案的庫引用位置 -->
- <library -path dir= "${LIBS_DIR}" includes= "*" append= "true" />
- </mxmlc >
- <!--如果基於RSL,為了保證使用者在第一次使用RSL的時候,且連結不到Adobe伺服器的情況下,保證應用可以正常執行,需要將這些Adobe簽名的RSL移動到專案的部署目錄下面。具體說明請參閱RSL的相關文章。 -->
- <copy file= "${FLEX_HOME}/frameworks/rsls/spark_${SDK_VERSION}.swz" tofile= "${OUTPUT_DIR}/spark_${SDK_VERSION}.swz" />
- <copy file= "${FLEX_HOME}/frameworks/rsls/charts_${SDK_VERSION}.swz" tofile= "${OUTPUT_DIR}/charts_${SDK_VERSION}.swz" />
- <copy file= "${FLEX_HOME}/frameworks/rsls/sparkskins_${SDK_VERSION}.swz" tofile= "${OUTPUT_DIR}/sparkskins_${SDK_VERSION}.swz" />
- <copy file= "${FLEX_HOME}/frameworks/rsls/framework_${SDK_VERSION}.swz" tofile= "${OUTPUT_DIR}/framework_${SDK_VERSION}.swz" />
- <copy file= "${FLEX_HOME}/frameworks/rsls/mx_${SDK_VERSION}.swz" tofile= "${OUTPUT_DIR}/mx_${SDK_VERSION}.swz" />
- <copy file= "${FLEX_HOME}/frameworks/rsls/textLayout_2.0.0.232.swz" tofile= "${OUTPUT_DIR}/textLayout_2.0.0.232.swz" />
- <copy file= "${FLEX_HOME}/frameworks/rsls/spark_dmv_${SDK_VERSION}.swz" tofile= "${OUTPUT_DIR}/spark_dmv_${SDK_VERSION}.swz" />
- <copy file= "${FLEX_HOME}/frameworks/rsls/advancedgrids_${SDK_VERSION}.swz" tofile= "${OUTPUT_DIR}/advancedgrids_${SDK_VERSION}.swz" />
- <copy file= "${FLEX_HOME}/frameworks/rsls/rpc_${SDK_VERSION}.swz" tofile= "${OUTPUT_DIR}/rpc_${SDK_VERSION}.swz" />
- </target >
- <!--執行對SWF進行HTML包裹,可以傳遞一些引數 -->
- <target name= "wrapper" >
- <html -wrapper
- output= "${OUTPUT_DIR}"
- file= "Main.html"
- swf= "Main"
- history= "true"
- express -install= "true"
- version -detection= "true"
- version -major= "10"
- version -minor= "2"
- version -revision= "0"
- height= "100%"
- width= "100%"
- title= "Main"
- bgcolor= "white"
- />
- </target >
- <!--執行ASDoc文件生成 -->
- <target name= "asdoc" >
- <asdoc output= "${OUTPUT_DIR}/asdoc" lenient= "true" failonerror= "false" >
- <doc -sources path -element= "${SOURCE_DIR}" />
- <load -config filename= "${FLEX_HOME}/frameworks/flex-config.xml" />
- </asdoc >
- </target >
- </project >
然後就可以執行Ant了,如果您是Win7系統,在ant_test目錄上按住Shift點右鍵,選擇"在此處開啟命令視窗",然後輸出ant,回車,就可以看到整個執行過程
等待編譯完成,您可以檢視bin目錄下,生成了SWF檔案,HTML檔案,以及ASDoc文件等等。特別是ASDoc,對於團隊協作的專案開發很有意義。
附件中的TestAnt.zip就是本次演示的打包下載。
Flash Builder對於Ant的支援
之前的Flash Builder,做了很多精簡,移除了Eclipse的Java開發外掛,Ant也沒有保留,所以如果您使用的是Flash Builder4,是不能直接使用Ant的,需要下載Ant的外掛(參閱這篇教程)。這樣還是給開發者造成了很多不便的。所以,在Flash Builder 4.5這個版本里面,已經內建了Ant的開發外掛。如果您已經安裝了Flash Builder 4.5,請開啟,隨便某個專案上點選右鍵,屬性,構建器,然後在開啟的視窗中點選右側的新建按鈕,可以看到Ant Builder的選項。
預設情況下,專案只有一個Flex構建器(因為筆者安裝了SourceMate外掛,所以多了一個SourceMate構建器)。基於Ant,您可以很方便的為專案新增其它的構建器,滿足多樣化的需求,比如您需要拷貝其它一些專案的模組放置到您的專案進行聯合測試,而您又不想每次都手工操作,那麼可以通過這個面板,建立一個新的Ant Builder,指定一下構建所需的build.xml檔案(具體語句不再闡述,請參閱Ant的相關文件)即可。
SourceMate 3對於Ant的支援:
SourceMate是個Eclipse的商業外掛,用於增強Flash Builder的功能,筆者從2.0開始使用,感覺很好,現在最新版本是3.0,針對Flash Builder 4.5做了一些功能變更(原有的一些程式碼修復等功能因為Flash Builder 4.5本身進行了增強,SourceMate刪除了與Flash Builder 4.5重複的功能,而在其它方面做了加強)。外掛地址:
http://updates.elementriver.com/sourcemate/v3/
SourceMate對Ant有一個很不錯的功能,可以根據當前專案的配置,自動幫我們生成Ant構建檔案(build.xml),這可以幫我們省不少事。該功能整合在SourceMate選單中,如圖所示:
點選"Generate Ant Build file",就可以生成build.xml,然後您可以根據自己的需要,稍加修改,即可用於專案的自動構建。
riadevID: 瑞研社群最新地址: http://www.riadev.com/flex-thread-404-1-1.html