iT邦幫忙

DAY 8
11

進入Flex 3異想世界的30招系列 第 8

::進入Flex的異想世界(8):: Flex的靈魂角色-MXML(II)

說再多,都不如來實際看一下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的一種變通作法。

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


上一篇
::進入Flex的異想世界(7):: Flex的靈魂角色-MXML(I)
系列文
進入Flex 3異想世界的30招8

2 則留言

0
chetbaker
iT邦新手 3 級 ‧ 2008-10-16 12:46:28

雖然已經失去鐵人賽的資格,不過還是會繼續上來把原本計劃想寫的東西寫一寫。

希望大家多多支持囉。

kaiin323 iT邦高手 1 級 ‧ 2008-10-16 16:37:32 檢舉

加油! 你的文章很精彩!

0
davistai
iT邦大師 1 級 ‧ 2008-10-16 23:23:00

支持!b!

我要留言

立即登入留言