動態(tài)HTML技術已經(jīng)出現(xiàn)了多年。最近，Google的最新Web應用程序GMail、Google Suggests和Google Maps，在前端頁面中重新引入了基于標準的DHTML開發(fā)模型。Google證明了，DHTML開發(fā)模型能夠讓開發(fā)人員創(chuàng)建具有可視化吸引力和高度交互式的Rich Internet Application（豐富網(wǎng)絡應用程序，RIA）。

　　Adaptive Path公司的Jesse James Garrett為這個基于標準的RIA開發(fā)模型創(chuàng)造了術語Ajax (Asynchronous JavaScript + XML)。與傳統(tǒng)的基于頁面的Web應用程序模型相比，Ajax有3點不同之處：

• 有一個客戶端引擎擔任用戶界面（UI）和服務器之間的中介。
• 用戶行為由客戶端引擎處理，而不是生成發(fā)往服務器的頁面請求。
• XML數(shù)據(jù)在客戶端引擎和服務器之間傳輸。

　　換言之，Ajax解決方案包括一個客戶端引擎，它用于呈現(xiàn)用戶界面，并使用XML格式與服務器通信。這個引擎由很多JavaScript函數(shù)組成，位于Web瀏覽器中，它不需要插件，也不需要用戶安裝。

　　基于Ajax的RIA正在迅速成為Web應用程序前端的基準，因為它可以同時提供二者的優(yōu)點：豐富性和可達性。Ajax應用程序和桌面應用程序一樣豐富，響應高度靈敏，并且可以在一個頁面上提供所有數(shù)據(jù)，無需刷新頁面。它們還擁有基于標準的瀏覽器應用程序的可達性特點，這類應用程序可以在不具備瀏覽器插件或客戶端applet的情況下進行部署。

　　Backbase所提供的Ajax軟件具有以下特點：基于標準、功能全面且易于使用。Backbase Presentation Client (BPC)基于Ajax技術，它使用稱為Backbase XML (BXML)的附加標簽擴展了DHTML。Backbase XML Server Edition for J2EE (BXS)包含了一些服務器端的組件，利用這些組件，J2EE開發(fā)人員可以快速開發(fā)J2EE應用程序的Ajax前端。

　　在本文中，我使用Backbase為Java Pet Store開發(fā)了一個基于Ajax的前端。該案例分析說明了如何使用Backbase技術作為J2EE應用程序的Ajax表示層。您可以查看文中所描述的應用程序的在線演示，網(wǎng)址是http://www./xmlserver。

Backbase Ajax表示層

　　Web開發(fā)人員應該能夠輕松創(chuàng)建具有以下特點的Rich Internet Application (RIA)：完全基于HTML標準（W3C），不需要最終用戶安裝插件，速度超快，能夠在所有瀏覽器上進行操作，并與J2EE運行時和開發(fā)環(huán)境完全集成。RIA利用客戶端（Web瀏覽器）資源創(chuàng)建和管理用戶界面，從而為最終用戶提供一個響應靈敏而且具有應用程序風格的用戶界面。

　　這種方法最近被稱為Ajax。Ajax這個術語的靈感來源于Gmail、Google Maps和Google Suggests這類應用程序，它把現(xiàn)有的瀏覽器技術提高到了一個新的水平上。RIA從根本上改進了在線應用程序的可用性和有效性。Ajax RIA只使用標準的瀏覽器技術（如JavaScript、XHTML和XMLHttpRequest對象）就做到了這一點。通過使用XMLHttpRequest，在將數(shù)據(jù)異步加載到界面中時就無需刷新頁面。

　　Backbase在J2EE架構中提供一個Ajax表示層，它結合了目前的J2EE服務器和先進的富客戶端技術的優(yōu)點。Backbase表示層控制了富用戶界面的每個方面：與最終用戶的交互模型，與后端系統(tǒng)的集成，以及整個客戶端-服務器通信。Backbase直接提供了用于聚合來自任意位置的XML的下一個范型，將數(shù)據(jù)綁定到先進的富用戶界面控件，并在一個統(tǒng)一的富用戶界面中交付組合應用程序。

　　Backbase表示層由一個客戶機和一個服務器組成。Backbase Presentation Client (BPC)是一個基于Ajax的GUI引擎，它允許開發(fā)人員以聲明性的方式快速構建RIA。Backbase XML(BXML)是對XHTML的擴展。它為開發(fā)人員提供了交付富前端功能的附加標簽(B tag)。Backbase XML Server (BXS)提供一種XML流水線架構，利用它可以從Web服務、數(shù)據(jù)庫或Java對象獲取數(shù)據(jù)，可以聚合和轉換這些數(shù)據(jù)，并將其綁定到BPC中的UI元素。BPC和BXS相結合，可以在Web瀏覽器和應用服務器之間搭建一座功能強大的橋梁，并提供一個分布在客戶端和服務器上的完整的富Internet表示層。

　　圖1說明了在邏輯和物理應用程序架構中，Backbase所處的位置。應用程序由一個J2EE后端和一個基于Ajax的RIA前端組成。從邏輯上說，Backbase提供了表示層，而J2EE提供了業(yè)務邏輯和數(shù)據(jù)層。從物理上說，表示層分布在客戶端和服務器上。在客戶端上，Backbase使用BPC擴展了瀏覽器。在服務器上，Backbase使用BXS擴展了應用服務器。

圖1. Backbase富Internet表示層

Pet Store案例分析

　　我們將使用Java Pet Store作為案例來分析如何為J2EE應用程序添加Backbase RIA前端。Java Pet Store Demo是Sun Microsystems提供的一個示例應用程序，其目的是為了演示如何使用Java 2 Platform, Enterprise Edition(J2EE)構建Web應用程序（詳情請參見http://java./developer/releases/petstore）。

　　Java Pet Store是業(yè)內(nèi)一個著名的參考應用程序（pet store還有.NET和Flash版本）。由于以下兩個原因，它成為為J2EE應用程序添加基于Ajax的RIA前端的完美案例：

• Java Pet Store是一個完整的Web應用程序。

  Sun設計Pet Store的目的是演示所有常見的Web應用程序功能。通過使用Pet Store作為案例，我可以說明為J2EE應用程序添加RIA層的所有方面。

  作為一個典型的在線商店，它包含以下功能：

  • 瀏覽產(chǎn)品類別。
  • 在購物車中添加和刪除物品。
  • 填寫訂單表單。
  • 提交訂單。
• Java Pet Store有一個傳統(tǒng)的HTML前端。

  使用RIA前端的目的是提供更簡單和響應更靈敏的GUI，以及通常更為豐富的Web用戶體驗。我將說明，如何通過Backbase RIA技術極大地改進應用程序的前端，同時無需對后端和總體系統(tǒng)需求做任何修改。

  Pet Store的RIA前端將通過以下方式改善可用性：

• 把前端變?yōu)橐粋€單頁面的界面（SPI）。
• 提供更先進的UI控件（如模態(tài)彈出式菜單）。
• 使用可視化效果（例如，把寵物放入購物車）。
• 更加有效地利用電腦屏幕的操作區(qū)域。

RIA Pet Store前端

　　在這一節(jié)中，我將討論經(jīng)過改進的新Pet Store RIA前端。

　　下面的兩個屏幕快照演示了前端的改進。要獲得對Backbase RIA前端更直觀的感受，請訪問http://www./xmlserver上的在線演示，或者到http://www./download下載Backbase社區(qū)版本。

下面兩個圖對兩個前端進行了可視化的比較。圖2顯示的是原來靜態(tài)的多頁面HTML前端。圖3顯示的是新的Backbase SPI前端：

圖2. 原始HTML前端

圖3. 新Backbase前端

　　Backbase為創(chuàng)建豐富的單頁面Web界面提供了許多可能性。下面列出了一些Pet Store所使用的例子。

• 選項卡式的單頁面瀏覽

  在Web界面上，不同的動物種類（狗、貓等等）被表示為不同的選項卡。點擊一個選項卡就會打開相應的類別，顯示可供出售的寵物。

  在Backbase SPI中，無需刷新頁面就可以打開選項卡。BPC只從服務器請求所需的數(shù)據(jù)，然后更新客戶端的視圖。SPI機制可以極大地縮短響應時間，讓客戶隨心所欲地在類別之間來回穿梭。

• 活動的多功能界面

  界面有三個主要功能——類別瀏覽、購物車和頁面引導歷史記錄，它們在界面上都是一直可見的。因此，購物者總是能夠查看購物車的當前內(nèi)容或最近看過的寵物的記錄。

  這些功能是高度同步的：瀏覽一個寵物時，歷史記錄將自動更新為在記錄中顯示該寵物。定購一個寵物時，它將被添加到購物車中。上述一切都發(fā)生在客戶端的一個頁面上（例如，無需重新加載頁面就可以更新界面的各個部分）。

• 界面變化的流暢可視化效果

  進行瀏覽時，客戶將會看到不斷變化的界面視圖。例如，他可以按照價格和名稱對寵物進行排序。界面需要根據(jù)新的排列順序顯示更新以后的寵物清單。

  在Backbase RIA前端中，以前的視圖被使用可視化效果的新視圖所代替，新視圖向最終用戶顯示什么正在改變。圖4說明了如何通過流暢的定位效果，把按名稱排列的順序轉變?yōu)榘磧r格排列的順序：

  

  圖4.類別視圖的排列順序轉換

• 用于提高轉換速度的信息欄驗證

　　為了執(zhí)行購買，購買者必須在一份表單中填入個人詳細信息。Backbase極大地簡化了這個購買過程，通過客戶端的信息欄驗證提供即時的反饋，并在提供所有數(shù)據(jù)的過程中提供逐步的指南和概述。

　　圖5顯示了在填寫表單的第一個步驟中，對于e-mail地址信息欄的驗證。當購買者填寫下一欄時，就會提供即時的反饋。

圖5. 信息欄驗證—e-mail欄

Backbase RIA Pet Store的架構

　　增強Pet Store（或其他任何Web應用程序）的前端時，我們將繼續(xù)依賴于以下兩條架構基本原則：

• 最終用戶仍然使用標準的Web瀏覽器訪問Pet Store，無需添加任何插件。
• 由J2EE業(yè)務邏輯和數(shù)據(jù)組成的整個后端保持不變。

　　現(xiàn)有的后端在開發(fā)期間是完全孤立的，而且不會改變，這個事實對于架構師和IT管理人員十分有利。通過一個規(guī)整的、模塊化的架構，他們將能夠控制風險和成本，同時顯著提高Web應用程序的用戶友好性。

　　Backbase的富表示層技術由兩個模塊組成，它們將被加入到架構中。在客戶端，BPC管理著SPI，并通過異步響應事件來處理與最終用戶之間的交互。在服務器端，Backbase XML Server這個靈活的XML管道可以連接到任意服務器端的數(shù)據(jù)源，包括Web服務、文件、數(shù)據(jù)庫或本地Java對象。圖6說明了BPC和BXS如何共同為RIA提供一個聲明式的、基于XML的端到端表示層。

圖6. 聲明式的端到端表示層

Backbase表示客戶端

　　BPC是一個基于Ajax的GUI引擎，它運行在標準的Web瀏覽器中。運行時，BPC被加載到瀏覽器中，然后它會接收BXML代碼，構造對應的B樹，并不斷地把這種表示轉換為瀏覽器所呈現(xiàn)的DOM樹。圖7說明了運行時轉換過程。

圖7. BPC運行時

Backbase XML

　　Backbase XML (BXML)是XHTML的擴展。開發(fā)人員通過創(chuàng)建BXML應用程序來開發(fā)富前端，包括BXML標簽、標準的XHTML和CSS。BXML是一種聲明性語言，它包含了XHTML中所沒有的標簽（B標簽）

　　BXML包含用于下列用途的標簽：

• 定義屏幕分區(qū)(<b:panel>)
• 交互式客戶端控制(<b:menu>)
• 處理標準的用戶交互事件(onClick)
• 處理高級的用戶交互事件(拖放和調(diào)整大小)
• 管理客戶端狀態(tài)
• 處理可視化效果(使修改任意CSS屬性的過程動畫化)
• 數(shù)據(jù)綁定
• 使用XSLT的一個子集進行客戶端轉換

用于J2EE的Backbase XML Server

　　Backbase XML Server (BXS)是一個服務器端的引擎，用于把BPC鏈接到任意J2EE后端。和BPC一樣，BXS是完全基于XML的，其編程是聲明性的。它使用一種XML管道架構，提供功能強大的服務器端轉換和聚合。

　　BXS附帶一些用于訪問最常用的數(shù)據(jù)源（包括Web服務、數(shù)據(jù)庫、文件系統(tǒng)和本地Java對象）的開箱即用任務。我們使用Backbase標簽對從這些源獲得的數(shù)據(jù)進行聚合，然后使用XSLT進行轉換。結果以無格式XML數(shù)據(jù)或BXML表示代碼的形式返回給BPC。

　　BXS還提供一些應用服務，包括身份驗證、授權、日志記錄和用戶跟蹤。圖8顯示了BXS的總體架構。

圖8. BXS架構

Eclipse開發(fā)工具

　　為了讓J2EE開發(fā)人員可以只使用一種開發(fā)工具就能創(chuàng)建完整的Web應用程序，包括富前端，Backbase提供了一個Eclipse插件。如圖9所示，該插件提供了在Eclipse中突出顯示語法和Backbase標簽代碼自動完成的功能。

圖9. Backbase Eclipse插件

　　注意：Eclipse的可視化拖放開發(fā)插件還處在開發(fā)階段。

部署到BEA WebLogic

　　BXS是一個與標準兼容的J2EE應用程序，可以將其部署到任何J2EE應用服務器上。圖10顯示了如何使用WebLogic控制臺把BXS部署到BEA WebLogic Server。

圖10. 把BXS部署到BEA WebLogic

實現(xiàn)Backbase RIA Pet Store

　　下面的順序圖包括更多詳細信息，可以幫助您更好地理解如何實現(xiàn)Backbase pet store。該順序圖顯示了在應用程序的初始化加載期間BPC與BXS之間的交互，如圖11所示，它包括以下4個步驟：

• 初始化：用戶在瀏覽器中輸入寵物商店的URL；對BPC進行初始化。
• 應用程序布局：觸發(fā)正在構造的事件；BPC構建整體應用程序布局；寵物類別被加載并顯示在選項卡中。
• 默認數(shù)據(jù)：默認情況下加載狗的類別；最初顯示8張狗的圖片，并帶有向前/向后和排序功能。

　　用戶交互：用戶點擊Next按鈕便可顯示編號從9到16的狗圖片。

圖11.順序圖：富商店前端

• 初始化

  從用戶在瀏覽器中輸入寵物商店的URL開始，這將導致從Web服務器請求一個索引頁面。

  索引頁面包含用于實例化BPC的代碼。索引頁面是XHTML和BXML標簽的結合，包含負責啟動富前端的初始化事件處理程序。

  BPC初始化代碼：

  <...><body onload="bpc.boot(‘/Backbase/‘)">
      <...>
      <xmp b:backbase="true"
      style="display:none;height:100%;">
      <s:loading>
      <div style="position:absolute;width:20%;
      top: 50px;left: 35%;">
      <center>Please wait while loading...
      </center>
      </div>
      </s:loading>
      <...>
      <!-- Include petshop specific behaviors -->
      <s:include b:url="petshop.xml"/>
      

• 應用程序布局

  加載頁面之后，BPC就會處理正在構造的事件，以便開始構建總體的應用程序布局。

  應用程序布局由幾個面板組成，它們將屏幕劃分為幾個部分。頂行有一個固定高度的寵物商店徽標，接下來的主行是實際的商店，大小可以調(diào)整。主行分為兩列，左邊一列是產(chǎn)品類別，右邊一列是購物車和歷史記錄。

  產(chǎn)品類別使用選項卡式的導航，每個寵物類別一個選項卡。這些選項卡是動態(tài)構造的，具體過程是通過BXS從一個XML文件加載類別，然后通過一個客戶端模板把這些類別轉換為選項卡，該轉換模板的BPC代碼如下：

  <s:task b:action="transform"
      b:stylesheet="b:xml(‘categories‘)"
      b:xmldatasource="b:url(‘categories.xml‘)"
      b:destination="id(‘main-content‘)"
      b:mode="aslastchild" />
      

  下面是用于從文件系統(tǒng)把類別加載為XML的BXS代碼：

  <bsd:pipeline equals="categories.xml"
      access="public">
      <bsd:readxml input="file:/categories.xml"/>
      </bsd:pipeline>
      

  下面是用于創(chuàng)建選項卡式導航的BPC客戶端模板：

  <b:tabrow>
      <s:for-each b:select="categories/category">
      <b:tab>
      <s:attribute b:name="b:followstate">
      id(‘<s:value-of b:select="name"/>‘)
      </s:attribute>
      <s:value-of b:select="name"/>
      </b:tab>
      </s:for-each>
      </b:tabrow>
      

  所有BPC代碼（用藍色表示）都在客戶端執(zhí)行，而所有BXS代碼（用紅色表示）都在服務器端執(zhí)行。注意，在本例中，我選擇了在客戶端進行轉換，因為數(shù)據(jù)集很小。下面我會給出一個在服務器端轉換的例子。兩種轉換都要用到XSLT語法。Backbase的一個強大功能就是，前端開發(fā)人員可以根據(jù)情況選擇在客戶端還是服務器端處理表示邏輯。語法似乎允許輕松地把代碼從客戶端移到服務器端，或者反之。

  以上的代碼示例應該可以使您了解到，借助于Backbase，Ajax編程變得多么輕松。結合了DHTML的聲明性方法則更容易上手。使用附加的B標簽不僅可以使界面更加豐富，而且可以使開發(fā)人員的效率更高。諸如<b:tab>之類的單個標簽可以代替多行HTML和JavaScript代碼，而且保證可以用于各種瀏覽器。

• 默認數(shù)據(jù)

  顯示商店前端時，默認情況下顯示的是狗的類別。對于本案例，BXS負責此項操作。BXS從一個Web服務獲得數(shù)據(jù)，將其放入緩存，然后生成BXML表示代碼，再把這些表示代碼發(fā)回給BPC。服務器還通過一項配置設置確定一個頁面上可以顯示的動物數(shù)量，并根據(jù)需要加入了Next和Previous按鈕。最后，服務器還提供了按照名稱或價格進行排序的功能。

  下面的代碼片斷演示了服務器功能。外部管道products-overview.xml首先調(diào)用catalog.xml子管道。該子管道要么返回緩存中的寵物信息，要么調(diào)用另一個子管道catalog.ws。在緩存沒有命中的情況下，內(nèi)部管道catalog.ws會從Web服務獲取寵物信息。

  外部管道獲得寵物信息，然后進行XSLT轉換，從而以4x2表格顯示這些信息，并帶有Next和Previouse按鈕，然后把BXML格式的代碼發(fā)回給BPC。BPC呈現(xiàn)它接收到的BXML。

  有3個嵌套的BXS管道分別用于從Web服務獲取數(shù)據(jù)、將其放入緩存，以及通過XSLT轉換創(chuàng)建BXML輸出：

  <bsd:pipeline equals="products-overview.xml"
      access="public"/>
      <bsd:callpipe pipe="catalog.xml"/>
      

  <bsd:pipeline equals="catalog.xml" access="private">
      <bsd:exist field="{global:petstore-catalog}">
      <bsd:readxml>{global:petstore-catalog}
      </bsd:readxml>
      <bsd:otherwise>
      <bsd:callpipe pipe="catalog.ws"/>
      

  <bsd:pipeline equals="catalog.ws"
      access="private">
      <bsd:try>
      <bsd:callws wsdl="PetstoreCatalog.wsdl"
      method="getAll"/>
      <bsd:callpipe pipe="strip-root-ns"/>
      <bsd:catch>
      <bsd:xslt xslt="error.xslt">
      <bsd:param name="errormsg">{error:message}
      </bsd:param>
      <bsd:param name="errorsrc">{error:source}
      </bsd:param>
      </bsd:xslt>
      </bsd:catch>
      </bsd:try>
      </bsd:pipeline>
      <bsd:writexml>{global:petstore-catalog}
      </bsd:writexml>
      </bsd:otherwise>
      </bsd:exist>
      </bsd:pipeline>
      <bsd:extractfilter xpath=
      "category[name/text()=‘{requestparam:category}‘]"/>
      <bsd:xslt xslt="products/products-overview.xslt">
      <bsd:param name="category">
      {requestparam:category}
      </bsd:param>
      <bsd:param name="stepsize">
      {global:stepsize}
      </bsd:param>
      <bsd:param name="sortorder">
      {requestparam:sortorder}
      </bsd:param>
      <bsd:param name="sortfield">
      {requestparam:sortfield}
      </bsd:param>
      </bsd:xslt>
      </bsd:pipeline>
      

  代碼示例再次清楚地說明了，借助于Backbase，以聲明性的方式創(chuàng)建Ajax前端是多么容易的事情。例如，只要使用帶有一個WSDL引用作為屬性的<bsd:callws>標簽，就可以調(diào)用一個Web服務。

• 用戶交互

  現(xiàn)在，最終用戶可以與寵物商店類別進行交互。可以使用Next或Previous按鈕或者排序功能在動物類別中進行瀏覽。或者，只要點擊一下相應的選項卡，就可以轉到另一個類別中。

  BPC和BXS對這種交互進行了無縫處理。顯示已經(jīng)在客戶端上的數(shù)據(jù)時，無需與服務器進行任何通信。例如，購物者已經(jīng)從狗類別轉到了貓類別，然后再回到狗類別?？蛻舳巳匀粨碛泄奉悇e的數(shù)據(jù)，所以可以馬上顯示出來，這使得購物體驗變得更完美。其他的類別需要從BXS獲取。BXS要么立即從其緩存返回它們，要們訪問Web服務來獲得新數(shù)據(jù)。

　　為了詳細說明Backbase Ajax寵物商店的實現(xiàn)，我把重點放在了初始化的步驟上。完整的寵物商店（可以從http://www./xmlserver下載）還包括以下功能：

• 商店前端
  • 初始化。
  • 使用從文件加載的寵物類別創(chuàng)建選項卡。
  • 默認情況下從Web服務加載Dog選項卡。
  • 通過緩存瀏覽Dog并對其進行排序。
• 寵物詳細情況
  • 使用跟蹤聚合來自緩存和數(shù)據(jù)庫的寵物詳細情況。
  • 創(chuàng)建可視化歷史記錄。
• 購物車
  • 使用跟蹤添加到購物車。
• 登錄
  • 登錄和身份驗證。
• 退出
  • 退出和授權。
  • 確認。

結束語

　　最近有很多人都在研究Ajax。Ajax的優(yōu)點已經(jīng)在實踐中得到了證明。定制Ajax的缺點在于它的復雜性和不兼容性。大量客戶端JavaScript的出現(xiàn)意味著開發(fā)人員很可能陷入到瀏覽器實現(xiàn)差別的泥潭中去。另外，JavaScript這種語言不適用于復雜的應用程序。

　　為了開發(fā)易于管理的、可伸縮的和適應未來變化的Ajax解決方案，開發(fā)人員所需使用的工具應該具有比定制部件開發(fā)更多的功能。Backbase Ajax軟件提供了一個功能全面的客戶端GUI管理引擎(Backbase Presentation Client)、一個靈活的服務器端XML管道(Backbase XML Server)和一種聲明性的基于標簽的UI語言，BXML(Backbase eXtensible Markup Language)。該方法具有幾個優(yōu)點。

　　首先，Backbae易于使用。它的聲明性語言水平地擴展了DHTML；它完全對開發(fā)人員隱藏了瀏覽器兼容性的問題；而且它帶有一套開發(fā)和調(diào)試工具。

　　其次，Backbase是一個功能全面的Ajax GUI管理系統(tǒng)。Backbase的先進性大大超過了其他Ajax框架，它完全把重點放在提供一個部件庫或客戶端－服務器通信（如DWR）上。在控件和客戶端－服務器通信的基礎上，Backbase提供了用于如下用途的標簽：提供電影效果，隨需應變的數(shù)據(jù)加載，數(shù)據(jù)綁定和客戶端的數(shù)據(jù)轉換，對于Back和Forward按鈕的支持，完善的GUI狀態(tài)管理，等等。所有這些功能對于目前的Ajax Web應用程序來說都是必需的。

　　最后，Backbase是以兼容的方式提供所有客戶端和服務器端的功能。用戶可以使用富Ajax前端擴展現(xiàn)有的應用程序，同時無需修改后端。對于整個表示層來說，它的架構是時新的、模塊化的，而且它基于XML。

參考資料

• Java Pet Store Demo。
• Ajax: A New Approach to Web Applications，作者Jesse James Garrett（Adaptive Path，2005年2月）。

原文出處

A Backbase Ajax Front-end for J2EE Applications

http://dev2dev./pub/a/2005/08/backbase_ajax.html