大主宰,好看的玄幻小说

主頁 > 知識庫 > Macromedia Flex 標記語言簡介

Macromedia Flex 標記語言簡介

Macromedia Flex 標記語言簡介
    Macromedia Flex(開發(fā)代號為Royale)是一個展現(xiàn)服務器，開發(fā)者可以用它來開發(fā)新一代的“復雜Internet應用”(RIAs - Rich Internet Applications)。復雜Internet應用融合了桌面應用的可用性和web應用的易于管理的優(yōu)點。

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

    本文將專注于Flex語言的關鍵部分。

    為了運行本文中提到的代碼，你可能需要加入Flex的Beta測試。Flex運行于象Macromedia JRun, IBM Websphere, BEA WebLogic, or Apache Tomcat 這樣的J2EE應用服務器之上。Flex未來將支持Microsoft .NET服務器。

Flex 語言簡介

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

    除了排布可視組件，還可以用MXML來定義應用中其他重要方面，如，可以把應用定義為一個web服務的客戶，或是在應用中開發(fā)動畫，用于提示用戶進度。

    但是，標記語言提供的編程邏輯仍難以滿足用戶交互的需求。在Flex中，可以用ActionScript編程語言來編寫事件監(jiān)聽器來滿足此種需求。ActionScript是一種基于ECMA-262標準的、強類型的面向?qū)ο笳Z言，和其他編程語言——java和C#很相似，因此也很易于上手。

    總而言之，當編寫一個Flex的應用時，需要用MXML來設置用戶界面，并用ActionScript來編寫響應用戶交互的邏輯。

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

    下面例子是一個名為HelloWord.mxml的簡單Flex應用的源代碼。該應用程序有兩個TextInput組件，當點擊Copy時，source TextInput的內(nèi)容就會顯示在destination TextInput域中。以下例子顯示如何用MXML和ActionScript來創(chuàng)建應用：用MXML定義用戶界面，再用ActionScript為Button組件的事件監(jiān)聽器編寫拷貝邏輯。

?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開發(fā)與部署模型

    要開發(fā)并部署這個應用，一般要經(jīng)過以下步驟：

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

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

    當一個用戶首次請求HelloWorld.mxml的時候，服務器會將MXML代碼編譯為Flash字節(jié)碼（一個SWF文件）。然后服務器將產(chǎn)生的SWF文件發(fā)往客戶端，讓Flash播放器執(zhí)行。對同一個MXML文檔的并發(fā)請求，服務器將跳過編譯過程，直接返回相同的編譯結果。

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

使用MXML用戶界面組件

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

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

    下面給出一個在Flex環(huán)境下、具有三個面板的傳統(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>

編寫ActionScript代碼

    Flex語言是事件驅(qū)動的。MXML將事件作為標簽的屬性，你可以為它編寫事件監(jiān)聽器。比如，Button組件有一個click屬性，ComboBox，List和Tree組件有一個change屬性，等等。

    對于簡單的交互，可以在標簽的事件屬性上直接編寫ActionScript語句。例如，在HelloWorld應用中，存在Button的click事件監(jiān)聽器中的ActionScripts語句，能把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>

    當邏輯更為復雜的時候，可以定義獨立的ActionScript函數(shù)，然后在組件的事件監(jiān)聽器中調(diào)用。例如，你可以象下面一樣，重寫HelloWorld應用：

?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)建一個MXML文件，實際上是創(chuàng)建了一個類。定義在mx:script>標簽中的ActionScript函數(shù)是該類的方法。你可以在MXML文件或獨立的文件中定義ActionScript函數(shù)。選擇哪種方法，取決你所在的組織，后一種方法可以對開發(fā)團隊進行更好的分工。

定義自己的組件

    在Flex中，你可以從頭開始，或通過擴展Flex組件庫中已有的組件，來創(chuàng)建自己的組件。創(chuàng)建組件就象創(chuàng)建一個應用一樣：用MXML排布用戶界面，用ActionScript編寫用界面邏輯。

    下面的一個例子是，通過擴展VBox類來創(chuàng)建簡單的信用卡選擇組件。

?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，這樣，這個標簽名就可以用了。下面的例子就用上了剛才創(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>

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

    當然，也可以只用ActionScript定義來整個組件，這種方法一般用于定義應用中的非可視組件。你可能會為這樣商業(yè)對象創(chuàng)建非可視組件——例如，包含客戶端邏輯的購物車，或是應用中helper類

數(shù)據(jù)訪問

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

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

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

    Flex的特色之一，就是提供了雙向的數(shù)據(jù)綁定機制：你可以將用戶界面控件綁定到服務調(diào)用的數(shù)據(jù)結果集上，反過來，也可以將服務的參數(shù)綁定到用戶界面控件輸入的值上。

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

?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>

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

使用層級樣式表（CSS）

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

    下面是一個名為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;}

    下面的例子通過使用mx:style>標簽聲明了一個外部樣式表，并對不同的控件使用了不同的樣式。

?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>

特效

    復雜Internet應用常常被拿來和客戶/服務器應用進行比較。因為它們提供了同一級別的用戶體驗。但是，容易忽視的區(qū)別是，兩者的用戶各具特點。使用客戶/服務器應用的客戶通常是備受折磨后，最終適應了他們需要面對的用戶界面。而復雜Internet應用的客戶通常是臨時性的用戶。在這樣的條件下，一個不直觀的用戶界面將會喪失機會。

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

    下面的例子使用了Flex特性庫中的prebuilt特效，在這個例子中，當square組件顯示時，使用WipeRight特效，而消失時則使用了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>

總結

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

關于作者:
    從 1994-2000 年，Christophe Coenraets 服務于 Powersoft 公司，該公司現(xiàn)在已被Sybase并購。他用Java工作始于1996年，并成為公司Java and Internet Application 部門的技術專員。Christophe后來加入Macromedia公司成為公司J2EE應用服務器JRun的技術專員。Christophe在這一職位上開始研究復雜Internet應用，著手將Flash前端與J2EE后端進行集成，Christophe 目前是 Macromedia 的 new developer-centric Rich Internet Applications initiative的高級專員。過去的十年間，Christophe經(jīng)常在全球范圍的研討會中發(fā)言。

您可能感興趣的文章:

詳解如何在Mac上用匯編語言寫HelloWorld
易語言開發(fā)mac查看器教程
易語言隨機生成MAC地址的代碼
在Mac中搭建go語言開發(fā)環(huán)境的操作步驟
在Mac OS上安裝Go語言編譯器的方法
怎么通過C語言自動生成MAC地址
Mac如何給應用單獨設置語言

標簽：臺州濟寧汕頭廣東泰安濟源安徽武威

巨人網(wǎng)絡通訊聲明：本文標題《Macromedia Flex 標記語言簡介》，本文關鍵詞 Macromedia,Flex,標記,語言,；如發(fā)現(xiàn)本文內(nèi)容存在版權問題，煩請?zhí)峁┫嚓P信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡，涉及言論、版權與本站無關。

濮阳杆衣贸易有限公司

Macromedia Flex 標記語言簡介