說再多,都不如來實際看一下MXML的語法與實際呈現的結果。
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的一種變通作法。
好啦,補課完畢,下次再見囉。
雖然已經失去鐵人賽的資格,不過還是會繼續上來把原本計劃想寫的東西寫一寫。
希望大家多多支持囉。
加油! 你的文章很精彩!