HOME / Docs & Support / NetBeans 6.5

在 Web 应用程序中的页面之间进行导航

本教程介绍如何在 NetBeans IDE 6.5 中设置页面导航。首先，您将在 IDE 中创建一个 Web 应用程序，该程序在两个页面之间使用简单的导航。使用第一页上的按钮可以转至第二页。然后，对该应用程序进行修改，以使其在运行时基于下拉列表组件返回的值确定显示哪一页。您还将了解另一种更高级的动态页面导航方法，通过该方法，可以在从下拉列表中进行选择后立即进行页面导航。

预计时间：25 分钟

本页上的内容适用 NetBeans IDE 6.5

要学习本教程，您需要具备以下软件和资源。

软件或资源	要求的版本
NetBeans IDE	6.5 Java 版本
Java Development Kit (JDK)	版本 6 或版本 5
JavaServer Faces 组件/ Java EE 平台	1.2（带有 Java EE 5*）或 1.1（带有 J2EE 1.4）
GlassFish 应用服务器	V2
Travel 数据库	无版本要求

* 要利用 NetBeans IDE 的 Java EE 5 功能，请使用完全符合 Java EE 5 规范的应用服务器，例如 GlassFish V2 UR2 应用服务器。如果使用的是其他服务器，请查阅发行说明和常见问题解答，了解已知问题和解决方法。有关支持的服务器和 Java EE 平台的详细信息，请参见发行说明。

创建第一页

在本教程的第一部分中，您将创建一个包含两个页面的 Web 应用程序，并使用按钮在两个页面之间进行导航。随后，将添加一个下拉列表组件，以使用户能够在运行时选择目标页。

首先，创建一个包含静态文本组件和按钮组件的页面。

创建一个使用 GlassFish V2 应用服务器和 Visual Web JavaServer Faces 框架且名为 NavigationExample 的新 Web 应用程序项目。

将出现新项目，并且其初始页会显示在可视设计器中。下图显示了将在后续步骤中创建的页面：
从组件面板的“基本”类别中，将一个静态文本组件拖放到页面上。通过直接在组件的缺省文本上键入内容，将组件的 text 属性更改为 Page One。
将一个按钮组件从组件面板拖放到页面上，并将其 text 属性更改为 Go。
注意：IE7 存在一个已知问题，它会影响 JSF 1.2 按钮组件的宽度。解决方法是，将按钮组件放在布局组件（网格面板、组面板或布局面板）中。调整布局组件大小时，将会自动调整按钮组件的大小。
右键单击按钮组件，然后选择“添加绑定属性”。

在两个页面之间导航

接下来，在应用程序中添加另一个页面，然后通过创建链接或页面连线指定第一页和第二页之间的导航。

在可视编辑器的编辑区域空白处单击鼠标右键，然后从弹出式菜单中选择“页面导航”。
页面流编辑器将显示一个图标表示 Page1.jsp ，代表您在上一部分创建的页面。请注意，此图标具有四个特性：
1. 标记指示图标代表哪类页面。绿色箭头指示页面是项目的主页面。
2. 图标代表的文件名区分产品中的页面。
3. 加号可以展开图标以显示页面上的组件。
4. 连接器端口用于绘制页面之间的导航线。
按如下步骤创建一个新的 JSP 页：
1. 在编辑区域中单击鼠标右键，然后选择“新建文件”。
2. 在“新建文件”向导的“类别”下选择 "JavaServer Faces"，在“文件类型”下选择“Visual Web JSF 页”，然后单击“下一步”。
3. 接受缺省名称 Page2，然后单击“完成”。
  将在可视设计器中打开 Page2.jsp。单击 Faces-config.xml 标签重新打开页面流编辑器。图 2 显示了具有两个页面的页面流编辑器。
单击 Page1.jsp 图标上的加号将其放大，以便可以看到 button1 图标。
单击 button1 图标，并拖动一条连线至 Page2.jsp 图标。将出现一条由第一页指向第二页的连线。缺省情况下，新创建的连线名为 case1。
双击该连线的名称，然后将其名称由 case1 更改为 Page 2。

下图显示了页面流编辑器，其中包括两个页面之间的连线。

单击编辑工具栏中的 "XML" 以查看在最后两步中生成的代码。下面以粗体显示的导航规则被添加在受管 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 标记内添加的代码用于指定此 Web 应用程序的单个导航规则。每个导航规则都指定一个初始页以及一个或多个目标页。

向第二页添加组件

现在，将向第二页添加一个标签，以便在视觉上将该页与第一页区分，然后运行应用程序。

单击编辑工具栏中的“页面流”。
双击 Page2.jsp 图标。
该页面将在可视设计器中打开。
将一个静态文本组件放到页面上，并将其 text 属性更改为 Page Two，如下图所示。
按 F6 键以部署应用程序。

注意：缺省情况下，将在启用“在保存时编译”功能的情况下创建项目，因此无需先编译代码即可在 IDE 中运行应用程序。有关“在保存时编译”功能的详细信息，请参见创建、导入和配置 Java 项目指南的“在保存时编译”部分。
部署 Web 应用程序后，将在浏览器中打开第一页，如下图所示：
单击 "Go" 按钮，将从第一页导航至第二页。

在以上部分中，您创建了两个页面，并建立了从一个页面到另一个页面的简单导航。在下面的部分中，您将基于从下拉列表组件中选择的内容来建立导航。

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

现在，您将了解有关动态页面导航的信息。您将在应用程序的第一页中添加一个下拉列表组件。用户可以在运行时通过下拉列表来选择目标页。随后，您将在应用程序中添加第三个页面，以使下拉列表包含两个目标选项。

下图显示了在后续步骤中对第一页所做的更改：

第一页修改后的布局

在可视设计器中打开 Page1.jsp。
将一个下拉列表组件放在静态文本组件的下面。
右键单击该下拉列表组件，然后选择“添加绑定属性”。
右键单击该下拉列表组件，然后选择“配置缺省选项”。
在标记为“选项定制器 - dropDown1”的对话框中，将每个缺省项的值替换为下图所示的值。单击每个表单元格以编辑值，并在编辑每个字段后按 Enter 键以接受更改。
单击“确定”以保存所有更改。
在“导航”窗口中，展开 Page 1 节点并选择“添加绑定属性”，如下图所示。

添加第三页

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

在“项目”窗口中，右键单击 "NavigationExample" >“Web 页”节点，然后选择“新建”>“Visual Web JSF 页”。在“新建 Visual Web JSF 页”向导中，单击“完成”。IDE 将创建 Page3.jsp 并显示它。
将一个静态文本组件从“组件面板”窗口拖放到页面上。将该组件的文本设置为 Page Three。

实现动态页面导航

在本部分，您将启用动态页面导航。通过动态页面导航，应用程序可以在运行时确定用户在第一页上单击 "Go" 按钮时将显示哪一页。

打开页面流编辑器。
单击 Page1.jsp 图标以显示其内容，然后从按钮的连接器端口拖动一条连线至 Page3.jsp 图标。
将此连线的名称由 case1 更改为 Page 3。
双击 Page1.jsp 图标在可视编辑器中打开该页面。
双击 "Go" 按钮组件，以便在 Java 编辑器中显示其 action 事件处理程序方法的源代码。

将方法中的 return 语句替换为下面以粗体显示的代码。

代码样例 2：Return 语句

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

部署应用程序

通过运行项目对页面之间的导航进行测试。

按 F6 键以部署应用程序。

注意：缺省情况下，将在启用“在保存时编译”功能的情况下创建项目，因此无需先编译代码即可在 IDE 中运行应用程序。有关“在保存时编译”功能的详细信息，请参见创建、导入和配置 Java 项目指南的“在保存时编译”部分。
在第一页上，从下拉列表中选择 "Page 2"，然后单击 "Go" 转至第二页。
单击浏览器的“后退”按钮可以从第二页返回至第一页。
现在，从下拉列表中选择 "Page 3"，然后单击 "Go" 转至第三页。

实现高级动态页面导航

在上一部分中，动态页面导航是以直接的方式进行处理的。用户只需在下拉列表中选择要导航到的页面，然后单击 "Go" 按钮即可。如果希望在下拉列表值发生更改后立即更改页面，请使用以下步骤修改在前面部分创建的项目。

单击 "Page1" 标签，然后单击编辑工具栏中的“设计”以切换至可视设计器。
右键单击 "Go" 按钮，然后选择“删除”。
双击下拉列表组件以便在 Java 编辑器中查看 Page1 类代码。

将下面以粗体显示的代码添加到 dropDown1_processValueChange() 处理程序方法中。前两行代码用于检索应用程序的对象引用。在应用程序对象中，您可以获得导航处理程序的实例。为此对象调用 handleNavigation() 方法，可以指定从下拉列表组件检索的值（该值指定要导航到的页面）。

代码样例 3：导航处理程序方法

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 类。您将在下一步中导入这些类。

在源代码编辑器中的任意位置单击鼠标右键，然后选择“修复导入”，以便将下列 import 语句自动添加到源文件的顶部位置附近：

代码样例 4：导航处理程序方法的 Import 语句

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

单击编辑工具栏中的“设计”，以便在可视设计器中查看 Page1。
右键单击下拉列表组件，然后选择“更改时自动提交”，以指示在选择后自动提交选定的项。
部署并运行该应用程序。
选择下拉列表中的 "Page 2" 项，以便从第一页导航至第二页。单击“后退”按钮返回至第一页。
选择下拉列表中的 "Page 3" 项，以便从第一页导航至第三页。

执行更多操作：使用大量页面

本教程介绍的方案适用于页数相对较少的情况，但很多实际的应用程序需要在数十个页面中进行导航。要建立此类导航，请执行以下步骤：

在页面导航编辑器中，单击编辑工具栏中的 "XML" 按钮。

在下面的 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>