Web 應用程序就要進入下一級別了，Rich Internet Application (RIA) 可以極大地增強用戶交互。在本文對 RIA 的概述中，您將學習如何將其應用于用戶界面 (UI) 層。Web 開發人員和架構師可能對該領域里當前可用的幾種常見技術 —— Laszlo、XUL、XForms、 Macromedia Flex 和 Dojo 的討論特別感興趣。本文還包括其他技術的鏈接。本文假設您相當了解傳統的 UI 工具，比如 HTML 和 XML。

Rich Internet Application (RIA) 超出了 HTML 提供的傳統用戶界面 (UI) 控件的標準有限集合，比如文本框、復選框或單選按鈕。RIA 為用戶提供了豐富得多的控件集合，以及一種更加高級的服務器交互機制。使用 RIA，當從瀏覽器提交數據時，用戶不必刷新頁面；他們可以僅刷新頁面的一部分，具有更好的錯誤處理，等等。

本文內容包括：

• RIA 概述
• UI 技術，包括 Laszlo、XUL、XForms、Dojo 和 Macromedia Flex
• 工具比較
• 其他技術

  RIA 概述

  術語 “Rich Internet Application” 已經出現幾年了，但該概念還被稱為：

  • 遠程腳本
  • X Internet
  • 富 (Web) 客戶機
  • 富 Web 應用程序

   

  Internet 是信息的巨大來源，許多技術在努力以高級和用戶友好的方式改進 Web 上的信息傳遞和存儲性能。在大多數 Web 應用程序中，大量處理發生在服務器端，只有用戶交互發生在客戶機端。從而使服務器承擔了沉重的數據和處理負載，以及網絡通信中不斷增加的依賴性。

  傳統的基于客戶機-服務器的架構具有高的靈活性和豐富性，但隨著 Web 的成長而日漸消亡。一個原因是缺乏客戶機應用程序的一致性和標準化。現在，勿庸置疑，瀏覽器是已經被人們普遍接受的 Web 工具。但是，它缺乏智能處理。所以責任在于可以交付更豐富的用戶體驗并能在客戶端進行簡單處理的客戶機應用程序。RIA 提供了設計更好、更快、更吸引人并更無限可用的用戶體驗的機會 —— 全部在瀏覽器中實現。

  致力于 Web 和 internet UI 層的開發人員通常在 UI 層上進行試驗，嘗試可以在最少外部支持下有效工作的各種 RIA 工具。但是，在多數情況下，瀏覽器需要一些支持以使插件、擴展或下載在瀏覽器內部無縫工作。

  本文討論有助于為業務案例確定最佳 RIA 選擇的工具和參數。本文不可能討論 RIA 的所有因素，但我將重點介紹您在評估 RIA 技術時審核的一些重要特性。

  評估內容

  評估 RIA 技術時，需要考慮下列因素：

  UI 豐富性

  開發 UI 時有多少基本的、開箱即用的 UI 小部件或控件可以使用？可以如何使用這些控件進行數據綁定和事件綁定？新控件應易于使用，并易于插卸。一些 RIA 技術提供了添加豐富性的簡單方法和信息更豐富的可視體驗，比如頁面中的動畫 API。例如，為了確保用戶僅點擊某個按鈕一次，可以將此按鈕做成動畫以從視圖中移出。

  復雜性

  開發人員已經使用現有的基于頁面的模型很多年了，因為它簡單易用，但是可能很笨重。RIA 技術必須易于使用、構建和擴展。它還應該與現有 Web 技術相互操作。

  靈活性和組件化

  與不同中間件組件協作的靈活性非常重要。協作應該能夠容易地組合和擴展，以創建新的自定義小部件。創建自定義小部件之后，就可以在應用程序中重用它們。

  刷新頁面

  刷新頁面的一塊而不是整個頁面有非常顯著的好處，因為它直接依賴于網絡流量。刷新一塊使得應用程序更快、更可用并使用戶具有更好的視覺體驗。它還有助于更好地管理錯誤。

  假設用戶在網頁上執行一個操作或第一個任務，并且數據在后臺提交給服務器。然后用戶在同一頁面上繼續執行另一個任務。同時，來自第一個任務的反饋已經返回并更新同一頁面的某個部分。因此，如果這樣設計網頁，則會使工作和任務更有效率。

  安全性

  采用 RIA 時，確保與傳統應用程序相比不會增加安全性威脅。一定要清楚圍繞服務器通信或下載在客戶機上的瀏覽器插件和擴展的安全性。

  對基本 Web 范例的支持

  技術應支持當今 Web 應用程序中涉及的基本 Web 范例，比如國際化、用戶設備獨立、瀏覽器獨立和對上載和下載功能的二進制文件傳輸支持。甚至技術的成熟度也很重要。

  工具

  檢查以集成開發環境 (IDE) 形式可供開發人員使用的工具，以及單元測試和調試支持。工具可以是帶有現有編輯器或受支持編輯器的插件。

  可用性

  用戶期望瀏覽器應用程序使用常用的瀏覽器功能。具體來說，保存圖片、Ctrl+F 以搜索頁面上的內容以及復制粘貼等功能不能在基于 Flash 的解決方案中工作。以人機交互 (HCI) 原理設計您的 RIA 可用性。

  
  
  

  UI 技術

  本節討論當前 UI 技術提供的一些不同選項。

  Laszlo

  Laszlo 是領先的開放源碼平臺，用于在 Web 中使用 Flash 來開發和交付 RIA。Flash 播放器最初具有一個小插件以在瀏覽器中運行 Flash 文件。因為其高可靠性和兼容性，它被擴展用于創建閃爍的動畫圖片。后來的版本合并了一些重要的腳本兼容性、與服務器的數據交換，Flash 6 添加了雙向音頻和視頻通信。

  Laszlo 已經擴展了該豐富性，使用腳本語言來生成 Flash 并交付給瀏覽器。它提供了一個用于構建 RIA 的開發源碼 XML 本地平臺。

  什么是 XPath？ XML Path Language 是 W3C 推薦的語言，設計用于尋址 XML 文檔中的信息。XPath 的主要目的在于導航 XML 文檔中的任何節點和屬性。

  它只需要在任何瀏覽器上安裝 Flash 5.x+。腳本以一種叫做 LZX 的基于 XML 的語言編寫。LZX 是一種面向對象的基于標記的語言，使用 XML 和 JavaScript 語法創建動態生成的 Flash 文件。服務器上的 LZX 編譯器編譯 LZX 文件并將 Flash 發送到瀏覽器中。實際的數據交換是以 XML 形式進行的，LZX 控件使用 XPath 來表示 XML。事件也很容易與控件綁定。每個控件定義一組可以從父事件繼承事件的事件。清單 1 中的示例展示了如何使用事件。

  
  清單 1. 示例 simplelaszlo.lzx
  

  <canvas width="500" height="80"> <view> <text align="center" valign="middle">Hello, World!</text> <button >Update <method event="onclick"> Debug.write("Button pressed"); </met> </button> </view> </canvas>

  
  

  您將發現 Laszlo 易于學習、開發新組件、組件化并與任何 Web 應用程序集成。與其他 RIA 工具相比，它具有豐富的組件庫。

  LZX 能夠讓 HTTP 和 Web 服務使用 SOAP 和 RPC 協議在后臺請求服務器，而無需刷新頁面。插件已經就緒，可以將任何 Web 應用程序文件與 Laszlo 庫集成。當前，基于 Eclipse 的 IDE 可供開發使用。還有一些工具可用于在客戶端的 LZX 中進行調試。有趣的是，它們還提供了 Lzunit 框架以用于測試 Laszlo 應用程序。

  最近，Laszlo 宣布了支持使用相同的現有框架將應用程序以 DHTML 交付給瀏覽器。這使您可以選擇配置時希望將應用程序交付為 DHTML 還是 Flash。Laszlo 還擴展了對 Ajax 社區和多個設備交付的支持。

  圖 1 展示了 Laszlo 和 Dojo 的示例。

  
  圖 1. 用 Laszlo 和 Dojo 創建的 RIA 圖片
  
  

  XUL

  XML 用戶界面語言 (XUL) 是 Mozilla 的基于 XML 的跨平臺語言，用于描述應用程序的用戶界面。它提供了可用于頁面中的現成組件庫。目前，它僅應用于基于 Gecko 的瀏覽器中，比如 Mozilla Firefox 或 Netscape 6 以上版本。

  XUL 使用基于 XML 的標記語言描述用戶界面控件。它提供了各種流行的富 Internet 控件，比如菜單、選項卡、樹和彈出菜單。XUL 使用文檔對象模型 (DOM) 存儲節點樹。加載了所有 XUL 文件之后，XUL 將所有標記解析并轉換為層次文檔結構的節點。然后可以使用此 DOM 結構、DOM 結構的方法以及 XUL 函數提供的其他方法來檢查并修改數據。您始終可以從 JavaScript 訪問并操作 DOM，并使之像典型的 HTML 控件一樣易于處理。每個控件和每個節點都具有多個屬性來定義其外觀和結構。

  從遠程位置訪問時，瀏覽器像處理 HTML 或其他瀏覽器內容一樣處理 XUL 文件。但是，當它們作為擴展而本地安裝在其 chrome 系統的瀏覽器中時，條目將收到訪問系統和書簽的特殊權限。在這種情況下，它可以執行其他的特權操作。

  Mozilla 瀏覽器本身也是一組軟件包，其中包括 XUL 文件、JavaScript 和樣式表，但它是相當大的而且非常復雜的擴展。

  XUL 使用 eXtensible Bindings Language (XBL) 進行綁定。每個控件可以使用 Mozilla 的 XBL 被綁定。XUL 使用 RDF 格式，可用于存儲資源。可以使用其他格式的數據，并從中創建 RDF 數據，該數據將綁定到 XUL 格式。

  因為 XUL 類似于 XML 文件，所以可以使用 IDE 的任何文本編輯器或 XML 編輯器。因為相同的底層代碼處理所有 XUL 文件、HTML 和 SVG，所以可以使用 CSS 屬性設置 XUL 文件的樣式。它對定位具有內置支持，因為所有文本內容在瀏覽器中是保持分離的。

  皮膚 在 Mozilla 中由 CSS 文件組成，定義瀏覽器的用戶界面。可以為不同的外觀修改和創建皮膚，而無需更改代碼。它類似于通過添加功能來擴展瀏覽器 API 的功能。

  如果在 Mozilla Firefox 中運行 清單 2 中的文件，它將呈現一個文本框和按鈕。

  
  清單 2. 示例 simplexul.xul
  

  <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="example-window" title="Example 2.4.1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <label control="label" value="Enter some text"/> <textbox id="textid"/> <button id="yes" label="Yes"/> </window>

  
  

  XForms

  XForms 1.0 提供了一種新的用于聯機交互的平臺獨立標記語言。W3C 已經出現了用于實現 XForms 的規范，而且 XForm 被認為是 HTML 形式的繼任者。

  XForms 獨立于表示設備。無需對傳統瀏覽器、PDA 移動電話、語言瀏覽器、甚至一些更奇怪的新興客戶機（比如 instant messenger）進行任何更改，就可以傳遞 XForms。這使得 XForms 成為更吸引 RIA 的工具。

  在 XForms 中，實際數據（XML 表單定義）與表單表示分離。這種設備獨立的 XML 表單定義叫做 XForms 模型，可以用于許多標準的或專用的用戶界面。

  XForms 用戶界面提供了一組標準的可視控件，旨在于替換當今的 XHTML 表單控件。它們可用于 XHTML SVG 或其他組、語言瀏覽器組中，還可以獨立開發 XForms 的用戶界面組件。XForms 模型被引用在每個 XForms 控件中以呈現數據。它遵循 XPath 以引用 XML 中的元素。提交數據時，它只能提交已填充的 XML 數據模型。

  XML 事件 XML 事件 是一種 XML 語言，能夠一致地將事件監聽器和關聯的事件處理程序與 DOM 事件集成。當事件發生時，它被通過文檔樹路徑分配給元素（目標），并可以再次傳遞回樹中。觀察者可以響應路徑中的事件。

  XForms 使用 XML 事件來處理事件和動作。XML 事件指定事件、觀察者和處理程序。正如 清單 3 所示，DOMActivate 是事件，消息元素是處理程序，父觸發器是觀察者。

  可以將 XForms 與 AJAX 集成。當前，在 W3C 中，可以找到 20 多個 XForms 示例實現。許多供應商，其中包括 IBM，已經開發了 XML 的 XForms 引擎（參閱 參考資料 中的 XML Forms Package）。Mozilla 已經宣布在 Mozilla 運行的所有平臺上支持 XForms。要查看 XForms 實現的優秀示例，請參閱 參考資料。

  清單 3 展示了一個簡單的 XForms 示例，顯示了一個用 FormFaces™ 實現呈現的文本框和按鈕。

  
  清單 3. 顯示用 FormFaces 實現呈現的文本框和按鈕的 XForm
  

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:form=http://www.w3.org/2002/xforms xmlns:ev="http://www.w3.org/2001/xml-events" xml:lang="en"> <head> <title>Simple example</title> <link rel="stylesheet" type="text/css" href="xforms.css" /> <script type="text/javascript" src="../../formfaces.js"></script> <form:model> <form:instance> <data xmlns=""> <greeting>Hi there!</greeting> </data> </form:instance> </form:model> </head> <body> <form:input ref="greeting" incremental="true"> <form:label>Greeting:</form:label> </form:input> <form:trigger> <form:label>Trigger</form:label> <form:message level="modal" ev:event="DOMActivate">You clicked button</form:message> </form:trigger> </body> </html>

  
  

  Dojo

  Dojo 是用 JavaScrip 編寫的開放源碼 DHTML 工具包。Dojo Toolkit 提供了一組核心庫，和一組豐富的不同的軟件包庫，每個庫提供特定的函數。Dojo 提供較低級的 API 來編寫可移植的 JavaScript 并簡化復雜的腳本。可以很容易很快地原型化交互小部件和動畫轉換。它提供了事件系統、I/O 軟件包和一般語言增強的庫。可以用 Dojo 編寫腳本，并根據您的需要包括任意多個可用的 API。

  Dojo 還提供了一組可直接用于任何應用程序中的小部件庫。可以使用其中一些核心小部件作為 UI 控件，比如菜單小部件、選項卡集、樹小部件等等。還有一般函數，比如布局小部件、日期選擇器、SVG 小部件等等。

  Dojo 基于單個標記語言構建，提供了聲明和使用響應 DHTML 界面組件的簡單方法。清單 4 展示了一個簡單的 Dojo 組件示例，它是 HTML 頁面中一個面向用戶的特殊按鈕。

  
  清單 4. 示例 dojosample.html
  

  <button dojoType="Button2" widgetId="helloButton">Hello World!</button> You need to include the Dojo widgets library that is required in your HTML page. <script type="text/javascript"> dojo.require("dojo.widget.*"); dojo.require("dojo.widget.Button2"); </script>

  
  

  Dojo 工具包還包括一些調試選項。AJAX Toolkit Framework (ATF) 可用作功能強大的 IDE。這是 IBM 的 Emerging technology Toolkit (ETTK) 的一部分，是一組特殊的新興技術。ATF 主要基于 Eclipse Web 工具項目，允許支持 DOM 瀏覽、JavaScript 調試等等。

  最近，Dojo Foundation 宣布了與 Laszlo 的合作協議。按照該協議，您可以在 Laszlo 的開放源碼項目中使用 Dojo Toolkit。同樣，Laszlo 將將庫貢獻給 Dojo Foundation，從而促進開放源碼社區的發展。

  Macromedia Flex

  Macromedia Flex 是另一種基于 Flash 的用戶界面。它提供位于應用服務器頂層的 Flex 表示服務器，并從該服務器動態生成 Flash 文件，然后交付給瀏覽器。這些 Flash 文件在瀏覽器的 Flash 播放器內部執行，并允許用戶交互、執行操作、甚至生成 SOAP、HTTP 或 AMF 請求以連接回服務器。

  布局和 UI 組件在一種基于 XML 的語言 MXML 中定義。Flex 為可視組件、容器以及遠程服務對象和數據模型提供了豐富的 MXML 擴展類。它還與控件進行數據綁定，并訪問服務器端數據。

  ECMA 腳本語言 (ActionScript 2) 嵌入在 MXML 中以處理事件、系統事件或構造復雜的數據模型。這是一種面向對象的語言，類似于 JavaScript 和 ECME 腳本。與 XForms 一樣，Flex 保持數據模型、數據表示、數據驗證器和數據服務分離（類似于 MVC 樣式）。

  到達 MXML 的所有請求都通過 Flex 編譯器進行處理，該編譯器編譯 MXML 并生成 SWF，然后將其高速緩存，直到它被修改并最終交付給瀏覽器為止。

  任何 XML 編輯器都可用于編寫 MXML 腳本，但 Macromedia 還提供了一個特殊的 IDE 進行 Flex 應用程序開發，叫做 Flex Builder 1.5。它的優點是與 Flex 服務器集成。它還提供了一些組件，允許連接服務器、執行正常的 HTTP 調用、連接遠程 Java™ 對象并從瀏覽器本身與 Web 服務交互。它可以與現有的 J2EE 和 .NET 應用程序模型集成。

  清單 5 展示了 Macromedia Flex 代碼的一個示例。

  
  清單 5. Macromedia Flex 代碼示例
  

  <?xml version="1.0"?> <mx:Application xmlns:mx="http://macromedia.com/2003/mxml"> <mx:Form label="Employee Information"> <mx:FormItem label="First Name"> <mx:TextInput id="firstName" /> </mx:FormItem> </mx:FormItem> </mx:Form> <!-- The myEmployee data model. --> <mx:Model id="myEmployee"> <name> <first /> <last /> </name> <department /> <email /> </mx:Model> mx:Binding source="firstName.text" destination="myEmployee.name.first" /> </mx:Application>

  
  

  Macromedia Flex 看起來類似于 Laszlo。二者都是豐富的功能強大的基于 Flash 的應用程序。Laszlo 位于 Flash 引擎外，所以性能可能有所欠缺，但它具有其他優點。

  
  
  

  工具比較

  下表比較了上文討論過的五種技術以及 Altiolive（一種豐富的企業應用程序）。

  
  表 1. 工具比較
  

  技術	瀏覽器技術	腳本	豐富性	亮點
  Laszlo	Flash、XML	LZX 文件+JavaScript	高	易于學習，豐富
  Mozilla XUL	XUL 語言	XUL 文件+JavaScript	高	依賴瀏覽器，功能強大
  XForms	Xform	取決于實現	限于一定程度	設備中立，遵循 W3C
  Dojo	JavaScript	HTML+JavaScript	限于一定程度	基于 JavaScript。正在成長，可適應。
  Macromedia Flex	Flash、XML	MXML 文件	高	非開放源碼。Macromedia 的專有工具。
  Altiolive	Applet、XML	Java	限于一定程度	http://www.altio.com/

  
  
  
  

  其他技術

  我們已經討論了五種技術，當然還有其他一些技術。許多公司使用各種技術提供了非常特別的 RIA 原型。盡管一一討論這些技術超出了本文范圍，但下面這些技術值得一看：

  • Backbase —— 開發和銷售幫助創建 AJAX 應用程序的軟件。
  • Netvibes —— 自定義 Web 主頁解決方案的免費服務。
  • Zimbra —— 下一代企業消息傳送和協作的開放源碼服務器和客戶機技術。
  • Protopage —— 免費個人起始頁面。
  • Nexaweb —— 用于綁定和部署 Enterprise Internet Application 的平臺。
  • altio —— 瀏覽器中豐富的企業應用程序。
    
    

  結束語

  本文介紹了 RIA，討論了當前的 UI 技術，并推薦了其他技術。我希望工具比較將幫助您根據需要作出一個正確的選擇。每種技術都有不同的優點，從而基于您的需要為開發人員提供了豐富的控件集合。

  本文討論的技術為用戶帶來一些新奇的東西，并提供了更豐富的用戶體驗。您現在可以跨越瀏覽器并呈現給 PDA、跨平臺的移動設備，并用音頻、視頻、圖像和動畫來豐富用戶體驗。RIA 幾乎包含了 XML，因此 XML 無疑是優勝者。

  將來，我預計 RIA 將會在 Web UI 轉換到下一級別中扮演重要的角色，并幫助準備支持 Web 2.0。