主頁(yè) > 知識(shí)庫(kù) > Macromedia Flex 標(biāo)記語(yǔ)言簡(jiǎn)介

Macromedia Flex 標(biāo)記語(yǔ)言簡(jiǎn)介

熱門(mén)標(biāo)簽:地圖標(biāo)注如何弄全套標(biāo) 實(shí)體店地圖標(biāo)注怎么標(biāo) 電銷(xiāo)機(jī)器人 深圳 萬(wàn)利達(dá)綜合醫(yī)院地圖標(biāo)注點(diǎn) 在電子版地圖標(biāo)注要收費(fèi)嗎 南京電銷(xiāo)外呼系統(tǒng)哪家好 股票配資電銷(xiāo)機(jī)器人 外呼系統(tǒng)會(huì)封嗎 武漢AI電銷(xiāo)機(jī)器人
Macromedia Flex 標(biāo)記語(yǔ)言簡(jiǎn)介 
    Macromedia Flex(開(kāi)發(fā)代號(hào)為Royale)是一個(gè)展現(xiàn)服務(wù)器,開(kāi)發(fā)者可以用它來(lái)開(kāi)發(fā)新一代的“復(fù)雜Internet應(yīng)用”(RIAs - Rich Internet Applications)。復(fù)雜Internet應(yīng)用融合了桌面應(yīng)用的可用性和web應(yīng)用的易于管理的優(yōu)點(diǎn)。

    Flex是一個(gè)在J2EE應(yīng)用服務(wù)器或servlet容器安裝的展現(xiàn)服務(wù)器。它擁有豐富的用戶(hù)界面組件、用于排布這些組件的基于XML的標(biāo)記語(yǔ)言,以及可以處理用戶(hù)交互的面向?qū)ο缶幊陶Z(yǔ)言。這些技術(shù)的給我們帶來(lái)的是:使用Flash播放器渲染復(fù)雜Internet應(yīng)用,使用工業(yè)標(biāo)準(zhǔn)和開(kāi)發(fā)者熟悉的方式進(jìn)行開(kāi)發(fā)。

    本文將專(zhuān)注于Flex語(yǔ)言的關(guān)鍵部分。

    為了運(yùn)行本文中提到的代碼,你可能需要加入Flex的Beta測(cè)試。Flex運(yùn)行于象Macromedia JRun, IBM Websphere, BEA WebLogic, or Apache Tomcat 這樣的J2EE應(yīng)用服務(wù)器之上。Flex未來(lái)將支持Microsoft .NET服務(wù)器。

Flex 語(yǔ)言簡(jiǎn)介

    由于標(biāo)記語(yǔ)言和面向?qū)ο蟪绦蛟O(shè)計(jì)語(yǔ)言廣泛應(yīng)用,因此,基于這兩項(xiàng)技術(shù)的Flex語(yǔ)言也將從中獲益。標(biāo)記語(yǔ)言是成功的,排布用戶(hù)界面也相對(duì)容易。MXML,由Flex引入的、基于XML的標(biāo)記語(yǔ)言,將延續(xù)其成功。和HTML很象,你可以用MXML來(lái)排布應(yīng)用的用戶(hù)界面。同為基于XML的標(biāo)記語(yǔ)言,MXML比HTML有更強(qiáng)的結(jié)構(gòu),更少的語(yǔ)法歧義。比起HTML,MXML還引入了更豐富的標(biāo)簽集。如:DataGrid,Tree,TabNavigator,Accordion和Menu,這些都是標(biāo)準(zhǔn)標(biāo)簽集中的一部分。你還可以擴(kuò)展MXML標(biāo)簽,創(chuàng)建自己的組件。此外,二者最大的區(qū)別是,MXML定義的用戶(hù)界面是用Flash播放器運(yùn)行的,相對(duì)傳統(tǒng)的基于HTML、頁(yè)面為中心的web應(yīng)用而言,這將更具吸引力。

    除了排布可視組件,還可以用MXML來(lái)定義應(yīng)用中其他重要方面,如,可以把應(yīng)用定義為一個(gè)web服務(wù)的客戶(hù),或是在應(yīng)用中開(kāi)發(fā)動(dòng)畫(huà),用于提示用戶(hù)進(jìn)度。

    但是,標(biāo)記語(yǔ)言提供的編程邏輯仍難以滿(mǎn)足用戶(hù)交互的需求。在Flex中,可以用ActionScript編程語(yǔ)言來(lái)編寫(xiě)事件監(jiān)聽(tīng)器來(lái)滿(mǎn)足此種需求。ActionScript是一種基于ECMA-262標(biāo)準(zhǔn)的、強(qiáng)類(lèi)型的面向?qū)ο笳Z(yǔ)言,和其他編程語(yǔ)言——java和C#很相似,因此也很易于上手。

    總而言之,當(dāng)編寫(xiě)一個(gè)Flex的應(yīng)用時(shí),需要用MXML來(lái)設(shè)置用戶(hù)界面,并用ActionScript來(lái)編寫(xiě)響應(yīng)用戶(hù)交互的邏輯。

    作為一個(gè)開(kāi)發(fā)者,你可以根據(jù)自己的喜好,用自己所熟悉的IDE(比如Eclipes或Intellij)手工編寫(xiě)MXML,也可以使用Flex支持的“所見(jiàn)即所得”開(kāi)發(fā)環(huán)境(目前開(kāi)發(fā)代號(hào)為Brady)。即使你選擇手工編寫(xiě)MXML,仍可使用Flex提供的XML schema,在IDE中為你提供代碼提示(code hinting)和代碼自動(dòng)填充(code completion)的功能.

    下面例子是一個(gè)名為HelloWord.mxml的簡(jiǎn)單Flex應(yīng)用的源代碼。該應(yīng)用程序有兩個(gè)TextInput組件,當(dāng)點(diǎn)擊Copy時(shí),source TextInput的內(nèi)容就會(huì)顯示在destination TextInput域中。以下例子顯示如何用MXML和ActionScript來(lái)創(chuàng)建應(yīng)用:用MXML定義用戶(hù)界面,再用ActionScript為Button組件的事件監(jiān)聽(tīng)器編寫(xiě)拷貝邏輯。

?xml version=“1.0“ encoding=“iso-8859-1“?>
mx:Application xmlns:mx=“http://www.macromedia.com/2003/mxml“>
mx:TextInput id=“source“ width=“100“/>
mx:Button label=“Copy“ click=“destination.text=source.text“/>
mx:TextInput id=“destination“ width=“100“/>
/mx:Application>

Flex開(kāi)發(fā)與部署模型

    要開(kāi)發(fā)并部署這個(gè)應(yīng)用,一般要經(jīng)過(guò)以下步驟:

    1. 用你熟悉的IDE或Flex的“所見(jiàn)即所得”開(kāi)發(fā)工具編寫(xiě)HelloWold.mxml文件。

    2. 把該文件部署到應(yīng)用服務(wù)器上。一般可以通過(guò)拷貝HelloWorld.mxml到某個(gè)web應(yīng)用的目錄下,或?qū)elloWorld.mxml作為應(yīng)用的一部分打包到WAR文件中去。

    當(dāng)一個(gè)用戶(hù)首次請(qǐng)求HelloWorld.mxml的時(shí)候,服務(wù)器會(huì)將MXML代碼編譯為Flash字節(jié)碼(一個(gè)SWF文件)。然后服務(wù)器將產(chǎn)生的SWF文件發(fā)往客戶(hù)端,讓Flash播放器執(zhí)行。對(duì)同一個(gè)MXML文檔的并發(fā)請(qǐng)求,服務(wù)器將跳過(guò)編譯過(guò)程,直接返回相同的編譯結(jié)果。

    如果你對(duì)JavaServer Pages比較熟悉,就會(huì)發(fā)現(xiàn)它們的模型非常相似。就像JSPs被編譯為Java字節(jié)碼(servlets)一樣,MXML文件將被編譯為Flash字節(jié)碼。二者的主要不同在于:在Flex中,產(chǎn)生的字節(jié)碼是在客戶(hù)端執(zhí)行的,而由JSP產(chǎn)生的Java字節(jié)碼(servlet)是在服務(wù)器端執(zhí)行的。通過(guò)Flex,你可以將復(fù)雜客戶(hù)端應(yīng)用無(wú)縫的集成到已有的商業(yè)邏輯中。

使用MXML用戶(hù)界面組件

    擁有豐富的用戶(hù)組件是Flex的一大特色。除了傳統(tǒng)的數(shù)據(jù)輸入控件(Text InputTextArea,CheckBox,RadioButton,ComboBox等等),MXML還包括了一些高級(jí)組件,用于維護(hù)結(jié)構(gòu)化數(shù)據(jù)(Tree 組件)和大數(shù)據(jù)集(DataGrid 組件)。為了清晰的組織數(shù)據(jù)及其處理過(guò)程,F(xiàn)lex還提供了導(dǎo)航組件(Tab,ViewStack,Accordion等等)。

    為了更易于組織用戶(hù)界面,F(xiàn)lex容器還定義了布局管理策略,用于指明一個(gè)組件相對(duì)與另一個(gè)組件的位置。Flex組件庫(kù)提供了大量的、可實(shí)現(xiàn)不同布局策略的容器。比如,在HBox中的組件將被水平排列,而在VBox中的組件會(huì)被垂直排列,而在Grid中組件將以行列的方式進(jìn)行排列,就象HTML的table一樣。View容器中沒(méi)有定義任何布局管理策略,因此你可以用x,y坐標(biāo)來(lái)指定組件的位置。

    下面給出一個(gè)在Flex環(huán)境下、具有三個(gè)面板的傳統(tǒng)e-mail界面。HBox容器中的Tree是水平排列的,而VBox容器中的DataGrid和TextArea則是垂直排列的。

?xml version=“1.0“ encoding=“iso-8859-1“?>
mx:Application xmlns:mx=“http://www.macromedia.com/2003/mxml“>
mx:HBox>
mx:Tree/>
mx:VBox>
mx:DataGrid/>
mx:TextArea/>
/mx:VBox>
/mx:HBox>
/mx:Application>

編寫(xiě)ActionScript代碼

    Flex語(yǔ)言是事件驅(qū)動(dòng)的。MXML將事件作為標(biāo)簽的屬性,你可以為它編寫(xiě)事件監(jiān)聽(tīng)器。比如,Button組件有一個(gè)click屬性,ComboBox,List和Tree組件有一個(gè)change屬性,等等。

    對(duì)于簡(jiǎn)單的交互,可以在標(biāo)簽的事件屬性上直接編寫(xiě)ActionScript語(yǔ)句。例如,在HelloWorld應(yīng)用中,存在Button的click事件監(jiān)聽(tīng)器中的ActionScripts語(yǔ)句,能把source TextInput 的內(nèi)容拷貝到destination TextInput中。

?xml version=“1.0“ encoding=“iso-8859-1“?>
mx:Application xmlns:mx=“http://www.macromedia.com/2003/mxml“>
mx:TextInput id=“source“ width=“100“/>
mx:Button label=“Copy“ click=“destination.text=source.text“/>
mx:TextInput id=“destination“ width=“100“/>
/mx:Application>

    當(dāng)邏輯更為復(fù)雜的時(shí)候,可以定義獨(dú)立的ActionScript函數(shù),然后在組件的事件監(jiān)聽(tīng)器中調(diào)用。例如,你可以象下面一樣,重寫(xiě)HelloWorld應(yīng)用:

?xml version=“1.0“ encoding=“iso-8859-1“?>
mx:Application xmlns:mx=“http://www.macromedia.com/2003/mxml“>
mx:script>
function copy() {
destination.text=source.text
}
/mx:script>
mx:TextInput id=“source“ width=“100“/>
mx:Button label=“Copy“ click=“copy()“/>
mx:TextInput id=“destination“ width=“100“/>
/mx:Application>

    創(chuàng)建一個(gè)MXML文件,實(shí)際上是創(chuàng)建了一個(gè)類(lèi)。定義在mx:script>標(biāo)簽中的ActionScript函數(shù)是該類(lèi)的方法。你可以在MXML文件或獨(dú)立的文件中定義ActionScript函數(shù)。選擇哪種方法,取決你所在的組織,后一種方法可以對(duì)開(kāi)發(fā)團(tuán)隊(duì)進(jìn)行更好的分工。

定義自己的組件

    在Flex中,你可以從頭開(kāi)始,或通過(guò)擴(kuò)展Flex組件庫(kù)中已有的組件,來(lái)創(chuàng)建自己的組件。創(chuàng)建組件就象創(chuàng)建一個(gè)應(yīng)用一樣:用MXML排布用戶(hù)界面,用ActionScript編寫(xiě)用界面邏輯。

    下面的一個(gè)例子是,通過(guò)擴(kuò)展VBox類(lèi)來(lái)創(chuàng)建簡(jiǎn)單的信用卡選擇組件。

?xml version=“1.0“ encoding=“iso-8859-1“?>
mx:VBox xmlns:mx=“http://www.macromedia.com/2003/mxml“>
mx:RadioButton groupName=“card“ id=“americanExpress“
label=“American Express“ selected=“true“/>
mx:RadioButton groupName=“card“ id=“masterCard“ label=“MasterCard“/>
mx:RadioButton groupName=“card“ id=“visa“ label=“Visa“/>
/mx:VBox>
    組件的名字就是源文件的名字。如,源文件的名字是CreditCardChooser.mxml,組件的名字就是CreditCardChooser,這樣,這個(gè)標(biāo)簽名就可以用了。下面的例子就用上了剛才創(chuàng)建的CreditCardChoose組件。

?xml version=“1.0“ encoding=“iso-8859-1“?>
mx:Application xmlns:mx=“http://www.macromedia.com/2003/mxml“>
mx:Label text=“Select a credit card:“/>
CreditCardChooser/>
/mx:Application>

    界面開(kāi)發(fā)者還能在Macromedia Flash開(kāi)發(fā)環(huán)境中創(chuàng)建復(fù)雜的可視化組件,并存為SWC文件。

    當(dāng)然,也可以只用ActionScript定義來(lái)整個(gè)組件,這種方法一般用于定義應(yīng)用中的非可視組件。你可能會(huì)為這樣商業(yè)對(duì)象創(chuàng)建非可視組件——例如,包含客戶(hù)端邏輯的購(gòu)物車(chē),或是應(yīng)用中helper類(lèi)

數(shù)據(jù)訪(fǎng)問(wèn)

    Macromedia Flex為面向服務(wù)器架構(gòu)(SOA – service-oriented architecture)而開(kāi)發(fā)。在這一模型中,應(yīng)用通過(guò)與分散在不同地方的服務(wù)進(jìn)行交互,來(lái)完成自己的任務(wù)。例如,如果創(chuàng)建一個(gè)在線(xiàn)旅行應(yīng)用,你需要與不同的服務(wù)進(jìn)行交互:全球旅館預(yù)定服務(wù),目的信息服務(wù),天氣服務(wù)等等。這些服務(wù)可能以不同的機(jī)制來(lái)提供,并且來(lái)自不同的地方。Flex使你能在客戶(hù)端匯集信息,并提供三種不同的數(shù)據(jù)服務(wù)組件,以滿(mǎn)足對(duì)服務(wù)提供者進(jìn)行特定數(shù)據(jù)訪(fǎng)問(wèn)的需求:WebService組件,HTTPService組件(一般使用XML通過(guò)HTTP進(jìn)行數(shù)據(jù)訪(fǎng)問(wèn))以及RemoteObject組件。MXML允許你用相應(yīng)的WebService, HTTPService, and RemoteObject標(biāo)簽來(lái)設(shè)置與服務(wù)的連接。

數(shù)據(jù)綁定

    在許多語(yǔ)言中,如何在用戶(hù)界面控件中顯示后臺(tái)數(shù)據(jù),是件令人頭疼的事情,而且非常容易出錯(cuò)。收集用戶(hù)在控件中輸入的數(shù)據(jù),并傳給遠(yuǎn)程服務(wù)也常常是件乏味的事情。

    Flex的特色之一,就是提供了雙向的數(shù)據(jù)綁定機(jī)制:你可以將用戶(hù)界面控件綁定到服務(wù)調(diào)用的數(shù)據(jù)結(jié)果集上,反過(guò)來(lái),也可以將服務(wù)的參數(shù)綁定到用戶(hù)界面控件輸入的值上。

下面是一個(gè)簡(jiǎn)單的股票報(bào)價(jià)應(yīng)用。例子使用了WebService標(biāo)簽來(lái)設(shè)置與XMMethods提供的股價(jià)web服務(wù)進(jìn)行連接。這個(gè)例子闡明了Flex的雙向綁定功能。getQuote方法的symbol輸入?yún)?shù)被綁定到symbol TextInput組件上。quote標(biāo)簽被綁定到getQute方法的調(diào)用結(jié)果上。

?xml version=“1.0“ encoding=“iso-8859-1“?>
mx:Application xmlns:mx=“http://www.macromedia.com/2003/mxml“>
mx:WebService id=“wsStock“ wsdl=“http://services.xmethods.net/soap/urn:xmethods-delayed-quotes.wsdl“>
mx:operation name=“getQuote“>
mx:request>
symbol>{symbol.text}/symbol>
/mx:request>
/mx:operation>
/mx:WebService>
mx:Label text=“Enter a symbol:“/>
mx:HBox>
mx:TextInput id=“symbol“/>
mx:Button label=“Get Quote“ click='wsStock.getQuote.send()'/>
/mx:HBox>
mx:Label id=“quote“ fontWeight=“bold“>{wsStock.getQuote.result}/mx:Label>
/mx:Application>

    實(shí)際上,F(xiàn)lex數(shù)據(jù)綁定機(jī)制比傳統(tǒng)的重取/顯示(retrieve/display)方式更勝一籌:在Flex應(yīng)用中,你可以將任意對(duì)象的任意屬性綁定到另一任意對(duì)象的任意屬性值上。

使用層級(jí)樣式表(CSS)

    Flex使用層級(jí)樣式表標(biāo)準(zhǔn)來(lái)保證用戶(hù)界面的一致性,并使應(yīng)用更易于維護(hù)。就像在HTML中一樣,你可以在應(yīng)用中嵌入一個(gè)指向外部的樣式表,或在特定的標(biāo)記元素下將某種風(fēng)格定義為其屬性。樣式表還允許定義字體。所需字體定義內(nèi)嵌于應(yīng)用的字節(jié)碼中,即使用戶(hù)的機(jī)器上沒(méi)有這樣的字體,也能被正確的渲染出來(lái)。

    下面是一個(gè)名為main.css的外部樣式表。

@font-face {
src: url(“LucidaSansRegular.ttf“);
font-family: mainFont;
}

.error {color: #FF0000; font-size: 12;}
.title {font-family: mainFontBold;font-size: 18;}
TextArea {backgroundColor: #EEF5EE;}

    下面的例子通過(guò)使用mx:style>標(biāo)簽聲明了一個(gè)外部樣式表,并對(duì)不同的控件使用了不同的樣式。

?xml version=“1.0“ encoding=“iso-8859-1“?>
mx:Application xmlns:mx=“http://www.macromedia.com/2003/mxml“>
mx:style src=“main.css“/>
mx:Label styleName=“error“ text=“This is an error“/>
mx:Label styleName=“title“ text=“This is a title“/>
mx:TextArea width=“200“ height=“100“ wordWrap=“true“>This is a TextArea/mx:TextArea>
/mx:Application>

特效

    復(fù)雜Internet應(yīng)用常常被拿來(lái)和客戶(hù)/服務(wù)器應(yīng)用進(jìn)行比較。因?yàn)樗鼈兲峁┝送患?jí)別的用戶(hù)體驗(yàn)。但是,容易忽視的區(qū)別是,兩者的用戶(hù)各具特點(diǎn)。使用客戶(hù)/服務(wù)器應(yīng)用的客戶(hù)通常是備受折磨后,最終適應(yīng)了他們需要面對(duì)的用戶(hù)界面。而復(fù)雜Internet應(yīng)用的客戶(hù)通常是臨時(shí)性的用戶(hù)。在這樣的條件下,一個(gè)不直觀(guān)的用戶(hù)界面將會(huì)喪失機(jī)會(huì)。

    適當(dāng)?shù)氖褂锰匦?,如浮?dòng)提示和進(jìn)度狀態(tài),有助于客戶(hù)直觀(guān)的了解當(dāng)前內(nèi)容。在MXML中,你可以通過(guò)設(shè)置動(dòng)畫(huà)達(dá)到這一目的。

    下面的例子使用了Flex特性庫(kù)中的prebuilt特效,在這個(gè)例子中,當(dāng)square組件顯示時(shí),使用WipeRight特效,而消失時(shí)則使用了WipeLeft特效。

?xml version=“1.0“ encoding=“iso-8859-1“?>
mx:Application xmlns:mx=“http://www.macromedia.com/2003/mxml“>
mx:View id=“square“ width=“100“ height=“100“ backgroundColor=“#666699“ showEffect=“WipeRight“ hideEffect=“WipeLeft“/>
mx:HBox>
mx:Button label=“Display“ click=“square.visible=true“/>
mx:Button label=“Hide“ click=“square.visible=false“/>
/mx:HBox>
/mx:Application>

總結(jié)

    Flex語(yǔ)言包含了一個(gè)豐富的用戶(hù)界面組件庫(kù),MXML(一種基于XML的標(biāo)記語(yǔ)言)和ActionScript(基于ECMA 262的、強(qiáng)類(lèi)型面向?qū)ο缶幊陶Z(yǔ)言)。MXML用于排布用戶(hù)界面和處理應(yīng)用中其他方面的問(wèn)題,而ActionScript用來(lái)處理用戶(hù)交互邏輯。由于Flash平臺(tái)的普及,F(xiàn)lex使開(kāi)發(fā)者可以開(kāi)發(fā)廣泛的應(yīng)用程序。開(kāi)發(fā)者可以使用工業(yè)標(biāo)準(zhǔn)(如XML,CSS和SVC)和他們所熟悉的模式和范例來(lái)創(chuàng)建應(yīng)用。Flex的分離協(xié)作方式和Macromedia公用組件模型也使得開(kāi)發(fā)者和界面設(shè)計(jì)者能更好的進(jìn)行協(xié)作,在可靠的、易于維護(hù)的架構(gòu)上生產(chǎn)出在用戶(hù)體驗(yàn)方面有突破性的產(chǎn)品。

關(guān)于作者:
    從 1994-2000 年,Christophe Coenraets 服務(wù)于 Powersoft 公司,該公司現(xiàn)在已被Sybase并購(gòu)。他用Java工作始于1996年,并成為公司Java and Internet Application 部門(mén)的技術(shù)專(zhuān)員。Christophe后來(lái)加入Macromedia公司成為公司J2EE應(yīng)用服務(wù)器JRun的技術(shù)專(zhuān)員。Christophe在這一職位上開(kāi)始研究復(fù)雜Internet應(yīng)用,著手將Flash前端與J2EE后端進(jìn)行集成,Christophe 目前是 Macromedia 的 new developer-centric Rich Internet Applications initiative的高級(jí)專(zhuān)員。過(guò)去的十年間,Christophe經(jīng)常在全球范圍的研討會(huì)中發(fā)言。 
您可能感興趣的文章:
  • 詳解如何在Mac上用匯編語(yǔ)言寫(xiě)HelloWorld
  • 易語(yǔ)言開(kāi)發(fā)mac查看器教程
  • 易語(yǔ)言隨機(jī)生成MAC地址的代碼
  • 在Mac中搭建go語(yǔ)言開(kāi)發(fā)環(huán)境的操作步驟
  • 在Mac OS上安裝Go語(yǔ)言編譯器的方法
  • 怎么通過(guò)C語(yǔ)言自動(dòng)生成MAC地址
  • Mac如何給應(yīng)用單獨(dú)設(shè)置語(yǔ)言

標(biāo)簽:臺(tái)州 濟(jì)寧 汕頭 廣東 泰安 濟(jì)源 安徽 武威

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《Macromedia Flex 標(biāo)記語(yǔ)言簡(jiǎn)介》,本文關(guān)鍵詞  Macromedia,Flex,標(biāo)記,語(yǔ)言,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《Macromedia Flex 標(biāo)記語(yǔ)言簡(jiǎn)介》相關(guān)的同類(lèi)信息!
  • 本頁(yè)收集關(guān)于Macromedia Flex 標(biāo)記語(yǔ)言簡(jiǎn)介的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章