Web 应用程序中的导航页面

2008 年 3 月 [修订号：V6.0]

本教程将介绍在 NetBeans IDE 6.0 中如何建立页面导航。最初在 IDE 中创建的 web 应用程序，仅使用了简单的两页面间的导航。第一张页面上的按钮能转至第二张页面。而后对应用程序的修改，使其能在运行时根据下拉列表组件的返回值来决定显示哪个页面。您还能学到动态页面导航的一种更高级的替代方法，即在下拉列表中作出选择的瞬间就进行页面导航。

预计学习时间：20 分钟

目录

• 创建第一张页面
• 两张页面间的导航
• 在第二张页面中添加组件
• 添加用于动态导航的下拉列表
• 添加第三张页面
• 实现动态页面导航
• 部署应用程序
• 实现高级动态页面导航

学习本教程需要以下技术和资源：

JavaServer Faces 组件/ Java EE 平台	1.2 和 Java EE 5* 1.1 和 J2EE 1.4
Travel 数据库	非必须

* 为了使用 NetBeans IDE 6.0 的 Java EE 5 特性，请使用与 Java EE 5 全兼容的应用程序服务器，比如 Sun Java Application Server 9/GlassFish。

本教程专为使用 GlassFish v2 应用程序服务器做了修订。如果您使用其他的服务器，请参考发布说明和 FAQs，了解已知的问题及其解决方法。有关受支持的服务器和 Java EE 平台的详细信息，请参阅发布说明。

创建第一张页面

在本教程的开始，您将创建一个仅有两张页面的 web 应用程序，而且在页面之间使用按钮进行导航。稍后，您将添加一个下拉列表组件，以使用户能在运行时选择目标页面。

1. 创建一个新的 web 应用程序项目，并将其命名为 NavigationExample，使用 GlassFish V2 应用程序服务器以及可视化 Web JavaServer Faces 框架。

   新项目中的初始页面会在“可视化设计器”中显示出来。下图展示了根据以上步骤创建出的页面：

   图 1：页面 1 的设计

2. 从“组件面板”的“基本组件”中，拖动一个静态文本组件，并将其放置在页面中。在组件的默认文本上直接按键，来将组件的 text 属性更改为 Page One。
3. 从“组件面板”中拖拽一个按钮组件，放置在页面，并将其 text 属性更改为 Go。
   • 重要注意事项：在 IE7 中有一个已知问题会影响 JSF 1.2 按钮组件的宽度。解决方法是将按钮组件放置在一个布局组件中（Grid Panel、Group Panel、或者是 Layout Panel）。缩放布局组件能自动缩放该按钮组件。

两张页面间的导航

1. 在“可视化编辑器”中编辑区域的空白处单击鼠标右键，然后在弹出菜单中选择“页面导航”。

   “页面流编辑器”会显示一个图标表示 Page1.jsp ，代表在前一节中创建的页面。注意该图标有 4 个特征：
   
   1. 徽章标明该图标表示哪一类页面。绿色箭头表明该页面是项目的主页面。
   2. 图标上标识的文件名用以区别产品中其他页面。
   3. 展开图标上的加号可以显示页面上的组件。
   4. 连接器端口用于绘制页面间的导航线。

2. 按照如下步骤创建一个新的 JSP 页面：

   1. 右键单击空白处，选择“新建文件”。
   2. 在“新建文件”对话框中，在“类别”面板选中“Java Server Faces”，在“文件类型”面板选中“可视化 Web JSF 页面”，然后点击“下一步”。

   3. 接受默认文件名，“Page2”，点击“完成”。

      Page2.jsp 会在“可视化设计器”中打开。点击 Faces-config.xml 选项卡再次打开“页面流编辑器”。图 2 展示了包含所有页面的“页面流编辑器”。
3. 点击 Page1.jsp 图标上的加号来将其放大，这样就能看到 button1 图标了。
4. 点击 button1 图标，并拖拽一条线至 Page2.jsp 图标。这时会出现一个连接器，锚在第一张页面，而指向第二张页面。默认情况下，新创建的连接器被命名为 case1。

5. 双击该连接器的名称，并将该名称从 case1 改为 Page 2。

   下图展示了“页面流编辑器”以及两张页面之间的连接器。

   图 2：页面流编辑器

6. 点击编辑工具栏中的“XML”，查看一下在前面两步中所生成的代码。下面粗体显示的“navigation-rule”被添加在省略号（...）所表示的受管 bean 代码下面。

   代码示例 1：生成的代码

   <?xml version="1.0" encoding="UTF-8"?> <faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"> ... <navigation-rule> <from-view-id>/Page1.jsp</from-view-id> <navigation-case> <from-outcome>Page 2</from-outcome> <to-view-id>/Page2.jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config>

   
   在 faces-config 标签中所添加的代码指定了用于此 web 应用程序的单向导航规则。每个导航规则指定了一张原始页面，以及一张或者多张目标页面。

在第二张页面中添加组件

1. 点击编辑工具栏中的“页面流”。

2. 双击 Page2.jsp 图标。

   页面会在“可视化设计器”中打开。
3. 在页面中放置一个静态文本组件，然后将其 text 属性更改为 Page Two，如下图所示。
   
   

   图 3：页面 2 的布局

4. 按下“F6”键部署应用程序。

5. Web 应用程序部署后，“Page One”会在浏览器中打开，如下图所示：

   图 4：使用简单导航 Web 应用程序

6. 点击“Go”按钮，将带您从第一张页面导航至第二张页面。

在本节中，您创建了两张页面，并建立了从一张页面到另一张页面的简单导航。在下一节中，您将基于下拉列表组件中的选择来建立导航。

添加用于动态导航的下拉列表

现在您将学习有关动态导航的内容。在应用程序中的第一张页面中添加一个下拉列表组件。下拉列表允许用户在运行时选择目标页面。之后，在应用程序中加入第三张页面，这样下拉列表就包含了两个目标选项。

下图展示了上述步骤对页面 1 所做的改动：

图 5：修改后第一张页面的布局

1. 在“可视化设计器”中打开 Page1.jsp。
2. 在静态文本组件下方放置一个下拉列表组件。
3. 右键点击该下拉列表，选择“配置默认选项”。

4. 在标为“选项定制器 - dropDown1”的对话框中，将每项默认条目的值更改为下图中所给出的值。点击每个表项来编辑其值，编辑每个域后按下“Enter”键接受改动。

   图 6：“选项定制器”对话框

5. 点击“确定”保存所有改动。

添加第三张页面

接下来创建第三张页面，第一张页面可以导航至该页面。

1. 在“项目”窗口中，右键点击“NavigationExample”>“Web 页面”节点，选择“新建”>“可视化 Web JSF 页面”。在“新建可视化 Web JSF 页面”向导中，点击“完成”。IDE 会创建并显示 Page3.jsp。
2. 从“组件面板”中拖拽一个静态文本组件，并放置在页面中。设置组件的文本为 Page Three。

实现动态页面导航

1. 打开“页面流编辑器”。
2. 点击 Page1.jsp 图标显示其内容，然后从按钮的连接器端口拖拽一条连接器线至 Page3.jsp 图标。
3. 将连接器的名称 case1 更改为 Page 3。
4. 双击 Page1.jsp 图标，并在编辑工具栏中点击“设计”来显示页面 1 的布局。
5. 双击“Go”按钮组件，在“Java 编辑器”中显示其动作处理方法的源代码。

6. 将方法中的 return 语句替换成下面粗体显示的代码：

   • 重要注意事项：NetBeans IDE 6.1 加入了按需帮定的特性。故如果您正在使用 NetBeans IDE 6.1，您必须手动向“Page 1”的下拉列表组件添加一条帮定属性。要完成该动作，右键点击组件，然后选择“添加帮定属性”。

   代码示例 2：return 语句

   public String button1_action() { return (String) dropDown1.getValue(); }

部署应用程序

1. 按下“F6”键部署应用程序。
2. 在第一张页面中，从下拉列表中选择“Page 2”，然后点击“Go”转至第二张页面。
3. 点击浏览器中的“后退”按钮，从第二张页面返回至第一张页面。
4. 现在从下拉列表中选择“Page 3”，然后点击“Go”将转至第三张页面。

实现高级动态页面导航

1. 选择“Page1”选项卡，点击编辑工具栏中的“设计”切换至“可视化设计器”。
2. 右键点击“Go”按钮，选择“删除”。
3. 双击下拉列表组件，打开“Java 编辑器”来查看 Page1 的类代码。

4. 将下面粗体显示的代码添加到 dropDown1_processValueChange() 处理方法。代码的前两行会获取一个应用程序的对象引用。然后通过该对象获取一个“导航处理器”（NavigationHandler）的实例。调用该实例的 handleNavigation() 方法时指定的值就是从下拉列表组件返回的值，该值指示要浏览的页面。

   代码示例 3：“导航处理器”（Navigation Handler）方法

   public void dropDown1_processValueChange(ValueChangeEvent event) { Application application = getApplication(); NavigationHandler navigator = application.getNavigationHandler(); FacesContext facesContext = getFacesContext(); navigator.handleNavigation(facesContext, null,(String) dropDown1.getValue()); }

   
   注意，红色的波浪线说明找不到类 Application、NavigationHandler 和 FacesContext 。您将在下一步中导入这些类。

5. 在“源代码编辑器”中任意地方单击鼠标右键，选择“修复导入”来自动添加下列导入语句到源文件的顶部：

   代码示例 4：用于“导航处理器”（Navigation Handler）方法的导入语句

   import javax.faces.application.Application; import javax.faces.application.NavigationHandler; import javax.faces.context.FacesContext;

6. 在编辑工具栏中点击“设计”打开“可视化设计器”查看“Page1”。
7. 右键点击下拉列表组件，选择“自动提交改动”来指明被选中的条目将在选中时被自动提交。
8. 部署并运行应用程序。
9. 在下拉列表中选择“Page 2”条目，从第一张页面导航至第二张页面。点击“后退”按钮返回到第一张页面。
10. 在下拉列表中选择“Page 3”条目，从第一张页面导航至第三张页面。
    

更进一步：处理大量页面

1. 在“页面导航”编辑器中，点击编辑工具栏中的“XML”按钮。

2. 添加如下列 XML 中的第一项所示的导航规则。设置 <from-view-id> 为 /*，设置 <from-outcome> 为方便于其他页面区分的字符串，并将 <to-view-id> 设置为目标页面。

   代码示例 5：用于大量页面应用程序的页面导航 XML 代码

   <?xml version="1.0" encoding="UTF-8"?> <faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"> <navigation-rule> <from-view-id>/*</from-view-id> <navigation-case> <from-outcome>login</from-outcome> <to-view-id>/Page3.jsp</to-view-id> </navigation-case> </navigation-rule> <navigation-rule> <from-view-id>/Page1.jsp</from-view-id> <navigation-case> <from-outcome>case1</from-outcome> <to-view-id>/Page2.jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config>

   
   

   当返回到“页面导航”编辑器时，编辑器可能显示一些错误，不过这些错误可被忽略。

3. 在要向页面发送消息的动作组件的动作处理方法中，要返回 from-outcome（本例中是 "login"），如下所示：

   public String button1_action() {
           return "login";
       }

小结

1. 创建页面。
2. 在页面上放置支持导航的组件，比如按钮和下拉列表。
3. 使用“页面流编辑器”，在组件和页面之间绘制连接器。
4. 使用 dropDown1_processValueChange() 处理方法实现更高级的导航。
   

更多内容

• 可视化 Web JSF 应用程序开发入门
• 使用 Databound 组件访问数据库
• 使用页面片段

---

请将您的建议和意见发送给我们