一个用于J2EE应用程序的Backbase Ajax前端

一个用于J2EE应用程序的Backbase Ajax前端

　　动态HTML技术已经出现了多年。最近，Google的最新Web应用程序GMail、Google Suggests和Google Maps，在前端页面中重新引入了基于标准的DHTML开发模型。Google证明了，DHTML开发模型能够让开发人员创建具有可视化吸引力和高度交互式的Rich Internet Application（丰富网络应用程序，RIA）。

　　Adaptive Path公司的Jesse James Garrett为这个基于标准的RIA开发模型创造了术语Ajax (Asynchronous JavaScript + XML)。与传统的基于页面的Web应用程序模型相比，Ajax有3点不同之处：

• 有一个客户端引擎担任用户界面（UI）和服务器之间的中介。
• 用户行为由客户端引擎处理，而不是生成发往服务器的页面请求。
• XML数据在客户端引擎和服务器之间传输。

　　换言之，Ajax解决方案包括一个客户端引擎，它用于呈现用户界面，并使用XML格式与服务器通信。这个引擎由很多JavaScript函数组成，位于Web浏览器中，它不需要插件，也不需要用户安装。

　　基于Ajax的RIA正在迅速成为Web应用程序前端的基准，因为它可以同时提供二者的优点：丰富性和可达性。Ajax应用程序和桌面应用程序一样丰富，响应高度灵敏，并且可以在一个页面上提供所有数据，无需刷新页面。它们还拥有基于标准的浏览器应用程序的可达性特点，这类应用程序可以在不具备浏览器插件或客户端applet的情况下进行部署。

　　Backbase所提供的Ajax软件具有以下特点：基于标准、功能全面且易于使用。Backbase Presentation Client (BPC)基于Ajax技术，它使用称为Backbase XML (BXML)的附加标签扩展了DHTML。Backbase XML Server Edition for J2EE (BXS)包含了一些服务器端的组件，利用这些组件，J2EE开发人员可以快速开发J2EE应用程序的Ajax前端。

　　在本文中，我使用Backbase为Java Pet Store开发了一个基于Ajax的前端。该案例分析说明了如何使用Backbase技术作为J2EE应用程序的Ajax表示层。您可以查看文中所描述的应用程序的在线演示，网址是http://www./xmlserver。

Backbase Ajax表示层

　　Web开发人员应该能够轻松创建具有以下特点的Rich Internet Application (RIA)：完全基于HTML标准（W3C），不需要最终用户安装插件，速度超快，能够在所有浏览器上进行操作，并与J2EE运行时和开发环境完全集成。RIA利用客户端（Web浏览器）资源创建和管理用户界面，从而为最终用户提供一个响应灵敏而且具有应用程序风格的用户界面。

　　这种方法最近被称为Ajax。Ajax这个术语的灵感来源于Gmail、Google Maps和Google Suggests这类应用程序，它把现有的浏览器技术提高到了一个新的水平上。RIA从根本上改进了在线应用程序的可用性和有效性。Ajax RIA只使用标准的浏览器技术（如JavaScript、XHTML和XMLHttpRequest对象）就做到了这一点。通过使用XMLHttpRequest，在将数据异步加载到界面中时就无需刷新页面。

　　Backbase在J2EE架构中提供一个Ajax表示层，它结合了目前的J2EE服务器和先进的富客户端技术的优点。Backbase表示层控制了富用户界面的每个方面：与最终用户的交互模型，与后端系统的集成，以及整个客户端-服务器通信。Backbase直接提供了用于聚合来自任意位置的XML的下一个范型，将数据绑定到先进的富用户界面控件，并在一个统一的富用户界面中交付组合应用程序。

　　Backbase表示层由一个客户机和一个服务器组成。Backbase Presentation Client (BPC)是一个基于Ajax的GUI引擎，它允许开发人员以声明性的方式快速构建RIA。Backbase XML(BXML)是对XHTML的扩展。它为开发人员提供了交付富前端功能的附加标签(B tag)。Backbase XML Server (BXS)提供一种XML流水线架构，利用它可以从Web服务、数据库或Java对象获取数据，可以聚合和转换这些数据，并将其绑定到BPC中的UI元素。BPC和BXS相结合，可以在Web浏览器和应用服务器之间搭建一座功能强大的桥梁，并提供一个分布在客户端和服务器上的完整的富Internet表示层。

　　图1说明了在逻辑和物理应用程序架构中，Backbase所处的位置。应用程序由一个J2EE后端和一个基于Ajax的RIA前端组成。从逻辑上说，Backbase提供了表示层，而J2EE提供了业务逻辑和数据层。从物理上说，表示层分布在客户端和服务器上。在客户端上，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是业内一个著名的参考应用程序（pet store还有.NET和Flash版本）。由于以下两个原因，它成为为J2EE应用程序添加基于Ajax的RIA前端的完美案例：

• Java Pet Store是一个完整的Web应用程序。

  Sun设计Pet Store的目的是演示所有常见的Web应用程序功能。通过使用Pet Store作为案例，我可以说明为J2EE应用程序添加RIA层的所有方面。

  作为一个典型的在线商店，它包含以下功能：

  • 浏览产品类别。
  • 在购物车中添加和删除物品。
  • 填写订单表单。
  • 提交订单。
• Java Pet Store有一个传统的HTML前端。

  使用RIA前端的目的是提供更简单和响应更灵敏的GUI，以及通常更为丰富的Web用户体验。我将说明，如何通过Backbase RIA技术极大地改进应用程序的前端，同时无需对后端和总体系统需求做任何修改。

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

• 把前端变为一个单页面的界面（SPI）。
• 提供更先进的UI控件（如模态弹出式菜单）。
• 使用可视化效果（例如，把宠物放入购物车）。
• 更加有效地利用电脑屏幕的操作区域。

RIA Pet Store前端

　　在这一节中，我将讨论经过改进的新Pet Store RIA前端。

　　下面的两个屏幕快照演示了前端的改进。要获得对Backbase RIA前端更直观的感受，请访问http://www./xmlserver上的在线演示，或者到http://www./download下载Backbase社区版本。

下面两个图对两个前端进行了可视化的比较。图2显示的是原来静态的多页面HTML前端。图3显示的是新的Backbase SPI前端：

图2. 原始HTML前端

图3. 新Backbase前端

　　Backbase为创建丰富的单页面Web界面提供了许多可能性。下面列出了一些Pet Store所使用的例子。

• 选项卡式的单页面浏览

  在Web界面上，不同的动物种类（狗、猫等等）被表示为不同的选项卡。点击一个选项卡就会打开相应的类别，显示可供出售的宠物。

  在Backbase SPI中，无需刷新页面就可以打开选项卡。BPC只从服务器请求所需的数据，然后更新客户端的视图。SPI机制可以极大地缩短响应时间，让客户随心所欲地在类别之间来回穿梭。

• 活动的多功能界面

  界面有三个主要功能——类别浏览、购物车和页面引导历史记录，它们在界面上都是一直可见的。因此，购物者总是能够查看购物车的当前内容或最近看过的宠物的记录。

  这些功能是高度同步的：浏览一个宠物时，历史记录将自动更新为在记录中显示该宠物。定购一个宠物时，它将被添加到购物车中。上述一切都发生在客户端的一个页面上（例如，无需重新加载页面就可以更新界面的各个部分）。

• 界面变化的流畅可视化效果

  进行浏览时，客户将会看到不断变化的界面视图。例如，他可以按照价格和名称对宠物进行排序。界面需要根据新的排列顺序显示更新以后的宠物清单。

  在Backbase RIA前端中，以前的视图被使用可视化效果的新视图所代替，新视图向最终用户显示什么正在改变。图4说明了如何通过流畅的定位效果，把按名称排列的顺序转变为按价格排列的顺序：

  

  图4.类别视图的排列顺序转换

• 用于提高转换速度的信息栏验证

　　为了执行购买，购买者必须在一份表单中填入个人详细信息。Backbase极大地简化了这个购买过程，通过客户端的信息栏验证提供即时的反馈，并在提供所有数据的过程中提供逐步的指南和概述。

　　图5显示了在填写表单的第一个步骤中，对于e-mail地址信息栏的验证。当购买者填写下一栏时，就会提供即时的反馈。

图5. 信息栏验证—e-mail栏

Backbase RIA Pet Store的架构

　　增强Pet Store（或其他任何Web应用程序）的前端时，我们将继续依赖于以下两条架构基本原则：

• 最终用户仍然使用标准的Web浏览器访问Pet Store，无需添加任何插件。
• 由J2EE业务逻辑和数据组成的整个后端保持不变。

　　现有的后端在开发期间是完全孤立的，而且不会改变，这个事实对于架构师和IT管理人员十分有利。通过一个规整的、模块化的架构，他们将能够控制风险和成本，同时显著提高Web应用程序的用户友好性。

　　Backbase的富表示层技术由两个模块组成，它们将被加入到架构中。在客户端，BPC管理着SPI，并通过异步响应事件来处理与最终用户之间的交互。在服务器端，Backbase XML Server这个灵活的XML管道可以连接到任意服务器端的数据源，包括Web服务、文件、数据库或本地Java对象。图6说明了BPC和BXS如何共同为RIA提供一个声明式的、基于XML的端到端表示层。

图6. 声明式的端到端表示层

Backbase表示客户端

　　BPC是一个基于Ajax的GUI引擎，它运行在标准的Web浏览器中。运行时，BPC被加载到浏览器中，然后它会接收BXML代码，构造对应的B树，并不断地把这种表示转换为浏览器所呈现的DOM树。图7说明了运行时转换过程。

图7. BPC运行时

Backbase XML

　　Backbase XML (BXML)是XHTML的扩展。开发人员通过创建BXML应用程序来开发富前端，包括BXML标签、标准的XHTML和CSS。BXML是一种声明性语言，它包含了XHTML中所没有的标签（B标签）

　　BXML包含用于下列用途的标签：

• 定义屏幕分区(<b:panel>)
• 交互式客户端控制(<b:menu>)
• 处理标准的用户交互事件(onClick)
• 处理高级的用户交互事件(拖放和调整大小)
• 管理客户端状态
• 处理可视化效果(使修改任意CSS属性的过程动画化)
• 数据绑定
• 使用XSLT的一个子集进行客户端转换

用于J2EE的Backbase XML Server

　　Backbase XML Server (BXS)是一个服务器端的引擎，用于把BPC链接到任意J2EE后端。和BPC一样，BXS是完全基于XML的，其编程是声明性的。它使用一种XML管道架构，提供功能强大的服务器端转换和聚合。

　　BXS附带一些用于访问最常用的数据源（包括Web服务、数据库、文件系统和本地Java对象）的开箱即用任务。我们使用Backbase标签对从这些源获得的数据进行聚合，然后使用XSLT进行转换。结果以无格式XML数据或BXML表示代码的形式返回给BPC。

　　BXS还提供一些应用服务，包括身份验证、授权、日志记录和用户跟踪。图8显示了BXS的总体架构。

图8. BXS架构

Eclipse开发工具

　　为了让J2EE开发人员可以只使用一种开发工具就能创建完整的Web应用程序，包括富前端，Backbase提供了一个Eclipse插件。如图9所示，该插件提供了在Eclipse中突出显示语法和Backbase标签代码自动完成的功能。

图9. Backbase Eclipse插件

　　注意：Eclipse的可视化拖放开发插件还处在开发阶段。

部署到BEA WebLogic

　　BXS是一个与标准兼容的J2EE应用程序，可以将其部署到任何J2EE应用服务器上。图10显示了如何使用WebLogic控制台把BXS部署到BEA WebLogic Server。

图10. 把BXS部署到BEA WebLogic

实现Backbase RIA Pet Store

　　下面的顺序图包括更多详细信息，可以帮助您更好地理解如何实现Backbase pet store。该顺序图显示了在应用程序的初始化加载期间BPC与BXS之间的交互，如图11所示，它包括以下4个步骤：

• 初始化：用户在浏览器中输入宠物商店的URL；对BPC进行初始化。
• 应用程序布局：触发正在构造的事件；BPC构建整体应用程序布局；宠物类别被加载并显示在选项卡中。
• 默认数据：默认情况下加载狗的类别；最初显示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就会处理正在构造的事件，以便开始构建总体的应用程序布局。

  应用程序布局由几个面板组成，它们将屏幕划分为几个部分。顶行有一个固定高度的宠物商店徽标，接下来的主行是实际的商店，大小可以调整。主行分为两列，左边一列是产品类别，右边一列是购物车和历史记录。

  产品类别使用选项卡式的导航，每个宠物类别一个选项卡。这些选项卡是动态构造的，具体过程是通过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" />
      

  下面是用于从文件系统把类别加载为XML的BXS代码：

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

  下面是用于创建选项卡式导航的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代码（用蓝色表示）都在客户端执行，而所有BXS代码（用红色表示）都在服务器端执行。注意，在本例中，我选择了在客户端进行转换，因为数据集很小。下面我会给出一个在服务器端转换的例子。两种转换都要用到XSLT语法。Backbase的一个强大功能就是，前端开发人员可以根据情况选择在客户端还是服务器端处理表示逻辑。语法似乎允许轻松地把代码从客户端移到服务器端，或者反之。

  以上的代码示例应该可以使您了解到，借助于Backbase，Ajax编程变得多么轻松。结合了DHTML的声明性方法则更容易上手。使用附加的B标签不仅可以使界面更加丰富，而且可以使开发人员的效率更高。诸如<b:tab>之类的单个标签可以代替多行HTML和JavaScript代码，而且保证可以用于各种浏览器。

• 默认数据

  显示商店前端时，默认情况下显示的是狗的类别。对于本案例，BXS负责此项操作。BXS从一个Web服务获得数据，将其放入缓存，然后生成BXML表示代码，再把这些表示代码发回给BPC。服务器还通过一项配置设置确定一个页面上可以显示的动物数量，并根据需要加入了Next和Previous按钮。最后，服务器还提供了按照名称或价格进行排序的功能。

  下面的代码片断演示了服务器功能。外部管道products-overview.xml首先调用catalog.xml子管道。该子管道要么返回缓存中的宠物信息，要么调用另一个子管道catalog.ws。在缓存没有命中的情况下，内部管道catalog.ws会从Web服务获取宠物信息。

  外部管道获得宠物信息，然后进行XSLT转换，从而以4x2表格显示这些信息，并带有Next和Previouse按钮，然后把BXML格式的代码发回给BPC。BPC呈现它接收到的BXML。

  有3个嵌套的BXS管道分别用于从Web服务获取数据、将其放入缓存，以及通过XSLT转换创建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，以声明性的方式创建Ajax前端是多么容易的事情。例如，只要使用带有一个WSDL引用作为属性的<bsd:callws>标签，就可以调用一个Web服务。

• 用户交互

  现在，最终用户可以与宠物商店类别进行交互。可以使用Next或Previous按钮或者排序功能在动物类别中进行浏览。或者，只要点击一下相应的选项卡，就可以转到另一个类别中。

  BPC和BXS对这种交互进行了无缝处理。显示已经在客户端上的数据时，无需与服务器进行任何通信。例如，购物者已经从狗类别转到了猫类别，然后再回到狗类别。客户端仍然拥有狗类别的数据，所以可以马上显示出来，这使得购物体验变得更完美。其他的类别需要从BXS获取。BXS要么立即从其缓存返回它们，要们访问Web服务来获得新数据。

　　为了详细说明Backbase Ajax宠物商店的实现，我把重点放在了初始化的步骤上。完整的宠物商店（可以从http://www./xmlserver下载）还包括以下功能：

• 商店前端
  • 初始化。
  • 使用从文件加载的宠物类别创建选项卡。
  • 默认情况下从Web服务加载Dog选项卡。
  • 通过缓存浏览Dog并对其进行排序。
• 宠物详细情况
  • 使用跟踪聚合来自缓存和数据库的宠物详细情况。
  • 创建可视化历史记录。
• 购物车
  • 使用跟踪添加到购物车。
• 登录
  • 登录和身份验证。
• 退出
  • 退出和授权。
  • 确认。

结束语

　　最近有很多人都在研究Ajax。Ajax的优点已经在实践中得到了证明。定制Ajax的缺点在于它的复杂性和不兼容性。大量客户端JavaScript的出现意味着开发人员很可能陷入到浏览器实现差别的泥潭中去。另外，JavaScript这种语言不适用于复杂的应用程序。

　　为了开发易于管理的、可伸缩的和适应未来变化的Ajax解决方案，开发人员所需使用的工具应该具有比定制部件开发更多的功能。Backbase Ajax软件提供了一个功能全面的客户端GUI管理引擎(Backbase Presentation Client)、一个灵活的服务器端XML管道(Backbase XML Server)和一种声明性的基于标签的UI语言，BXML(Backbase eXtensible Markup Language)。该方法具有几个优点。

　　首先，Backbae易于使用。它的声明性语言水平地扩展了DHTML；它完全对开发人员隐藏了浏览器兼容性的问题；而且它带有一套开发和调试工具。

　　其次，Backbase是一个功能全面的Ajax GUI管理系统。Backbase的先进性大大超过了其他Ajax框架，它完全把重点放在提供一个部件库或客户端－服务器通信（如DWR）上。在控件和客户端－服务器通信的基础上，Backbase提供了用于如下用途的标签：提供电影效果，随需应变的数据加载，数据绑定和客户端的数据转换，对于Back和Forward按钮的支持，完善的GUI状态管理，等等。所有这些功能对于目前的Ajax Web应用程序来说都是必需的。

　　最后，Backbase是以兼容的方式提供所有客户端和服务器端的功能。用户可以使用富Ajax前端扩展现有的应用程序，同时无需修改后端。对于整个表示层来说，它的架构是时新的、模块化的，而且它基于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

作者简介
	Mark Schiefelbein自2005年2月以来一直担任Backbase的产品管理主管。Mark极大地推动了Backbase Rich Internet Application的全球推广。