1.3 MXML
MXML是一種基于XML的標(biāo)記語言,在Flex技術(shù)中,MXML用于設(shè)計用戶界面,實現(xiàn)豐富的Flex表現(xiàn)層。從作用上說,MXML和HTML的功能是基本一致的,都是設(shè)計用戶界面,但是MXML提供了較HTML更為豐富的界面組件,并且在開發(fā)上更為結(jié)構(gòu)化,條理更加清晰。
MXML的編寫同樣類似于HTML,它通過標(biāo)簽來定義和描述組件。按照學(xué)習(xí)編程的慣例,下面請看一個用MXML編寫的Hello World示例。
示例1.1 Hello World
<?xml version="1.0"?> <mx:Application xmlns:mx="<mx:Panel title="Flex MXML Test" x="10" y="10" fontSize="12"> <mx:Label text="Hello World. 世界,你好!" fontWeight="normal" fontSize="24" fontFamily="Times New Roman" fontStyle="italic" alpha="1.0"/> </mx:Panel> </mx:Application>
通過示例1.1的代碼可以看到,雖然MXML是類似于HTML的格式,但是Panel、Label等開發(fā)組件表達(dá)了一個GUI開發(fā)平臺才具備的特征。MXML是基于XML語言的,可讀性很強(qiáng),由標(biāo)簽(Tag)、標(biāo)簽中的屬性(Attribute)及屬性值(Attribute Value)等元素組成。
那么,如何才能運(yùn)行起這個Hello World呢?
第一,用一個普通的文本編輯器,如記事本、EditPlus等,編寫并保存上述代碼,需要注意的是文件擴(kuò)展名要保存為小寫的mxml,如 test.mxml,我們暫且把它保存在C盤的user文件夾下。
第二,使用Flex 3 SDK的命令行進(jìn)行編譯,F(xiàn)lex的編譯工具在SDK的bin文件夾下,如Flex 3 SDK解壓縮到C盤根目錄,那么在命令行執(zhí)行(本書所有代碼示例部分都默認(rèn)使用C:\user作為代碼文件夾):
cd c:\flex_sdk_3\bin mxmlc c:\user\test.mxml
可以看到在user文件夾下生成了test.swf文件。
第三,用瀏覽器或Flash Player打開這個swf文件,就看到了這個Hello World的運(yùn)行效果,如圖1.2所示。
圖1.2 Hello World運(yùn)行效果
結(jié)合圖1.2我們來分析一下這個程序的代碼。
<mx:Application>是MXML的根元素,是MXML所有組件的容器。在這個標(biāo)簽中,我們要聲明mxml的命名空間。
<mx:Panel>是個面板組件,是GUI程序開發(fā)的常見組件,其功能是個組件容器。我們把它的標(biāo)題設(shè)置成了“Flex MXML Test”,并對位置尺寸進(jìn)行了設(shè)定。
<mx:Label>同樣是GUI程序開發(fā)必不可少的組件之一,常用于文字容器,在圖1.2中,這個Label的內(nèi)容就是“Hello World. 世界,你好!”這個字符串,并將其嵌套在一個<mx:Panel>中。在這個程序里,<mx:Panel>是<mx:Label>的容器。
這就是一個標(biāo)準(zhǔn)的MXML的大致寫法。需要特別注意的一點是,在第一行的<?xml version=“1.0”?>中有時候需要進(jìn)行指定的編碼,我們用文本編輯工具處理的時候要保存成對應(yīng)的編碼,如為了方便處理中文和國際化,我們可以把第一行改寫成<?xml version=“1.0” encoding=“utf-8”?>,并將代碼保存為UTF-8格式。
出處:藍(lán)色理想
責(zé)任編輯:bluehearts
上一頁 Flex簡介 下一頁 ActionScript
◎進(jìn)入論壇RIA設(shè)計與應(yīng)用版塊參加討論
|