打印版本

此处引用的 Adventure Builder 应用程序是以 Sun Microsystems Java BluePrints 程序（它用于展示 J2EE 1.4 平台上的 Web 服务）中的 Java Adventure Builder Reference 应用程序为模型。我们已使用 Java Studio Creator 2 IDE 重新构建并重新实现了 Adventure Builder 应用程序的客户 Web 部分以及它与 Web 服务的交互。

通过 Java Studio Creator 实现的 Adventure Builder 应用程序利用了 IDE 的多项功能。我们将向您介绍如何使用 JavaServer Faces 组件和页面片段来构建 JSP 页，该页可用来访问 Web 服务和数据库。同时，我们还将向您说明如何使用诸如 CSS、虚拟表单、转换器和验证器之类的功能，并向您介绍如何在适当的情况下定制这些功能。

准备开始之前，您首先应通过阅读位于 https://adventurebuilder.dev.java.net/architecture.html 的 Adventure Builder 体系结构文档来了解 BluePrints Java Adventure Builder Reference 应用程序。您还应该通过查阅位于 http://gceclub.sun.com.sun/prodtech/javatools/jscreator/learning/tutorials/2/jscintro.html 的教程《Sun Java Studio Creator 入门指南》来熟悉 IDE。

重要说明：在继续之前，请参见位于 http://gceclub.sun.com.cn/prodtech/javatools/jscreator/reference/docs/2/Installation_ReleaseNotes_2_1-zh_CN.html 的发行说明，以了解有关编译和查看 Adventure Builder 项目的重要信息。

请按照以下说明安装 Adventure Builder 应用程序，并确保在 IDE 中对其进行正确设置。

1. 从 http://gceclub.sun.com.cn/prodtech/javatools/jscreator/reference/techart/2/adventure_builder_ex.zip
   下载 Adventure Builder 项目的最新版本。
   将该文件解压缩到要放置项目的目录中。
   
   
2. 启动 Java Studio Creator IDE。在 IDE 中执行其余的步骤。
   
   
3. 从“服务器”窗口启动“部署服务器”和“Bundled Database 服务器”。
   
   
4. 为订单跟踪 Web 服务部署 OrderTracking.war 文件。请使用应用服务器的管理控制台来部署 .war 文件。
   
   
   • 在“服务器”窗口中，右键单击“部署服务器”，然后选择“查看管理控制台”选项。
     
     
   • 登录到 Sun Java System Application Server 管理控制台（请注意，缺省的用户名/口令组合是 admin/adminadmin）。
     
     
   • 从左侧的“日常任务”面板中选择“Web 应用程序”。这将显示已部署的 Web 应用程序。
     
     
   • 从“Web 应用程序”窗口中选择“部署”选项，以打开“部署 Web Module”窗口。
     
     
   • 选择用于上载文件的选项，然后导航到 OrderTracking.war 文件所在的位置。OrderTracking.war 文件位于 /OrderTracking/dist 目录（在解压缩 Adventure Builder 的位置下方）中。
     
     
   • 单击“下一步”。控制台将显示有关 OrderTracking Web 应用程序的信息。单击“确定”以部署 OrderTracking 应用程序。部署完成后，您应该可以在控制台中的“Web 应用程序”节点下看到 OrderTracking 应用程序。
     
     
5. 在 IDE 中打开 Adventure Builder 项目。
   
   
6. 创建 Adventure Builder 模式：
   
   
   • 在“服务器”窗口中，右键单击“数据源”节点下的任何节点。例如，右键单击“数据源”> "Travel" 节点。从弹出式菜单中选择“查看数据”，这将在 IDE 中打开“查询”标签。
     
     
   • 在“查询”标签中，单击“导入包含 SQL 命令的文件”选项，该选项由一个文件夹图标表示（请参见图 1）。
    
   

   图 1：“查询”标签窗口（单击以放大）

    
   
   • 在“打开”对话框中，导航到 <AdventureBuilder project>/conf 目录，然后选择 AdventureBuilder.sql 文件（AdventureBuilder 项目目录是解压缩 Adventure Builder 项目的目录）。单击“打开”。
     
     
   • 在“查询”标签中，单击“配置运行选项”按钮（是一个表示为网格的图标）以打开“运行查询选项”对话框。
     
     
   • 选择“SQL 命令终止符”的单选按钮“行尾的分号 ";"”，并单击“运行查询”（请参见图 2）。然后，关闭“查询”标签。
     
     
    
   

   图 2：“运行查询选项”对话框

    
   
7. 为 Adventure Builder 创建 JDBC 数据源：
   
   
   • 在“服务器”窗口中，右键单击“数据源”节点，然后从弹出式菜单中选择“导入数据源...”。
     
     
   • 在“打开”对话框中，选择 exported_datasources.xml 文件（位于 <AdventureBuilder project>/conf 目录中），然后单击“打开”。
     
     
   • 将显示“导入数据源”对话框。单击“确定”。
    
   
8. 配置了 Adventure Builder 订单跟踪 Web 服务后，客户端便可以通过缺省实例端口 29080 访问它。也就是说，订单跟踪 Web 服务客户端在端点地址 http://localhost:29080/OrderTracking/OrderTracking 上访问该服务。如果服务驻留在缺省端口以外的实例端口（如 29081）上，则订单跟踪结果页将为空。
   
   

   注意：此处显示的缺省端口号适用于 Java Studio Creator 2 Update 1 发行版本。如果您使用的是 Sun Java Application Server 8.1 附带提供的 Java Studio Creator 2 发行版本，则上面的缺省端口号和实例端口号分别为 28080 和 28081。

   要修复此问题，您需要在 TrackOrderResult.java 文件中更改引用缺省实例端口的端点地址，以改用正确的实例端口。要执行此操作，请在 TrackOrderResult.java 文件的 init 方法中添加一行代码。必须在调用该代码之前添加它，这样才能从订单跟踪客户端中检索到订单详细信息。

   在 IDE 中，双击“项目”窗口中的 TrackOrderResult 页以将其打开。然后，选择 "Java" 标签以显示 Java 源代码。找到 init 方法并查找以下语句：

   OrderDetails details = getOrderTrackingClient1().getOrderDetails(orderid);

   在此调用之前添加以下行以获取订单详细信息。将实例端口替换为相应的实例端口号。

   getOrderTrackingClient1().setAddress(
   	"http://localhost:<instance port>/OrderTracking/OrderTracking");

   例如，如果实例端口为 29081，TrackOrderResult init 方法可能如下所示：

   getOrderTrackingClient1().setAddress(
   	"http://localhost:29081/OrderTracking/OrderTracking");
   OrderDetails details = getOrderTrackingClient1().getOrderDetails(orderid);

9. 生成并运行 Adventure Builder 项目。在工具栏上的“运行”菜单中，单击“运行主项目”。

安装 Adventure Builder 项目后，您可能希望从 Java Studio Creator IDE 中浏览项目的各个部分。在“项目”窗口中，展开 AdventureBuilder 项目节点，然后展开“Web 页”节点。您应该看到 "resources" 节点，该节点包含在整个应用程序中使用的图像文件以及应用程序的样式表。“Web 页”节点还包含组成应用程序的不同 JSP 页和页面片段。双击“项目”窗口中的任何页，即可在“设计”窗口中查看其布局（使用 "JSP" 和 "Java" 标签可查看同一页的 JSP 和 Java 源代码）。

图 4 显示了一些在“项目”窗口中出现的 Adventure Builder Web 页。“设计”窗口显示了 Account.jsp 页。请注意 Main.jsp 页标有一个绿色箭头。该绿色箭头指示此页为起始页 - 即，运行应用程序时首先显示的页。

图 4：Adventure Builder Web 页（单击以放大）

同样，在“服务器”窗口中，展开“数据源”节点可看到 Adventure Builder 数据源 AdventureBuilder 以及它所包含的表。展开单个表可查看该表中的列。尽管 Adventure Builder 应用程序还依赖于 OrderTracking Web 服务，但是利用此 Web 服务的应用程序已部署到应用服务器中。如果 OrderTracking 服务是一个有效的 Web 服务，您就会在“服务器”窗口中的“Web 服务”节点内看到它。即，展开“部署服务器”>“已部署的组件”节点，您将看到 "/OrderTracking"。请参见图 5。

图 5：Adventure Builder 数据表和已部署的组件

要生成并运行应用程序，请右键单击“项目”窗口中的 "AdventureBuilder" 节点，然后从上下文菜单中选择“运行项目”。IDE 将编译并部署该应用程序。在部署完成后，将在浏览器窗口中打开 Adventure Builder，并显示 Main.jsp 页。

试用一下该应用程序。在各种探险类别中单击某个探险类别（如 Mountain Adventure），然后从中选择一种探险。也许您会选择 "Mountain Relaxation Adventure"。您将看到套餐旅游的详细信息 - 价格、旅店住宿以及活动列表。单击 "Select Package" 按钮可以购买套餐旅游项目，或单击 "Cancel this Adventure" 返回到探险类别页以选择其他探险。在您选择了套餐旅游项目后，该应用程序将转至某一页面，您可以在该页面中指定人数、开始和结束日期以及要预订的房间数。从下拉菜单中选择人数和房间数，然后输入开始和结束日期，以便对缺省的开始及结束日期进行更改。或者，单击位于相应的日期字段旁边的日历图标以显示某个日历，您可以从中选择某个日期。然后，选择航班或提供您自己的交通方式。至此，您便完成了探险套餐旅游选项的设置，现在应用程序将转至结帐屏幕。

完成结帐过程之前，您可以使用结帐屏幕上的标签来检查和更新已设置的选项：您可以更改住宿详细信息，删除活动以及重新设置交通方式选项。当一切准备就绪，请在 "Summary" 标签显示中单击 "Checkout" 按钮。如果您尚未注册，则应用程序将转至 "Sign In" 页，您可以在该页中作为回头客登录或创建一个新帐户。登录后，您将看到自己的帐单和信用卡信息，并可以更新这些字段。单击页面底部的 "Submit" 按钮完成购买探险套餐旅游的操作。应用程序将转至已完成的结帐页，您可以从该页中查看刚刚订购的套餐旅游详细信息。

整个 Java Adventure Builder Reference 应用程序是由多个基于 J2EE 的应用程序组成的，这些应用程序使用 Web 服务进行交互。在本文档中，我们将着重说明在 IDE 中实现的 Adventure Builder 应用程序部分，并将重点介绍客户界面，即客户 Web 站点应用程序，该应用程序已被替换为使用 JavaServer Faces 组件的 Java Studio Creator 版本。我们的客户 Web 站点应用程序与部署在应用服务器上的订单跟踪 Web 应用程序进行交互，该订单跟踪应用程序模拟引用应用程序的订单跟踪 Web 服务。此外，客户 Web 站点应用程序还与数据库进行交互。

该多层应用程序的前端是客户 Web 站点。客户使用浏览器与客户 Web 站点进行交互，以购买旅行度假套餐旅游项目。他们期望获得某些服务，例如可以跟踪订单。一旦客户组合并购买了度假套餐旅游项目，客户 Web 站点就会生成一个采购订单，并将其发送到订单处理中心。订单处理中心负责执行订单。图 6 显示了该应用程序的用例图。

图 6：应用程序用例图

实现客户 Web 应用程序必须满足一些要求，如下所示：

• 客户需要能够登录到应用程序并进行注销。
  
  
• 客户必须能够创建用户帐户。
  
  
• 客户可以浏览并选择度假套餐旅游项目。
  
  
• 客户可以从不同的组件（住宿、交通方式和活动）中组合一个完整的度假套餐旅游项目。客户对组件的选择决定了后续的应用程序流，即表单或页面的顺序。
  
  
• 虚拟的购物车可以保留客户的度假套餐旅游选项。
  
  
• 客户可以随时跟踪并显示订单详细信息。

在 IDE 之外开发的模块
我们使用 Sun Java Studio Creator 2 IDE 开发了 Adventure Builder 的 Web 应用程序模块。然而，为了让 Adventure Builder 应用程序正常运转，还必须提供该应用程序和 Web 服务的后端部分，这些部分不是使用 IDE 开发的。

尽管 Java Studio Creator 可以轻松地使用 Web 服务，但是它不支持创建 Web 服务。因此，订单跟踪 Web 服务应用程序是使用 Sun Java Studio Enterprise IDE 开发的（NetBeans 是另一个可用于开发 Web 服务应用程序的工具）。

Web 服务应用程序是使用 Java Studio Enterprise 创建的，并且在创建完成后将其包装为一个 .war 文件。与任何 .war 文件一样，它可以部署在 Sun Java Application Server 上。您可以在 Java Studio Creator IDE 中轻松地完成此类文件的部署（请回想一下，作为安装过程的一部分，我们在当初部署订单跟踪 .war 文件的情景）。通过 IDE 中的“服务器”窗口，启动部署服务器的管理控制台。利用管理控制台，您可以轻松地部署在 IDE 之外开发的应用程序，其中包括企业应用程序和 Web 应用程序，以及 EJB、连接器、生命周期和应用程序客户端模块。

Web 服务客户端工件
虽然订单跟踪 Web 服务是在 Java Studio Creator 外创建的，但是我们还是使用 IDE 为此 Web 服务创建了 Web 服务客户端工件。创建之后，我们让 IDE 组装了这些客户端工件并将其包装在 JAR 文件中，以便它们可以在其他环境中进行分发和部署。在 Adventure Builder 项目目录下的 /lib/webservice_clients 目录中，您可以找到这两个客户端的 JAR 文件。

Adventure Builder 应用程序使用这些 JAR 文件中的类来调用订单跟踪 Web 服务的方法，尤其是 OrderTrackingClient 类上的 getOrderDetails 方法。

您可以从 IDE 的“项目”窗口中查看这些文件并检查它们的内容。展开 AdventureBuilder 项目中的 “lib” 节点，并向下滚动到 OrderTracking Web 服务的条目。

图 7：OrderTracking Web 服务客户端工件

在用户请求中共享状态
Adventure Builder 应用程序需要在多个用户请求中共享其某个状态。此状态（通常称为会话状态）是有关特定用户与应用程序进行交互的信息，它可以存在于多个请求中，甚至可能在用户的整个会话中持续存在。

当用户首次启动浏览器会话时，IDE 会自动实例化一个名为 SessionBean1 的会话 Bean。在浏览器会话终止之前，此会话 Bean 将一直存在。会话 Bean 对象被认为存在于会话范围内，而且这些对象是唯一的并为每个用户会话所专用。会话 Bean 可以在多个页面上使用，并且在同一会话中运行的其他对象可以访问该会话 Bean。

Adventure Builder 应用程序使用 SessionBean1 保存它在整个用户会话期间所需的状态。除了与用户选择的下拉列表组件的选项和值有关的一些属性外，这还包括应用程序使用的大部分行集数据。

请求 Bean 是另一种在多页中共享状态的机制。请求 Bean 仅用于在页面之间传递某个状态，除此之外不会保留其状态。要使用请求 Bean，您应当为请求 Bean 添加一个属性，以保存要在两个页面之间传输的状态。然后，在第一页的操作处理程序方法（它启动指向第二页的链接）中，使用请求 Bean 的 setter 方法添加代码以设置此请求 Bean 属性的值。第二页在其初始化代码中使用请求 Bean 存取方法，从该请求 Bean 属性中获取值。

Adventure Builder 应用程序使用 RequestBean1 在 CartSummary 和 Customer 两个页面之间传递某些住宿和客户帐户的行集数据。如果在“概要”窗口中检查 RequestBean1，您会注意到，它包括 lodgingRowCountRowSet（和一个查询，该查询用于从 LODGING 表中选择与用户输入的位置匹配的记录）以及 customerAccountRowRowSet（和一个查询，该查询用于从 ACCOUNT 表中选择与用户输入的客户标识符匹配的记录）。

图 8：“概要”窗口中的 RequestBean

这两个行集被放置在请求 Bean 中，原因是只有两个页面需要共享数据。如果放置在会话 Bean 或应用程序 Bean 中，则数据将在整个用户会话期间或应用程序的整个持续时间（对于应用程序 Bean 而言）中一直存在。

安全
出于安全考虑，Adventure Builder 允许用户自行注册，这是一种简单易懂的安全模型。自行注册时，用户可以管理自己的帐户，不会有管理员的干预。

Adventure Builder 允许已注册和未注册（也称为匿名）的用户访问 Web 站点。这两种类型的用户都可以通过目录浏览探险套餐旅游项目、选择并形成一个完整的套餐旅游项目，即，将各项放置在虚拟购物车中，所有这一切都无须注册。但是，用户必须注册和登录（只有已注册的用户才可以登录）到应用程序，才能真正购买套餐旅游项目。

如果用户在访问结帐页时尚未登录，则应用程序将要求用户完成登录过程。如果用户已注册，则可以使用其注册的用户名和口令进行登录。或者，用户此时可以通过提供其他标识信息进行注册，然后进行登录。

Web 应用程序将跟踪那些尚未登录的客户。这样，应用程序便可以在这些客户尝试购买购物车中的物品时显示登录页。应用程序登录页既允许回头客登录，同时也允许新客户进行注册。

使用 Web 服务
Java BluePrints Reference 应用程序使用订单处理中心提供的 OrderTracking Web 服务来检索探险套餐旅游订单。此 Web 服务会向客户端公开方法 getOrderDetails。在项目安装过程中，我们已在部署到应用服务器的 OrderTracking Web 应用程序中实现了此 Web 服务功能。

假定您希望查找使用此 Web 服务的一个或多个页面。如果您不想在应用程序的大量页面中手动搜索，请使用“编辑”下拉菜单中的“在项目中查找...”功能。图 9 显示了“在项目中查找”对话框，我们通过使用该对话框来搜索 getOrderDetails 方法。在 IDE 底部中心位置打开的“搜索结果”窗口中，列出了匹配的节点。通过检查结果，您可以很容易地发现，TrackOrderResult 是唯一使用 Web 服务的 getOrderDetails 方法的 JSP 页。

图 9：在页面中查找 Web 服务

当您打开 TrackOrderResult 页时，“概要”窗口会显示该页面上的组件以及 orderTrackingClient1（请参见图 10）。如果 OrderTracking 服务作为一个 Web 服务，则在您将此 Web 服务从“服务器”窗口中的“Web 服务”节点添加到 TrackOrderResult 页时，IDE 将创建一个 Web 服务客户端。因此，该服务就可以通过部署的 OrderTracking Web 应用程序供应用程序使用。

图 10：trackOrderResult 页的“概要”窗口

页面的 Java 代码可以调用 Web 服务的 getOrderDetails 方法。下面介绍了页面是如何使用 getOrderDetails Web 服务方法的：

OrderDetails details =
getOrderTrackingClient1().getOrderDetails(orderid);

正如上面所述，我们使用 IDE 组件面板中的 JavaServer Faces 组件生成了客户 Web 应用程序用户界面。我们还使用了 IDE 编辑器（特别是样式编辑器和查询编辑器）对这些组件进行了调整。

让我们看一下用户界面必须执行的一些任务，如页面布局、过程流、数据访问和错误消息显示，并了解如何使用各种 IDE 组件来处理这些任务。

要了解有关组件的详细信息，请参见位于 http://gceclub.sun.com.cn/prodtech/javatools/jscreator/learning/tutorials/2/about_components.html 的教程“深入研究组件”。

页面布局
利用 Java Studio Creator，您可以轻松地设计应用程序 Web 页的布局。IDE 包括许多您可以拖放到页面上的组件，如标签、文本字段和区域、下拉列表、复选框、按钮和图像超级链接组件。您可以将这些组件放置在页面上，并且根据需要移动和调整其大小，以交互的方式来设计页面；还可以使用样式编辑器更改组件的外观，如颜色、字体（如果为文本）、边框等（并且还可以编辑项目样式表或者添加其他样式表，以此来调整整个页面或多个页面中组件的外观）。

网格面板
网格面板是一个用来设计页面布局的有效组件。您可以使用网格面板将后续添加的组件自动排列到行和列中。此外，放置在网格面板中的组件会随着用户更改缩放级别而自动调整大小，这取决于用户使用的具体浏览器。

下面介绍了网格面板的工作方式。首先，从组件面板的“布局”类别中将一个网格面板拖动到页面上，将其放在要排列组件的页面区域中。然后将其他组件（如标签、文本字段等）拖放到网格面板上。缺省情况下，您添加到网格面板上的组件将按照添加它们的顺序在面板中从上至下依次显示。如果面板包含多列，则以从左至右、从上至下的顺序添加组件。您可以使用网格面板的属性表单来控制组件的布局和面板的外观，例如通过设置列数、外观规则、新组件的添加方向、样式等。

当您设计页面布局时，Account.jsp 页是一个很好的让您了解如何使用网格面板的示例。帐户页主要显示一个表单，以供用户在创建新的客户帐户时填写。图 11 显示了“设计”窗口中使用网格面板的帐户页部分。“概要”窗口则显示了已添加到此网格面板的组件。另请注意，网格面板组件本身可以包含网格面板组件。对于 Account.jsp 页上的表单，存在一个外部网格面板（标记为 gridPanelOuter）。它包含两个网格面板：gridPanelInner1 和 gridPanelInner2。gridPanelInner1 组件是一个包含表单字段的两列网格面板。两列格式会让字段看起来排列得非常整齐。gridPanelInner2 组件也被设置为两列，它包含用于清除表单或创建新帐户的按钮。与其他内部网格面板一样，这两列会使按钮对齐。在图 11 中，最外部的网格面板在“设计”窗口中处于选中状态。

 

图 11：帐户页网格面板（单击以放大）

 

在“设计”窗口中，网格面板的轮廓由虚线来标记。当网格面板处于选中状态时，您可以手动调整其大小，方法是：单击位于四个角中的方框，然后沿轮廓的边缘拖动方框。但是请记住，当您将组件拖放到面板上时，该面板将自动扩展。

由于这是一个两列的网格面板，因此拖放到该面板上的组件将按照先从左至右再从上至下的顺序显示。即，首先从左至右添加表示姓氏的标签和文本字段组件，然后在姓氏的下方从左至右添加另外两个组件，在底部添加表示国家/地区的标签和文本字段组件。另请注意，添加到面板的所有组件均处于对齐状态，且在其各自的列中靠左对齐。所以可以认为，网格面板专门负责组件的排列布局。

表组件
应用程序使用表组件来显示从数据库查询中获取的信息。我们只需将一个表组件从组件面板拖放到页面上，然后将数据库表拖放到页面中的表上即可。IDE 会将数据库表绑定到表组件，缺省情况下，表组件会设置为显示所有数据库表列。

让我们看一下 AdventureDetails.jsp 页是如何使用表组件的。请注意，在浏览器中此页显示了三个类似的表（请参见图 12）。我们将这三个表放置在页面上已有的网格面板组件中。通过网格面板可以将表对齐，并允许我们在这三个表的周围放置边框。

 

图 12：浏览器中的 AdventureDetails 页（单击以放大）

 

开发此页时，我们首先在页面上放置一个网格面板组件，然后将各个表组件拖放到网格面板上。接下来，将数据库表拖放到不同的表组件上。例如，将 ACTIVITY 表拖放到一个表组件上（请参见图 13）。

 

图 13：添加数据库表（单击以放大）

 

然后，选择表组件，并从上下文菜单中打开“表布局”对话框。使用该“表布局”对话框（请参见图 14）定制表，以便它像图 12 中所示的那样出现在浏览器中。在表布局“选项”标签中，键入表的标题 (Included Activities)，清除分页、排序和其他选项。在“列”标签中，删除显示的三个数据库表列之外的所有列，并添加一个图像列。

 

图 14：“表布局”对话框

 

数据访问和数据提供器组件
我们使用数据提供器组件访问数据库表中保存的数据。这些组件简化了对存储数据的访问。尽管存在适用于不同数据存储类型（行集、列表、数组、映射等）的数据提供器，我们还是主要依靠 CachedRowSet 表数据提供器和表行数据提供器，因为应用程序会从数据库接收数据。CachedRowSet 表数据提供器简化了创建查询以处理数据库表数据的过程，而表行数据提供器可以让您访问表中的单个行。

请注意，许多 Adventure Builder 页都包含一个或多个数据提供器。除了各个页中的数据提供器外，SessionBean1 还包括访问不同表的行集。每个行集都表示一个查询（或 SQL SELECT 语句）。

例如，让我们看一下 Travel.jsp 页。通过此页，您可以选择起程航班和返程航班。它包括与 SessionBean1 中的三个行集（transportationRowSet、transportationDepartureRowSet 和 transportationReturnRowSet）关联的三个数据提供器（transportationDataProvider、transportationDataProvider1 和 transportationDataProvider2）。这些行集的查询 SELECT 语句从 TRANSPORTATION 数据库表中获取匹配的行。

通过 Travel.jsp 页，用户可以同时选择度假的起程航班和返程航班。transportationDataProvider 包装了用于检索所有航班的 SQL 查询，而 transportationDataProvider1 包装了起程航班的查询，transportationDataProvider2 包装了返程航班的查询。最后两个查询会基于原始参数和目标参数来选择行。请参见图 15 和图 16。

 

图 15：Travel.jsp 页数据提供器和 SessionBean1 行集（单击以放大）

 
 

图 16：transportationDepartureRowSet 查询

 

您可能想知道为什么此页使用三个数据提供器和三个行集。应用程序使用数据提供器 API 访问由不同的行集查询返回的不同缓存表数据集。每个行集都保留一个单独的缓存行集或数据集，并在这些缓存行中保留单独的指针。

要了解有关数据库访问的详细信息，请参见位于 http://gceclub.sun.com.cn/prodtech/javatools/jscreator/learning/tutorials/2/databoundcomponents.html 的“使用数据绑定组件访问数据库”。

控制应用程序流
您可以使用若干个组件控制应用程序流。此外，IDE 为您提供了在应用程序的不同页面之间轻松建立过程流的工具。在此部分，我们将检查页面导航和标签。

页面导航
我们使用页面导航来定义应用程序的过程流。页面导航允许您以可视方式设计应用程序流，方法是：在应用程序页面之间建立链接，从而建立应用程序的交互模型。您可以选择首先创建并设计应用程序的页面，然后在“导航”窗口中将它们链接在一起。或者，您可以使用页面导航创建空白页（如桩模块或占位符）并将它们链接在一起，稍后添加页面布局和功能。在开发应用程序时，您甚至可以在这两种模式之间来回切换。

无论采取哪种方法，您都可以重新访问页面导航功能，进而调整页面之间的交互，尤其是当您希望将一个页面上的特定操作组件链接到其他页面上时。通常情况下，以页面级别为准，将一个页面链接到另一个页面，从而定义应用程序流。然后，在各个页面上实现应用程序细节（即，在页面上放置按钮、链接等）时，可以返回到“导航”窗口，并在单个页面中的组件级别创建导航链接。您甚至可以直接在“导航”窗口中将按钮和其他链接添加到页面中。

例如，图 17 显示了“导航”窗口中 Adventure Builder 页面导航显示的一部分。

 

图 17：“导航”窗口

 

图 18 显示了同一页面导航显示的不同片段，但是现在您可以在组件级别上看到链接。我们单击了 CartSummary.jsp 页上的结帐按钮 (checkoutButton)，将该页放大并显示了该页组件的详细信息和指向后续页面的链接。

 

图 18：“导航”窗口的组件级别显示

 

标签组件
在 Adventure Builder 中，我们使用了标签组件进行页面导航并显示同一页上的不同布局。通过标签，用户可以快速、轻松地查看应用程序功能并导航到该功能。标签还最大限度地利用空间：标签的标题可以指定信息面板的内容或功能，为用户提供一种快速浏览给定页中的信息的方法。

IDE 提供了标签集和标签组件，我们使用这些组件在 CartSummary 页上创建了一组标签。标签可以具有子标签和其他组件（如按钮、超级链接和网格面板），所有这些都显示在顶级标签的下面。当应用程序运行时，会显示顶级标签。如果用户单击某一标签，则会在选定标签下显示子标签或组件。并且 IDE 会生成各种标签及子标签之间的链接。

通过 CartSummary 页上的标签，客户可以轻松地导航到订单的不同汇总屏幕（住宿、活动、交通方式等）。我们已将标签集组件从组件面板的“布局”类别拖放到页面上。标签集就像一个包含实际标签和子标签的容器。将一个标签集拖放到已添加了一个标签集和一个标签的页面上。然后，通过将标签组件拖放到标签集上来添加其他标签，这是在同一顶级上添加标签（虽然我们未使用过子标签，但是将一个标签组件拖放到另一个标签组件上会创建子标签）。

在添加标签时，IDE 会分配缺省名称和序列号，从 Tab 1、Tab 2 开始依此类推。我们更改了这些名称以匹配特定标签的功能。我们还在每个标签的下方放置了网格面板组件，以包含特定的汇总显示。例如，图 19 显示了 cartSummary 页上的标签集组件。如果选择 "Lodging" 标签，则“设计”窗口将显示用户以前选择的住宿安排。

 

图 19：标签组件（单击以放大）

 

处理错误
如果在处理期间出现错误，则应用程序必须显示相应的消息。特别是当一个错误是客户可以解决的错误时（例如，在尝试跟踪订单时，客户输入了无效的订单号），更应如此。同样，当出现系统错误时也应如此，无论用户是否能从这些错误中恢复。

应用程序使用消息组件显示与特定组件关联的信息性消息或错误消息。它使用消息组组件显示全局性的消息或与整个页面有关的消息，如系统错误。在您开发应用程序时，消息组组件也是非常有用的，因为它们对调试页面很有帮助。

有关详细信息，请参见位于 http://gceclub.sun.com.cn/prodtech/javatools/jscreator/learning/tutorials/2/message_components.html 的“使用消息组件”。

虚拟表单
通过使用虚拟表单功能，可以在提交 Web 页时限制要处理的输入字段。Login.jsp 页就是使用虚拟表单的最佳示例。Login.jsp 页可以处理现有客户以及新客户。但是，我们只需要处理现有客户或新客户的登录数据，并不同时处理这两者的数据，因为现有客户与新客户的处理方式不同。

我们使用虚拟表单功能来定义两组输入数据：一个虚拟表单包含回头客输入的数据，另一个虚拟表单包含新客户输入的数据。在我们处理 Login.jsp 页时，虚拟表单将这两组数据分别进行处理。例如，如果用户为回头客，则单击 "Sign In" 按钮时，仅处理口令字段。而不处理新用户的名称字段。

要了解有关虚拟表单的详细信息，请参见位于 http://gceclub.sun.com.cn/prodtech/javatools/jscreator/learning/tutorials/2/virtual_form.html 的“使用虚拟表单”。您可能还需要阅读位于 http://gceclub.sun.com.cn/prodtech/javatools/jscreator/reference/techart/2/virtual_forms.html 的“如何使用虚拟表单”一文。

图 20 显示了 Login.jsp 页，其中虚拟表单显示处于打开状态。

 

图 20：虚拟表单（单击以放大）

 

其他组件
应用程序还利用了其他的 IDE 组件，其中包括验证器和日历组件。

验证器
对于数据验证，我们使用 IDE 提供的内置验证器。但是，因为 IDE 不提供验证电子邮件格式的验证器，所以我们实现了定制的电子邮件验证器。登录页使用 Javascript 来执行客户端验证。有关验证器和转换器的详细信息，请参见位于 http://gceclub.sun.com.cn/prodtech/javatools/jscreator/learning/tutorials/2/validators_converters.html 的“使用验证器”。

日历组件
我们使用了日历组件来接受用户输入的日期。利用日历组件，用户既可以输入日期，也可以显示一个月历，进而从中选择日期。用户还可以向后或向前推移到任何月份。

本文介绍了如何使用 Java Studio Creator 2 IDE 来开发面向客户的 Web 应用程序。以 Adventure Builder 客户 Web 应用程序为例，本文说明了如何通过 IDE 轻松设计并生成此应用程序。尽管本文不能作为实践教程（涵盖 IDE 的所有方面）来使用，但也确实为大家提供了有效使用 IDE 的简便方法。

此外，本文还介绍了如何使用组件面板上各种复杂的组件来快速设计具有复杂功能和专业外观的 Web 页，如何使用页面导航功能在应用程序的页面之间建立控制流，以及如何在 Web 应用程序中包含数据库访问、通过外部 Web 服务获取信息，并考虑用户访问的安全性。

有关使用 IDE 的详细信息，请参见位于 http://gceclub.sun.com.cn/prodtech/javatools/jscreator/learning/tutorials/index.html 的教程。

您还应当浏览 http://gceclub.sun.com.cn/prodtech/javatools/jscreator/reference/techart/index.html 站点，该站点介绍了有关 IDE 各个方面的技术文章。