3.2 使用組件
在 MXML 中，除了 Application標簽外，還提供了大量的標簽供我們使用。
例如上面代碼中出現(xiàn)的Button和Label標簽，處理界面結(jié)構(gòu)的Canvas、Box標簽，網(wǎng)頁中常見的下拉框、多選框、單選框、復(fù)選框，用來顯示數(shù)據(jù)的DataGrid、Tree等等。每個標簽都對應(yīng)一個類文件。
3.2.1 插入組件
在MXML中組件使用起來非常簡單，比如插入一個按鈕，編寫代碼：
<mx:Button></mx:Button>
這一對閉合的標簽將在界面上繪制出一個Button組件。在XML中，所有標簽必須閉合。和正常標簽相比，閉合標簽只是在前面添加了一個“/”。也是用另一種形式：
<mx:Button />
“/”符號是閉合標簽的簡寫形式，通常用于單行的節(jié)點，描述一個單獨的元素。如果標簽包含子節(jié)點，則不能采用簡寫。
MXML中，組件的屬性（如長、寬、位置等）是作為節(jié)點的屬性出現(xiàn)的，比如：
<mx:Button width="200" hieight="200"></mx:Button>
組件按照功能大致可分為三類：
l 布局類，包括所有的容器類型組件，比如 HBox、Panel等。Spacer、HRule 和 VRule不是容器類型，但主要用于布局，因此也歸于此類。
l 導(dǎo)航類，包括菜單條、按鈕條等各種導(dǎo)航功能的組件。
l 交互類，包括內(nèi)容展示、數(shù)據(jù)交互相關(guān)組件，如按鈕、下拉框、圖片、視頻等等。
Flex Builder的組件面板中列出了所有的可視化組件。在設(shè)計模式試圖下，可以直接從組件面板將組件拖入到編輯區(qū)，同時自動生成程序代碼。
如果要使用非可視化組件，則需要輸入代碼。在代碼試圖中輸入<mx: 這時候跟進的代碼提示窗口將列出mx 空間下所有的對象，如圖 3.1 所示。
3.2.2自定義MXML組件
在實際開發(fā)中，尤其是一個大型應(yīng)用中，我們不會把所有的代碼都塞進一個文件中。可以想象，修改一個幾千行的文件是件痛苦的事。因此，對程序進行功能分割是非常必要的。這帶來的好處很多，明顯的一點是讓開發(fā)者能夠分工合作，提高程序的重用性，降低了維護的難度。
基于組建的開發(fā)模式是Flex的一個特色。一個Flex程序是由若干個組件構(gòu)成的。程序中所有的MXML文件和ActionScript類文件，都被當作用戶自定義的組件。用戶自定義的組件和Flex本身的組件在用法上完全一樣，它們的區(qū)別在于：Flex組件經(jīng)過封裝，可以被任意程序使用，而用戶組件在特定的程序中才可以使用。
一般我們將程序中功能能夠獨立或者需要返復(fù)使用的部分定義成一個用戶組件。編寫程序時，應(yīng)當盡量減少組件與組件之間的直接聯(lián)系，降低塊與塊之間的依賴性。
在程序Example_1中，我們來新建一個MXML組件。在導(dǎo)航區(qū)，在空白區(qū)域單擊鼠標右鍵，在彈出的菜單中選擇 New ----> MXML Component，見圖3.2。
然后會彈出如圖 3.3 所示的對話框。
這里要給出被創(chuàng)建組件的文件名，并選擇是擴展來自哪一種組件，包括所有可視化組件和用戶已經(jīng)自定義的組件，也就是說可以在已經(jīng)擴展的基礎(chǔ)上就繼續(xù)擴展。
選擇Image對象，單擊Finish按鈕，一個新的MXML文件被創(chuàng)建了，切換到設(shè)計視圖，點擊Image組件，在屬性面板會看到他的常見屬性，見圖3.4。其中Source屬性即圖片的路徑。選擇好圖片后，這個組建就完成了，見圖3.5。
myImage.mxml的文件內(nèi)容如下：
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Image xmlns:mx="http://www.adobe.com/2006/mxml" source="pic/animal.png">
3 </mx:Image>
再次切換到設(shè)計模式視圖。這時，在組件面板上，Custom分類中出現(xiàn)了新添加的組件名。想使用Flex自帶的組件一樣，將myImage組件從組件面板拖放到主程序中，圖片顯示正常。切換到代碼模式視圖，Example_1.mxml文件的內(nèi)容變化了：
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">
3 <ns1:myImage x="30" y="30"/>
4 </mx:Application>
請注意，在Application標簽中，多了一個屬性：xmlns:nsl="*"，這便是本章3.1.2節(jié)中講到的自定義命名空間。這里邊機器自動添加了名為“nsl”的命名空間，將程序目錄下所有的MXML組件都納入其中。因此，插入的myImage組件的代碼相應(yīng)變?yōu)椋?/font>
<nsl:myImage x="30" y="30" />
在實際開發(fā)中，為了更好地規(guī)劃程序的結(jié)構(gòu)，我們一般根據(jù)功能來劃分命名空間。新建文件夾“view”，將myImage放在其中。“view”有視圖、視界的意思，我們把所有和界面相關(guān)的組件都放在這里面，這樣看文件夾的名字就知道里面的大致內(nèi)容了。修改后，Exaple_1.mxml文件的代碼如下：
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:view="wiew.*">
3 <view:myImage x="30" y="30"/>
4 </mx:Application>
運行程序，效果如圖3.6所示：
說明：由于在網(wǎng)上相關(guān)資源太少所以本文是按照《Flex第一步》編寫，由于時間比較短所以第三章內(nèi)容沒有全部出來同時編寫過程中有錯別字，請大家擔待。^_^