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

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

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

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

　　基于Ajax的RIA正在迅速成為Web應(yīng)用程序前端的基準(zhǔn)，因?yàn)樗梢酝瑫r(shí)提供二者的優(yōu)點(diǎn)：豐富性和可達(dá)性。Ajax應(yīng)用程序和桌面應(yīng)用程序一樣豐富，響應(yīng)高度靈敏，并且可以在一個(gè)頁(yè)面上提供所有數(shù)據(jù)，無(wú)需刷新頁(yè)面。它們還擁有基于標(biāo)準(zhǔn)的瀏覽器應(yīng)用程序的可達(dá)性特點(diǎn)，這類應(yīng)用程序可以在不具備瀏覽器插件或客戶端applet的情況下進(jìn)行部署。

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

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

Backbase Ajax表示層

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

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

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

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

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

圖1. Backbase富Internet表示層

Pet Store案例分析

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

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

• Java Pet Store是一個(gè)完整的Web應(yīng)用程序。

  Sun設(shè)計(jì)Pet Store的目的是演示所有常見(jiàn)的Web應(yīng)用程序功能。通過(guò)使用Pet Store作為案例，我可以說(shuō)明為J2EE應(yīng)用程序添加RIA層的所有方面。

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

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

  使用RIA前端的目的是提供更簡(jiǎn)單和響應(yīng)更靈敏的GUI，以及通常更為豐富的Web用戶體驗(yàn)。我將說(shuō)明，如何通過(guò)Backbase RIA技術(shù)極大地改進(jìn)應(yīng)用程序的前端，同時(shí)無(wú)需對(duì)后端和總體系統(tǒng)需求做任何修改。

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

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

RIA Pet Store前端

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

　　下面的兩個(gè)屏幕快照演示了前端的改進(jìn)。要獲得對(duì)Backbase RIA前端更直觀的感受，請(qǐng)?jiān)L問(wèn)http://www./xmlserver上的在線演示，或者到http://www./download下載Backbase社區(qū)版本。

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

圖2. 原始HTML前端

圖3. 新Backbase前端

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

• 選項(xiàng)卡式的單頁(yè)面瀏覽

  在Web界面上，不同的動(dòng)物種類（狗、貓等等）被表示為不同的選項(xiàng)卡。點(diǎn)擊一個(gè)選項(xiàng)卡就會(huì)打開相應(yīng)的類別，顯示可供出售的寵物。

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

• 活動(dòng)的多功能界面

  界面有三個(gè)主要功能——類別瀏覽、購(gòu)物車和頁(yè)面引導(dǎo)歷史記錄，它們?cè)诮缑嫔隙际且恢笨梢?jiàn)的。因此，購(gòu)物者總是能夠查看購(gòu)物車的當(dāng)前內(nèi)容或最近看過(guò)的寵物的記錄。

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

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

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

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

  

  圖4.類別視圖的排列順序轉(zhuǎn)換

• 用于提高轉(zhuǎn)換速度的信息欄驗(yàn)證

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

　　圖5顯示了在填寫表單的第一個(gè)步驟中，對(duì)于e-mail地址信息欄的驗(yàn)證。當(dāng)購(gòu)買者填寫下一欄時(shí)，就會(huì)提供即時(shí)的反饋。

圖5. 信息欄驗(yàn)證—e-mail欄

Backbase RIA Pet Store的架構(gòu)

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

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

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

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

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

Backbase表示客戶端

　　BPC是一個(gè)基于Ajax的GUI引擎，它運(yùn)行在標(biāo)準(zhǔn)的Web瀏覽器中。運(yùn)行時(shí)，BPC被加載到瀏覽器中，然后它會(huì)接收BXML代碼，構(gòu)造對(duì)應(yīng)的B樹，并不斷地把這種表示轉(zhuǎn)換為瀏覽器所呈現(xiàn)的DOM樹。圖7說(shuō)明了運(yùn)行時(shí)轉(zhuǎn)換過(guò)程。

圖7. BPC運(yùn)行時(shí)

Backbase XML

　　Backbase XML (BXML)是XHTML的擴(kuò)展。開發(fā)人員通過(guò)創(chuàng)建BXML應(yīng)用程序來(lái)開發(fā)富前端，包括BXML標(biāo)簽、標(biāo)準(zhǔn)的XHTML和CSS。BXML是一種聲明性語(yǔ)言，它包含了XHTML中所沒(méi)有的標(biāo)簽（B標(biāo)簽）

　　BXML包含用于下列用途的標(biāo)簽：

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

用于J2EE的Backbase XML Server

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

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

　　BXS還提供一些應(yīng)用服務(wù)，包括身份驗(yàn)證、授權(quán)、日志記錄和用戶跟蹤。圖8顯示了BXS的總體架構(gòu)。

圖8. BXS架構(gòu)

Eclipse開發(fā)工具

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

圖9. Backbase Eclipse插件

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

部署到BEA WebLogic

　　BXS是一個(gè)與標(biāo)準(zhǔn)兼容的J2EE應(yīng)用程序，可以將其部署到任何J2EE應(yīng)用服務(wù)器上。圖10顯示了如何使用WebLogic控制臺(tái)把BXS部署到BEA WebLogic Server。

圖10. 把BXS部署到BEA WebLogic

實(shí)現(xiàn)Backbase RIA Pet Store

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

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

　　用戶交互：用戶點(diǎn)擊Next按鈕便可顯示編號(hào)從9到16的狗圖片。

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

• 初始化

  從用戶在瀏覽器中輸入寵物商店的URL開始，這將導(dǎo)致從Web服務(wù)器請(qǐng)求一個(gè)索引頁(yè)面。

  索引頁(yè)面包含用于實(shí)例化BPC的代碼。索引頁(yè)面是XHTML和BXML標(biāo)簽的結(jié)合，包含負(fù)責(zé)啟動(dòng)富前端的初始化事件處理程序。

  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"/>
      

• 應(yīng)用程序布局

  加載頁(yè)面之后，BPC就會(huì)處理正在構(gòu)造的事件，以便開始構(gòu)建總體的應(yīng)用程序布局。

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

  產(chǎn)品類別使用選項(xiàng)卡式的導(dǎo)航，每個(gè)寵物類別一個(gè)選項(xiàng)卡。這些選項(xiàng)卡是動(dòng)態(tài)構(gòu)造的，具體過(guò)程是通過(guò)BXS從一個(gè)XML文件加載類別，然后通過(guò)一個(gè)客戶端模板把這些類別轉(zhuǎn)換為選項(xiàng)卡，該轉(zhuǎn)換模板的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)建選項(xiàng)卡式導(dǎo)航的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代碼（用藍(lán)色表示）都在客戶端執(zhí)行，而所有BXS代碼（用紅色表示）都在服務(wù)器端執(zhí)行。注意，在本例中，我選擇了在客戶端進(jìn)行轉(zhuǎn)換，因?yàn)閿?shù)據(jù)集很小。下面我會(huì)給出一個(gè)在服務(wù)器端轉(zhuǎn)換的例子。兩種轉(zhuǎn)換都要用到XSLT語(yǔ)法。Backbase的一個(gè)強(qiáng)大功能就是，前端開發(fā)人員可以根據(jù)情況選擇在客戶端還是服務(wù)器端處理表示邏輯。語(yǔ)法似乎允許輕松地把代碼從客戶端移到服務(wù)器端，或者反之。

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

• 默認(rèn)數(shù)據(jù)

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

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

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

  有3個(gè)嵌套的BXS管道分別用于從Web服務(wù)獲取數(shù)據(jù)、將其放入緩存，以及通過(guò)XSLT轉(zhuǎn)換創(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>
      

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

• 用戶交互

  現(xiàn)在，最終用戶可以與寵物商店類別進(jìn)行交互?？梢允褂肗ext或Previous按鈕或者排序功能在動(dòng)物類別中進(jìn)行瀏覽。或者，只要點(diǎn)擊一下相應(yīng)的選項(xiàng)卡，就可以轉(zhuǎn)到另一個(gè)類別中。

  BPC和BXS對(duì)這種交互進(jìn)行了無(wú)縫處理。顯示已經(jīng)在客戶端上的數(shù)據(jù)時(shí)，無(wú)需與服務(wù)器進(jìn)行任何通信。例如，購(gòu)物者已經(jīng)從狗類別轉(zhuǎn)到了貓類別，然后再回到狗類別。客戶端仍然擁有狗類別的數(shù)據(jù)，所以可以馬上顯示出來(lái)，這使得購(gòu)物體驗(yàn)變得更完美。其他的類別需要從BXS獲取。BXS要么立即從其緩存返回它們，要們?cè)L問(wèn)Web服務(wù)來(lái)獲得新數(shù)據(jù)。

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

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

結(jié)束語(yǔ)

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

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

　　首先，Backbae易于使用。它的聲明性語(yǔ)言水平地?cái)U(kuò)展了DHTML；它完全對(duì)開發(fā)人員隱藏了瀏覽器兼容性的問(wèn)題；而且它帶有一套開發(fā)和調(diào)試工具。

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

　　最后，Backbase是以兼容的方式提供所有客戶端和服務(wù)器端的功能。用戶可以使用富Ajax前端擴(kuò)展現(xiàn)有的應(yīng)用程序，同時(shí)無(wú)需修改后端。對(duì)于整個(gè)表示層來(lái)說(shuō)，它的架構(gòu)是時(shí)新的、模塊化的，而且它基于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