|
1.6 使用Adobe Flex Builder
誠(chéng)然，我們通過UltraEdit、EditPlus甚至記事本都可以完成MXML及ActionScript的編寫工作，然而作為一個(gè)偏重于界面設(shè)計(jì)的程序設(shè)計(jì)語言，成熟的集成開發(fā)環(huán)境(Integrated Develop Environment，IDE)是必不可少的，在處理大量的界面元素以及對(duì)程序的編譯錯(cuò)誤排查時(shí)，有一個(gè)好的IDE更可以達(dá)到事半功倍的效果。
Adobe在發(fā)布Flex的同時(shí)就發(fā)布了一個(gè)高效的IDE——Flex Builder，對(duì)Flex的開發(fā)提供了強(qiáng)大的支持。需要注意的是，F(xiàn)lex Builder是一款商業(yè)的IDE，從網(wǎng)上下載可以獲得30天的免費(fèi)試用期，之后需要付費(fèi)才能使用。
Flex Builder 3屬于Flex 3產(chǎn)品集，是一款基于Eclipse的IDE，通過Flex Builder 3可以高效地完成MXML、ActionScript以及Flex Charting的設(shè)計(jì)和編寫，快速創(chuàng)建各種Flex項(xiàng)目及應(yīng)用程序。
不僅如此，F(xiàn)lex Builder 3還支持Adobe的新一代RIA開發(fā)平臺(tái)Adobe Integrated Runtime，即AIR。AIR是基于桌面系統(tǒng)的RIA開發(fā)技術(shù)和運(yùn)行時(shí)環(huán)境，實(shí)現(xiàn)了Web應(yīng)用的桌面化。通過AIR，我們可以使用現(xiàn)有的Web開發(fā)技術(shù)開發(fā)出界面效果更加絢麗多彩的桌面應(yīng)用程序，如Flash/Flex/ActionScript、HTML/CSS/JavaScript、Ajax等技術(shù)都可以在AIR下發(fā)揮作用。Flex Builder 3提供了AIR的開發(fā)，其開發(fā)方式和特點(diǎn)與Flex開發(fā)是完全一致的。
關(guān)于AIR開發(fā)的詳細(xì)介紹可閱讀本書的第四部分。
Flex Builder 3支持Windows和Macintosh系統(tǒng)，同時(shí)由于基于Eclipse，F(xiàn)lex Builder 3的安裝版本分為獨(dú)立安裝和插件安裝兩種。在此，推薦已經(jīng)裝有Eclipse的開發(fā)者使用插件安裝的方式進(jìn)行安裝，一方面避免了Eclipse及JRE的重復(fù)安裝，另一方面是支持JavaEE的企業(yè)級(jí)開發(fā)和Flex開發(fā)更好的結(jié)合。
在安裝插件版本的時(shí)候注意設(shè)定正確的Eclipse路徑位置，以保證Flex Builder 3的正確運(yùn)行，安裝過程如圖1.8所示。在“Please Choose an Existing Eclipse Folder: ”下方的文本框中填寫Eclipse的路徑。
圖1.8 插件版Flex Builder 3的安裝過程
Eclipse是一款強(qiáng)大的集成開發(fā)環(huán)境和模型平臺(tái)，Eclipse早期只能支持Java語言的開發(fā)，后來C/C++、UML、Ruby等語言都在Eclipse平臺(tái)的基礎(chǔ)上實(shí)現(xiàn)了定制的集成開發(fā)環(huán)境，Adobe的Flex也是一樣。Flex Builder基于Eclipse，因此有Eclipse開發(fā)經(jīng)驗(yàn)的開發(fā)者上手非常容易，而對(duì)于新手來說Flex Builder帶來的是規(guī)范和廣泛應(yīng)用的強(qiáng)大集成開發(fā)環(huán)境平臺(tái)，熟悉Flex Builder后對(duì)Eclipse平臺(tái)也能有所了解。
1.6.1 Flex Builder系統(tǒng)需求
相對(duì)于單純的Flex SDK，F(xiàn)lex Builder對(duì)系統(tǒng)的配置要求更高一些，尤其是對(duì)處理器和內(nèi)存的需求增大。
(1) Flex Builder 3(包含SDK和Charting組件) Windows平臺(tái)需求如下。
- 處理器：Intel Pentium 4處理器
- 內(nèi)存需求：1GB RAM
- 硬盤需求：500MB可用硬盤空間
- 操作系統(tǒng)：Microsoft Windows XP with Service Pack 2，Windows XP Professional，Windows 2000 Server，Windows 2000 Professional或Windows Server 2003
- Java平臺(tái)：Java Virtual Machine: Sun JRE 1.4.2，Sun JRE 1.5，IBM JRE 1.5
- Eclipse：Eclipse 3.1~3.2
(2) Flex Builder 3(包含SDK和Charting組件)Macintosh平臺(tái)需求如下。
- 處理器：1.25GHz PowerPC G4~G5或Intel系列處理器
- 內(nèi)存需求：1GB
- 硬盤需求：500MB可用硬盤空間
- 操作系統(tǒng)：Mac OS X v.10.4.7 or 10.4.8
- Java平臺(tái)：Java Virtual Machine: Sun JRE 1.5
- Eclipse：Eclipse 3.2(僅支持插件方式安裝)
從上述需求可以看出，要使用Flex Builder，必須有Java平臺(tái)的支持，使用插件方式安裝則需要Eclipse，因此安裝過程較常見的IDE要復(fù)雜一些，需要注意Java和Eclipse的版本匹配等問題，推薦使用Windows平臺(tái)開發(fā)，使用Java SE 1.5版本和Eclipse 3.2版本。
Java和Eclipse的資源下載，可以從下列網(wǎng)站獲得。
1.6.2 使用Flex Builder進(jìn)行開發(fā)
Flex Builder的主要界面都沿用了Eclipse的模型。在Flex Builder 3中，我們可以新建一個(gè)Flex項(xiàng)目，如圖1.9所示。
圖1.9 新建Flex項(xiàng)目
暫時(shí)可以使用默認(rèn)方式創(chuàng)建Flex項(xiàng)目，將其命名為“HellowBuilder”，確認(rèn)之后就進(jìn)入了Flex的開發(fā)環(huán)境。如圖1.10所示，這是一個(gè)Flex Develop視圖的Eclipse界面，創(chuàng)建了HellowBuilder項(xiàng)目，F(xiàn)lex Builder自動(dòng)創(chuàng)建了一個(gè)HellowBuilder.mxml文件，并加入了MXML的基本代碼。當(dāng)我們完成程序設(shè)計(jì)時(shí)，只需右擊導(dǎo)航器中的mxml文件并在Run as 菜單條目中選擇Flex Application命令即可運(yùn)行程序，在Debug as菜單條目中選擇Flex Application命令則可以進(jìn)行程序的跟蹤調(diào)試。各功能區(qū)域的作用如下。
- 菜單欄：IDE支持的所有開發(fā)功能菜單。
- 工具欄：菜單欄中某些常用條目的快捷方式。
- 導(dǎo)航器：可以按照不同模式瀏覽當(dāng)前項(xiàng)目的文件結(jié)構(gòu)。
- 編輯區(qū)：代碼編寫區(qū)域。
- 定制視圖：可以顯示控制臺(tái)、搜索窗口、調(diào)試窗口等信息。
- 大綱：顯示當(dāng)前代碼的組織結(jié)構(gòu)。
圖1.10 Adobe Flex Builder 3的界面（點(diǎn)擊放大）
1.6.3 Flex Builder開發(fā)特點(diǎn)
Flex Builder對(duì)于MXML界面設(shè)計(jì)的支持是相當(dāng)強(qiáng)大的，支持“所見即所得”的開發(fā)方式。MXML本身就是由標(biāo)簽語言配置而成，因此我們對(duì)于MXML的操作方式更適合于配置和設(shè)計(jì)。同時(shí)，在MXML中我們會(huì)常常進(jìn)行調(diào)用ActionScript腳本、調(diào)用自定義組件、做數(shù)據(jù)綁定等操作，F(xiàn)lex Builder對(duì)這些方面都提供了完善的支持。
Flex Builder對(duì)于MXML的開發(fā)提供了兩種模式。在Flex Builder的編輯區(qū)上方可以看到Source和Design按鈕。Source為代碼編輯模式，我們可以手工書寫MXML代碼，完成ActionScript的編寫；Design為UI設(shè)計(jì)模式。當(dāng)我們切換到UI設(shè)計(jì)狀態(tài)后，即切換到UI設(shè)計(jì)界面，如圖1.11所示。各功能區(qū)域的作用如下。
1. UI設(shè)計(jì)器
通過所見即所得的方式設(shè)計(jì)圖形界面。
2. 組件工具欄
可以從中選取各種Flex可視化組件，放到UI設(shè)計(jì)器中。
圖1.11 Flex Builder的設(shè)計(jì)界面（點(diǎn)擊放大）
3. 屬性編輯區(qū)
編輯選定Flex可視化組件的各種屬性。
設(shè)計(jì)界面的使用非常簡(jiǎn)單，我們可以從組件工具欄里看到所有可用的界面或數(shù)據(jù)組件，可以直接拖放到UI設(shè)計(jì)器，并通過屬性編輯區(qū)來設(shè)定組件的屬性。同時(shí)在開發(fā)過程中在編輯狀態(tài)和設(shè)計(jì)狀態(tài)靈活切換。
我們回頭看看第一個(gè)Hello World示例，如果使用Flex Builder將如何完成。
- 切換Flex Builder的開發(fā)狀態(tài)為“Design”。
- 添加一個(gè)Panel組件到UI設(shè)計(jì)器，然后在屬性編輯區(qū)，設(shè)定Title的屬性為“Flex MXML Test”。
- 添加一個(gè)Label組件到Panel組件(拖放過程中會(huì)有藍(lán)色直線定位提示)，在屬性編輯區(qū)，設(shè)定Text屬性為“Hello World. 世界，你好！”。
如圖1.12所示，我們通過簡(jiǎn)單的鼠標(biāo)拖放操作就完成了這個(gè)Hello World程序。這種“所見即所得”的開發(fā)方式能大幅度地提高界面開發(fā)的效率。
另一方面，F(xiàn)lex Builder對(duì)ActionScript也提供了強(qiáng)大的支持。Flex Builder中包含著完整的Flex SDK，因此對(duì)ActionScript的各項(xiàng)特性支持都非常完善，并且與MXML的結(jié)合也非常緊密。
在處理包結(jié)構(gòu)時(shí)，可以直接在Flex項(xiàng)目下創(chuàng)建對(duì)應(yīng)的文件夾，完成對(duì)Flex程序中ActionScript類的組織。
例如用Flex Builder編輯示例Calculator的程序，可以直接在Calculator項(xiàng)目下創(chuàng)建myControls文件夾，并打包兩個(gè)ActionScript類文件Calculator.as和MyButton.as。在編碼過程中，F(xiàn)lex Builder支持ActionScript的快速開發(fā)索引，圖1.13中MyButton繼承了Button類，即MyButton可以使用所有的Button操作。因此Flex Builder會(huì)索引出Button的所有屬性和方法，提高了編碼的效率。
圖1.12 使用Flex Builder設(shè)計(jì)完成Hello World（點(diǎn)擊放大）
圖1.13 使用Flex Builder 3編寫ActionScript
Flex Builder沿襲了Eclipse體系，大多數(shù)Eclipse支持的開發(fā)配置、快捷鍵、調(diào)試控制、代碼重構(gòu)等方面的優(yōu)勢(shì)都被Flex Builder所支持。Flex Builder同樣支持版本控制軟件(CVS)，我們可以把MXML代碼和ActionScript代碼都通過CVS進(jìn)行管理，因此通過Flex Builder實(shí)現(xiàn)大型項(xiàng)目的開發(fā)可以達(dá)到事半功倍的效果。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 Flex的事件機(jī)制 下一頁 在Flex中操作XML
◎進(jìn)入論壇RIA設(shè)計(jì)與應(yīng)用版塊參加討論
|
第 1 頁 
第 6 頁 使用Adobe Flex Builder
