第2章熟悉開發(fā)環(huán)境Flash Builderppt課件

1、第第2 2章章 熟悉開發(fā)環(huán)境熟悉開發(fā)環(huán)境Flash Builder 4Flash Builder 4“工欲善其事必先利其器工欲善其事必先利其器”。Flash Builder 4是是Adobe公司推出的集成開發(fā)環(huán)境。公司推出的集成開發(fā)環(huán)境。Flash Builder 4工作環(huán)境工作環(huán)境是一種具有豐富特征的開發(fā)環(huán)境，有利于開發(fā)者開發(fā)是一種具有豐富特征的開發(fā)環(huán)境，有利于開發(fā)者開發(fā)Flex和和ActionScript應(yīng)用程序。應(yīng)用程序。Flash Builder 4建立在建立在Eclipse這一開這一開源的集成開發(fā)環(huán)境（源的集成開發(fā)環(huán)境（IDE）上，用戶可使用強(qiáng)大的代碼編輯）上，用戶可使用強(qiáng)大的代碼編

2、輯器，可視化設(shè)計(jì)器，調(diào)試工具等來開發(fā)器，可視化設(shè)計(jì)器，調(diào)試工具等來開發(fā)Flex應(yīng)用程序。應(yīng)用程序。2.1 2.1 熟悉熟悉Flash Builder 4Flash Builder 4工作區(qū)工作區(qū)Flash Builder 4工作區(qū)是開發(fā)工作區(qū)是開發(fā)Flex應(yīng)用程序的工作環(huán)應(yīng)用程序的工作環(huán)境，熟悉工作環(huán)境對(duì)開發(fā)的益處是顯而易見的。境，熟悉工作環(huán)境對(duì)開發(fā)的益處是顯而易見的。Flash Builder 4平臺(tái)是基于平臺(tái)是基于Eclipse平臺(tái)，因此與平臺(tái)，因此與Eclipse的布局風(fēng)格的布局風(fēng)格異常相似。異常相似。Flash Builder 4平臺(tái)的特點(diǎn)是集可視化編輯與代平臺(tái)的特點(diǎn)是集可視化編輯與代

3、碼編輯為一體，用戶在碼編輯為一體，用戶在Flash Builder 4環(huán)境下可方便地切換環(huán)境下可方便地切換設(shè)計(jì)模式和代碼模式。設(shè)計(jì)模式和代碼模式。2.1.1 Perspectives2.1.1 Perspectives（透視）（透視）透視是一種布局風(fēng)格，與任務(wù)、編輯器和視圖相關(guān)透視是一種布局風(fēng)格，與任務(wù)、編輯器和視圖相關(guān)聯(lián)。一旦切換透視，對(duì)應(yīng)的任務(wù)、編輯器或視圖就可能發(fā)生聯(lián)。一旦切換透視，對(duì)應(yīng)的任務(wù)、編輯器或視圖就可能發(fā)生改變。改變。Flash Builder 4包含包含3種透視：種透視：“Flash”透視、透視、“Flash Debug”透視以及透視以及“Flash Profile”透視。透

4、視。2.1.2 Editors2.1.2 Editors（編輯器）（編輯器）1MXML編輯器編輯器2ActionScript編輯器編輯器3CSS編輯器編輯器2.1.3 Views2.1.3 Views（視圖）（視圖）視圖是用以輔助用戶管理工程和開發(fā)項(xiàng)目。用戶通視圖是用以輔助用戶管理工程和開發(fā)項(xiàng)目。用戶通過視圖可以較直觀地處理一些需求。例如，過視圖可以較直觀地處理一些需求。例如，“包資源管理器包資源管理器”既可以管理工作區(qū)中的文件和文件夾，又可以瀏覽包和類既可以管理工作區(qū)中的文件和文件夾，又可以瀏覽包和類的結(jié)構(gòu)。的結(jié)構(gòu)。2.2 2.2 編譯與運(yùn)行編譯與運(yùn)行Flex 4Flex 4程序詳解程序詳解

5、MXML語言和語言和ActionScript語言都是需要編譯后才能語言都是需要編譯后才能運(yùn)行的。運(yùn)行的。Flash Builder 4開發(fā)環(huán)境中集成了兩者的編譯器，開發(fā)環(huán)境中集成了兩者的編譯器，用戶只需選擇相應(yīng)的編譯運(yùn)行命令。用戶只需選擇相應(yīng)的編譯運(yùn)行命令。本書在介紹第一個(gè)本書在介紹第一個(gè)Flex程序程序“Hello World”程序時(shí)程序時(shí)，簡單地介紹了了如何編譯與運(yùn)行，簡單地介紹了了如何編譯與運(yùn)行Flex應(yīng)用程序。事實(shí)上編應(yīng)用程序。事實(shí)上編譯時(shí)可選的參數(shù)較多，本節(jié)將為讀者介紹詳細(xì)的編譯與運(yùn)行譯時(shí)可選的參數(shù)較多，本節(jié)將為讀者介紹詳細(xì)的編譯與運(yùn)行過程。仍以過程。仍以“Hello World”為

6、例，講解編譯與運(yùn)行過程中為例，講解編譯與運(yùn)行過程中的可選參數(shù)。的可選參數(shù)。2.3 2.3 調(diào)試調(diào)試Flex 4Flex 4程序程序程序常包含不可知的邏輯錯(cuò)誤，這些錯(cuò)誤不屬于編程序常包含不可知的邏輯錯(cuò)誤，這些錯(cuò)誤不屬于編譯錯(cuò)誤，編譯器不能檢查此類錯(cuò)誤。例如，程序中要判斷閏譯錯(cuò)誤，編譯器不能檢查此類錯(cuò)誤。例如，程序中要判斷閏年，代碼的語法正確但判斷的方法是錯(cuò)誤的，此時(shí)編譯器不年，代碼的語法正確但判斷的方法是錯(cuò)誤的，此時(shí)編譯器不會(huì)報(bào)錯(cuò)。使用在調(diào)試功能能跟蹤代碼每一步的執(zhí)行，從而檢會(huì)報(bào)錯(cuò)。使用在調(diào)試功能能跟蹤代碼每一步的執(zhí)行，從而檢查邏輯錯(cuò)誤。查邏輯錯(cuò)誤。Flash Builder 4開發(fā)環(huán)境有強(qiáng)大的

7、調(diào)試功能，開發(fā)環(huán)境有強(qiáng)大的調(diào)試功能，有利于程序進(jìn)行代碼檢查。本節(jié)介紹如何調(diào)試有利于程序進(jìn)行代碼檢查。本節(jié)介紹如何調(diào)試Flex應(yīng)用程序應(yīng)用程序，包括添加斷點(diǎn)、開始調(diào)試、監(jiān)視變量等。，包括添加斷點(diǎn)、開始調(diào)試、監(jiān)視變量等。2.3.1 2.3.1 添加斷點(diǎn)添加斷點(diǎn)斷點(diǎn)的作用是使應(yīng)用程序在帶斷點(diǎn)的代碼行處中斷斷點(diǎn)的作用是使應(yīng)用程序在帶斷點(diǎn)的代碼行處中斷，從而開始檢查代碼。同時(shí)，用戶可使用，從而開始檢查代碼。同時(shí)，用戶可使用Flash Builder 4自自帶的調(diào)試工具檢測并修復(fù)錯(cuò)誤。例如，變量視圖和表達(dá)式視帶的調(diào)試工具檢測并修復(fù)錯(cuò)誤。例如，變量視圖和表達(dá)式視圖。在代碼編輯器中添加斷點(diǎn)的方法很多。圖。在代

8、碼編輯器中添加斷點(diǎn)的方法很多。調(diào)試器只允許在以下代碼的斷點(diǎn)處中斷。調(diào)試器只允許在以下代碼的斷點(diǎn)處中斷。MXML標(biāo)簽中包含標(biāo)簽中包含ActionScript事件處理，如事件處理，如。其中。其中“click”是單擊處是單擊處理事件。理事件。ActionScript代碼中?？梢允谴a中?？梢允荕XML文件中的文件中的標(biāo)簽下，也可以是標(biāo)簽下，也可以是ActionScript文件中。文件中。ActionScript文件中的任何代碼行。文件中的任何代碼行。2.3.2 2.3.2 調(diào)試程序調(diào)試程序在設(shè)置完斷點(diǎn)后可選擇在設(shè)置完斷點(diǎn)后可選擇“運(yùn)行運(yùn)行” “調(diào)試調(diào)試”命令，命令，選擇相應(yīng)的運(yùn)行配置開始調(diào)試。也可單

9、擊工具欄上的按鈕或選擇相應(yīng)的運(yùn)行配置開始調(diào)試。也可單擊工具欄上的按鈕或快捷鍵快捷鍵F11開始調(diào)試。調(diào)試器運(yùn)行后就會(huì)自動(dòng)進(jìn)入開始調(diào)試。調(diào)試器運(yùn)行后就會(huì)自動(dòng)進(jìn)入“Flash Debug”透視。其中比較有用的是調(diào)試視圖。透視。其中比較有用的是調(diào)試視圖。在調(diào)試程序時(shí)常需要監(jiān)視某些變量的變化，從而發(fā)在調(diào)試程序時(shí)常需要監(jiān)視某些變量的變化，從而發(fā)現(xiàn)代碼中的錯(cuò)誤。變量視圖能自動(dòng)跟蹤程序中變量的變化?，F(xiàn)代碼中的錯(cuò)誤。變量視圖能自動(dòng)跟蹤程序中變量的變化。2.4 Flex 42.4 Flex 4項(xiàng)目工程概述項(xiàng)目工程概述Flex 4現(xiàn)支持創(chuàng)建的項(xiàng)目工程有三類：現(xiàn)支持創(chuàng)建的項(xiàng)目工程有三類：Flex 項(xiàng)目、項(xiàng)目、Acti

10、onScript 項(xiàng)目、和項(xiàng)目、和Flex 庫項(xiàng)目。不同的工程用于開發(fā)不庫項(xiàng)目。不同的工程用于開發(fā)不同的項(xiàng)目。同的項(xiàng)目。Flex 項(xiàng)目工程是普通的項(xiàng)目工程是普通的RIA工程，主要用于開發(fā)工程，主要用于開發(fā)互聯(lián)網(wǎng)應(yīng)用程序?；ヂ?lián)網(wǎng)應(yīng)用程序。ActionScript 項(xiàng)目工程主要用于開發(fā)項(xiàng)目工程主要用于開發(fā)ActionScript類庫。類庫。Flex 庫項(xiàng)目用于開發(fā)共享庫，可以是自庫項(xiàng)目用于開發(fā)共享庫，可以是自定義組件，也可以是定義組件，也可以是ActionScript代碼。代碼。2.4.1 Flex 2.4.1 Flex 項(xiàng)目項(xiàng)目Flex 項(xiàng)目是最基礎(chǔ)配置的工程，項(xiàng)目是最基礎(chǔ)配置的工程，F(xiàn)lex項(xiàng)

11、目包括兩種項(xiàng)目包括兩種應(yīng)用程序類型：應(yīng)用程序類型：Web和和Desktop。使用。使用Flex框架、框架、XML、Web services等來開發(fā)等來開發(fā)Flex應(yīng)用程序。應(yīng)用程序。Web應(yīng)用程序類型是應(yīng)用程序類型是在在Flash Builder 4中編譯后會(huì)將可執(zhí)行文件（中編譯后會(huì)將可執(zhí)行文件（swf文件）放在文件）放在HTML文件中，最終生成的是文件中，最終生成的是Web應(yīng)用程序。應(yīng)用程序。Desktop應(yīng)用應(yīng)用程序類型是在程序類型是在Flash Builder 4中編譯后會(huì)將文件放在中編譯后會(huì)將文件放在AIR平平臺(tái)中，最終生成的是臺(tái)中，最終生成的是AIR應(yīng)用程序。應(yīng)用程序。2.4.2 A

12、ctionScript 2.4.2 ActionScript 項(xiàng)目項(xiàng)目ActionScript 項(xiàng)目使用的是項(xiàng)目使用的是Flash API，而不是，而不是Flex框框架。架。ActionScript 項(xiàng)目沒有可視化的表現(xiàn)。也就是說項(xiàng)目沒有可視化的表現(xiàn)。也就是說ActionScript應(yīng)用程序中沒有設(shè)計(jì)模式這樣的概念。應(yīng)用程序中沒有設(shè)計(jì)模式這樣的概念。ActionScript項(xiàng)目編譯后也可運(yùn)行于項(xiàng)目編譯后也可運(yùn)行于Flash Player中。中。2.4.3 Flex 2.4.3 Flex 庫項(xiàng)目庫項(xiàng)目Flex庫項(xiàng)目用以創(chuàng)建自定義的代碼庫。代碼庫可共庫項(xiàng)目用以創(chuàng)建自定義的代碼庫。代碼庫可共享于應(yīng)用

13、程序或是其他開發(fā)人員。享于應(yīng)用程序或是其他開發(fā)人員。Flex庫項(xiàng)目編譯后生成庫項(xiàng)目編譯后生成SWC文件。文件。SWC文件包含組件、各種資源和文件包含組件、各種資源和catalog.xml文文件。件。SWC常被用于制作主題和制作應(yīng)用程序的外觀。一個(gè)常被用于制作主題和制作應(yīng)用程序的外觀。一個(gè)SWC主題可以包括多個(gè)主題可以包括多個(gè)CSS文件和全部的圖片、動(dòng)畫資源。文件和全部的圖片、動(dòng)畫資源。2.5 Flash Builder 42.5 Flash Builder 4常用快捷鍵常用快捷鍵快捷鍵的作用是使得開發(fā)工作更加高效和簡單?？旖萱I的作用是使得開發(fā)工作更加高效和簡單。Flash Builder 4中

14、提供了許多快捷鍵。用戶想要更多的快捷中提供了許多快捷鍵。用戶想要更多的快捷鍵說明，可選擇鍵說明，可選擇“幫助幫助” “鍵輔助鍵輔助”命令或命令或“Shift+Ctr+L”組合鍵查看。組合鍵查看。2.6 2.6 使用使用FlexFlex幫助幫助開發(fā)開發(fā)Flex應(yīng)用程序過程中難免會(huì)遇到困難，如對(duì)某一應(yīng)用程序過程中難免會(huì)遇到困難，如對(duì)某一組件的某一屬性不清楚，此時(shí)也查看組件的某一屬性不清楚，此時(shí)也查看Flex 幫助。在安裝幫助。在安裝Flash Builder 4后，自動(dòng)安裝了后，自動(dòng)安裝了Flex 幫助。用戶可選擇幫助。用戶可選擇“幫助幫助” “幫助內(nèi)容幫助內(nèi)容”命令打開命令打開Flex 幫助。幫助。Flex 幫助左下方的圖標(biāo)表示顯示全部內(nèi)容，圖標(biāo)表示幫助左下方的圖標(biāo)表示顯示全部內(nèi)容，圖標(biāo)表示顯示搜索結(jié)果，圖標(biāo)表示顯示鏈接，圖標(biāo)表示顯示書簽。單擊顯示搜索結(jié)果，圖標(biāo)表示顯示鏈接，圖標(biāo)表示顯示書簽。單擊不同的圖標(biāo)會(huì)切換至不同的內(nèi)容。另外，用戶可在左上方的不同的圖標(biāo)會(huì)切換至不同的內(nèi)容。另外，用戶可在左上方的“搜索搜索”輸入框中輸入要搜索的內(nèi)容。輸入框中輸入要搜索的內(nèi)容。2.7 2.7 小結(jié)小結(jié)Flash Builder 4是功能強(qiáng)大的集成開發(fā)環(huán)境，能高效是功能強(qiáng)大的集成開發(fā)環(huán)境，能高效地開發(fā)地開發(fā)Flex應(yīng)用程序。本章