第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）上，用戶可使用強大的代碼編輯）上，用戶可使用強大的代碼編

2、輯器，可視化設(shè)計器，調(diào)試工具等來開發(fā)器，可視化設(shè)計器，調(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)境對開發(fā)的益處是顯而易見的。境，熟悉工作環(huán)境對開發(fā)的益處是顯而易見的。Flash Builder 4平臺是基于平臺是基于Eclipse平臺，因此與平臺，因此與Eclipse的布局風格的布局風格異常相似。異常相似。Flash Builder 4平臺的特點是集可視化編輯與代平臺的特點是集可視化編輯與代

3、碼編輯為一體，用戶在碼編輯為一體，用戶在Flash Builder 4環(huán)境下可方便地切換環(huán)境下可方便地切換設(shè)計模式和代碼模式。設(shè)計模式和代碼模式。2.1.1 Perspectives2.1.1 Perspectives（透視）（透視）透視是一種布局風格，與任務(wù)、編輯器和視圖相關(guān)透視是一種布局風格，與任務(wù)、編輯器和視圖相關(guān)聯(lián)。一旦切換透視，對應(yīng)的任務(wù)、編輯器或視圖就可能發(fā)生聯(lián)。一旦切換透視，對應(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ā)項目。用戶通視圖是用以輔助用戶管理工程和開發(fā)項目。用戶通過視圖可以較直觀地處理一些需求。例如，過視圖可以較直觀地處理一些需求。例如，“包資源管理器包資源管理器”既可以管理工作區(qū)中的文件和文件夾，又可以瀏覽包和類既可以管理工作區(qū)中的文件和文件夾，又可以瀏覽包和類的結(jié)構(gòu)。的結(jié)構(gòu)。2.2 2.2 編譯與運行編譯與運行Flex 4Flex 4程序詳解程序詳解

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

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

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

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

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

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

11、目包括兩種項目包括兩種應(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中編譯后會將可執(zhí)行文件（中編譯后會將可執(zhí)行文件（swf文件）放在文件）放在HTML文件中，最終生成的是文件中，最終生成的是Web應(yīng)用程序。應(yīng)用程序。Desktop應(yīng)用應(yīng)用程序類型是在程序類型是在Flash Builder 4中編譯后會將文件放在中編譯后會將文件放在AIR平平臺中，最終生成的是臺中，最終生成的是AIR應(yīng)用程序。應(yīng)用程序。2.4.2 A

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

13、程序或是其他開發(fā)人員。享于應(yīng)用程序或是其他開發(fā)人員。Flex庫項目編譯后生成庫項目編譯后生成SWC文件。文件。SWC文件包含組件、各種資源和文件包含組件、各種資源和catalog.xml文文件。件。SWC常被用于制作主題和制作應(yīng)用程序的外觀。一個常被用于制作主題和制作應(yīng)用程序的外觀。一個SWC主題可以包括多個主題可以包括多個CSS文件和全部的圖片、動畫資源。文件和全部的圖片、動畫資源。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)用程序過程中難免會遇到困難，如對某一應(yīng)用程序過程中難免會遇到困難，如對某一組件的某一屬性不清楚，此時也查看組件的某一屬性不清楚，此時也查看Flex 幫助。在安裝幫助。在安裝Flash Builder 4后，自動安裝了后，自動安裝了Flex 幫助。用戶可選擇幫助。用戶可選擇“幫助幫助” “幫助內(nèi)容幫助內(nèi)容”命令打開命令打開Flex 幫助。幫助。Flex 幫助左下方的圖標表示顯示全部內(nèi)容，圖標表示幫助左下方的圖標表示顯示全部內(nèi)容，圖標表示顯示搜索結(jié)果，圖標表示顯示鏈接，圖標表示顯示書簽。單擊顯示搜索結(jié)果，圖標表示顯示鏈接，圖標表示顯示書簽。單擊不同的圖標會切換至不同的內(nèi)容。另外，用戶可在左上方的不同的圖標會切換至不同的內(nèi)容。另外，用戶可在左上方的“搜索搜索”輸入框中輸入要搜索的內(nèi)容。輸入框中輸入要搜索的內(nèi)容。2.7 2.7 小結(jié)小結(jié)Flash Builder 4是功能強大的集成開發(fā)環(huán)境，能高效是功能強大的集成開發(fā)環(huán)境，能高效地開發(fā)地開發(fā)Flex應(yīng)用程序。本章