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