MXML

XML與MXML的關係
因為標記語言是一種很適合用來表示使用者介面的語言,所以Micromedia以XML為基礎建立了一種使用者標記語言,MXML。

MXML的歷史
起初Macromedia並沒有賦予MXML這個縮寫一個官方的意義,但某些開發者提議它應該代表「Magic eXtensible Markup Language」。但MXML這個名字有可能源自於MX的詞尾,被賦予在2002和2004年釋出的Macromedia Studio產品。應用開發者使用MXML並結合ActionScript以發展Rich Internet Applications(RIA)。後來Micromedia於2005年12月被Adobe收購了。

MXML概觀
MXML可以用來對你的應用做使用者介面的排版,就像是使用HTML一樣。也正因為MXML是一個XML-based的標記語言,所以比起HTML他更有組織相對的也更少模糊不清的語法。MXML也包含了一群比HTML更豐富的tag群。舉個例來說,DataGrid、Three、 TabNavigator、Accordion以及Menu這些全都包含在標準的tag群之中。開發者也可以衍伸這些既有的MXML tags來製作出屬於自己的元件。但MXML最特別的地方是,由MXML所定義出的使用者介面被使用Flash Player來執行,也因此它可以提供使用者更豐富、更視覺化的使用體驗。

MXML經常與Flex Server一起使用,它可編譯MXML成為標準的二位元SWF檔。然而,Adobe的Flex Builder IDE和免費的Flex SDK也可以從MXML產生SWF而不需透過Flex Server。

由於MXML緊密的與Adobe的技術整合,因此它被認為是一個私有的標準。這方面就像是XAML。因為它不存在一個已發表的轉換器,可以用來轉換一個MXML文件成為其他使用者介面語言,像是UIML、 XUL、XAML或是SVG。

MXML只是一個標記語言,它無法實作程式邏輯的部分,而邏輯的部分則可以利用ActionScript來完成。稍後我們會提到Flex這個技術,它就是一種整合了MXML與ActionScript的技術。

順帶一提:
假如你熟悉JavaServer Pages的話,以下的例子將會非常的相似。MXML檔案被編譯成Flash bytecode就如同JSPs被編譯成Java bytecode(servlets)。其中最主要的不同是Flex產生出的bytecode在客戶端執行,然而JSP產生的Java bytecode在伺服器端執行。

MXML的語法結構
MXML只是一份純文字文件,所以它可以使用任意的文字編輯器、XML編輯器,或者可以操作文字或XML的IDE撰寫MXML。
MXML文件分為兩種:

  1. 應用程式文件,它使用Application節點作為根節點。也只有以Application作為根節點的MXML文件可以被編譯成Flex應用程式。
  2. 元件文件,它使用自訂名稱的節點作為根節點。一個元件文件並無法編譯成可執行的Flex應用程式,但它可以用來封裝片段的程式,或是可以稱為子程式,它可包含完整的ActionScript logic與UI layout。

以Java的觀點來看,應用程式文件可以被看成是一支包含main的主程式,而元件文件就是一些自定義的class。

  • 應用程式文件:所有的FLEX應用程式都需要有一個應用程式文件,這份文件由MXML所構成,下面是範例:

<?xml version="1.0" encoding="UTF-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
</mx:Application>

  • 元件文件:用來定義MXML的元件,下面是範例:

<?xml version="1.0" encoding="UTF-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
</mx:Canvas>

  • Namespace概念
    首先要先認識執行期間共用之程式庫

靜態連結

動態連結

當我們在MXML文件中需要引入執行期間共用之程式庫時,就必須使用Namespace把程式庫類別和MXML元件對應至標籤(tag)。

 

  • 讓MXML具互動性
    MXML可用於建立使用者介面,但是一個靜態的內容並非RIA的特徵。使用者期待能和應用程式互動。有兩種方式可以在MXML之內建立互動性:處理事件和資料繫結。
    • 處理事件
      程式監聽元件,並在該元件被觸發時以ActionScript來處理這項事件。(等同於HTML元件被觸發時以JacaScript來處理)
    • 資料繫結
      資料繫結(data binding)是一種功能,你可以用它把元件連結至另一個元件或ActionScript物件。資料繫結在一個物件的值有改變時,會自動更改另一個相連結的物件之值。

開發工具與開發
若單純只是要寫一份MXML文件,如同先前所說的,它只需要一個文字編輯器即可。但如果是要開發一套完整的Flex程式則需要使用到Flex SDK來進行編輯,而Flex SDK是免費的。也因為MXML與Flex的關係十分緊密所以接下來我們將會介紹Flex這項技術。

  • FLEX概觀
    Flex可以迅速的用Flash打造應用程式,而且所發展出來的應用程式環境可以提供一個精緻的使用者介面和良好的互動性,而且使開發的過程變的更簡單容易,只要透過適當的工具和FLEX SDK。雖然用FLEX Builder是最方便的(可是要錢),但還是可以透過一些開發工具加上SDK來完成一個專案的開發,可以用現成的元件組織成一個所要的應用程式頁面,幾乎可以說是把應用程式活生生的搬到瀏覽器上面來開發與使用。使用Flex framework的時候會建立和編譯出.swf格式,編譯後的.swf其實上來說是一個擔任中間轉換的格式,可以讓Flash Player讀取,現在的Flash 9使用AVM2,.swf的內容在執行時不再採直譯的方式,而是預先編譯了,如此一來Flash 9的效能相較於先前的版本執行的速度變得更快。
  • Flex的結構
    Flex分為兩部分,一部份是標記語言(MXML),一部份是物件導向程式語言(ActionScript)。
    因為開發Flash時需要比較多的美感和設計感還有明確的影格觀念,對於一般的工程師來說太難(通常工程師都沒什麼美感),為了讓這些工程師能夠以自己熟悉的方法(即coding)來設計,所以經由Flex可以改善以上這些問題。
  • 開發技巧
    一個Flex應用可以寫在單一的檔案中也可以分成多個MXML與ActionScript檔案,通常每個檔案代表不同的模組,主檔案中有 <mx:Application> 標籤。
    不將一個應用寫成單一檔案而分成不同子檔案有以下好處:
    - 便於開發-可由多個人或團隊分別開發不同的模組。
    - 可重複使用-不同的應用可使用同一個模組,不需重寫。
    - 容易維護-可以獨力除錯,除錯的速度較將所有模組寫在同一檔案中快。

 

相似技術

  • LZX (OpenLaszlo)
  • XAML (Silverlight)
  • XUL

OpenLaszlo is an open source platform for the development and delivery of rich Internet applications. It is released under the Open Source Initiative-certified Common Public License.
The OpenLaszlo platform consists of the LZX programming language and the OpenLaszlo Server:
LZX is an XML and JavaScript description language similar in spirit to XUL, MXML, and XAML. LZX enables a declarative, text-based development process that supports rapid prototyping and software development best practices. It is designed to be familiar to traditional web application developers who are familiar with HTML and Javascript.
The OpenLaszlo Server is a Java servlet that compiles LZX applications into executable binaries for targeted run-time environments.

(擷取自http://en.wikipedia.org/wiki/OpenLaszlo)

參考資料

歐萊禮 Flex2程式設計 ISBN:978-986-6840-11-1
http://www.adobe.com/devnet/flex/articles/paradigm.html
http://en.wikipedia.org/wiki/MXML
http://www.slideshare.net/search/slideshow?q=flex&submit=post&commit=Search
http://www.youtube.com/watch?v=rT5bKw7WAW0&feature=related
http://www.youtube.com/watch?v=q-EtYAHqnQg&feature=related
http://www.youtube.com/watch?v=08rOmQQiaDM&feature=related
http://www.youtube.com/watch?v=z0YTZm1v7qQ&feature=related
http://lpis.csd.auth.gr/curriculum/AI/material/flx_tut.pdf
http://download.macromedia.com/pub/documentation/en/flex/2/flex2_getting...
http://www.adobe.com/devnet/flex/quickstart/coding_with_mxml_and_actions... (Quick Start)
http://weco.net/blog/jack207/26-dec-2006/5689 (exprience)
http://www.youtube.com/watch?v=4DyNmblrG34&feature=related
http://www.youtube.com/watch?v=7X3sCPh16yc&feature=related (-part1)
http://www.youtube.com/watch?v=THzx8tGyGrI&feature=related (-part2)
http://www.devarticles.com/c/a/Flash/Introduction-to-Flex/
http://www.youtube.com/watch?v=vwHhhPnM4b4&feature=related
http://www.youtube.com/watch?v=D_4n_uk_fOg&feature=related
http://www.youtube.com/watch?v=WkmH25kJ_M8&feature=related
http://www.youtube.com/watch?v=WkmH25kJ_M8&feature=related
http://weco.net/blog/william/29-may-2007/4804
http://www.techcrunch.com/tag/adobe-flex/
http://www.techcrunch.com/2007/04/26/adobe-open-sources-parts-of-flex-pl...
http://www.azavar.com/solutions/web_2_adobe_flex_white_paper_capacity_pl... (MXML Compliation)
http://edu.uuu.com.tw/2006TECH/course/UM001.htm
http://www.adobe.com/products/flex/overview/
http://www.youtube.com/watch?v=4DyNmblrG34
http://sls.weco.net/blog/shagu763/25-mar-2007/3593
http://209.85.175.104/search?q=cache:8v-RJsaXB4gJ:weco.net/blog/qazwsx/f...(OpenLaszlo)&hl=zh-TW&ct=clnk&cd=1&gl=tw&lr=lang_zh-TW
http://bea-taiwan.blogspot.com/2005/08/weblogic-81openlaszlo-30.html
http://en.wikipedia.org/wiki/Openlaszlo
http://livedocs.adobe.com/flex/3/html/help.html?content=mxml_1.html