MXML原始碼

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Label x="27" y="25" text="Hello! iT邦邦友" width="424" color="#EEEEEE" fontSize="50"/>	
</mx:Application>

　編譯後的結果

　　　　　　

<?xml version="1.0" encoding="utf-8"?>

對這一行，大家應該都不陌生，這是XML的表頭宣告，主是宣告了版本與編碼的資訊。

再來第二行則是MXML的大菜上桌。

<mx:Application>是MXML的XML結構的根元素，所有MXML應用程式標籤都需要放在這個根元素底下。

開頭那個怪怪的「mx」是MXML的名稱空間，所有FLEX的標籤，都會用mx來起頭標示。

例如要用Flex的Button的話，就會用到<mx:button>這樣的標籤格式。

接下來「xmlns:mx="http://www.adobe.com/2006/mxml"」是xml名稱空間的宣告，一般而言，就是行禮如儀地放上去。

而「layout="absolute"」指的是這個應用程式採絕對定位的方式，所以元素都是用x、y明確位置來指定出現的地方。

因此，這個根元素的宣告就結束了。要記住的是，XML有一個法則就是:


這樣


這樣


還要這樣。

四個字的成語，猜一下?

相親相愛?

不是啦!

成雙成對!! Bingo!

用<mx:Application>開頭，就一定要有個</mx:Application>結尾，成雙成對的XML文件能是正確的。

再來就是Label的部份。

<mx:Label>是Flex用來作標示字的標籤，我們拿他來放「Hello! iT邦邦友」這樣的內容。

首先我們看到「x="27" y="25" 」的屬性，這意味Label要放在距離程式左上角的地方，右移27像素，下移25像素。

「text="Hello! iT邦邦友"」則是將內容放進text屬性中，實際上顯示的內容就會是這裡的文字。

接著，我們還宣告了「width="424" color="#EEEEEE" fontSize="50"」，代表這個label寬度是424像素，顏色是白色(#ffffff)，字型的尺寸是50。

就這樣，我們第一隻程式完成了。

(你剛剛不是說要成雙成對嗎?這個怎麼沒有呢?)

其實要有也是可以的，我們可以改寫成<mx:label>Hello! iT邦邦友</mx:label>，不過為了簡潔起見，我們將內容放到text屬性中，然後呢在開頭的label標籤中，把收尾的標籤那條斜線偷過來，變成<mx:label ... />，這樣子，就算沒有成雙成對，也是可以的。

這是XML的一種變通作法。

好啦，補課完畢，下次再見囉。