动态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。
　　
　　
　　
　　Web开发人员应该能够轻松创建具有以下特点的Rich Internet Application (RIA)：完全基于HTML标准（W3C），不需要最终用户安装插件，速度超快，能够在所有浏览器上进行操作，并与J2EE运行时和开发环境完全集成。RIA利用客户端（Web浏览器）资源创建和管理用户界面，从而为最终用户提供一个响应灵敏而且具有应用程序风格的用户界面。
　　
　　这种方法最近被称为Ajax。Ajax这个术语的灵感>　　填写订单表单。
　　
　　提交订单。
　　
　　Java Pet Store有一个传统的HTML前端。
　　
　　使用RIA前端的目的是提供更简单和响应更灵敏的GUI，以及通常更为丰富的Web用户体验。我将说明，如何通过Backbase RIA技术极大地改进应用程序的前端，同时无需对后端和总体系统需求做任何修改。
　　
　　Pet Store的RIA前端将通过以下方式改善可用性：
　　
　　把前端变为一个单页面的界面（SPI）。
　　
　　提供更先进的UI控件（如模态弹出式菜单）。
　　
　　使用可视化效果（例如，把宠物放入购物车）。
　　
　　更加有效地利用电脑屏幕的操作区域。
　　
　　
　　
　　在这一节中，我将讨论经过改进的新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栏
　　
　　
　　
　　增强Pet Store（或其他任何Web应用程序）的前端时，我们将继续依赖于以下两条架构基本原则：
　　
　　最终用户仍然使用标准的Web浏览器访问Pet Store，无需添加任何插件。
　　
　　由J2EE业务逻辑和数据组成的整个后端保持不变。
　　
　　现有的后端在开发期间是完全孤立的，而且不会改变，这个事实对于架构师和IT管理人

上一页12