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.backbase.com/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.sun.com/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.backbase.com/xmlserver上的在线演示，或者到http://www.backbase.com/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业务逻辑和数据组成的整个后端保持不变。

查看本文来源