HOME / Docs & Support / NetBeans 5.5

>> 更多 Visual Web Pack 文档

设置页面导航

撰稿人：Visual Web Pack 教程编写小组

2007 年 5 月 [修订号：V5.5.1-1]

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

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

本教程将使用以下技术和资源：

JavaServer Faces 组件/ Java EE 平台	1.2/Java EE 5* 1.1/J2EE 1.4
Travel 数据库	不是必需的
BluePrints AJAX 组件库	不是必需的

* 该教程发布时，只有 Sun Java System Application Server 支持 Java EE 5。

本教程是针对使用 Sun Java Application Server PE 9.0 Update Release 1 和 Tomcat 5.5.17 进行定制的。如果您使用的是其他服务器，请参考发行说明和常见问题解答以了解已知问题和解决方法。有关支持的服务器和 Java EE 平台的详细信息，请参见发行说明。

创建第一页

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

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

创建一个新的 Visual Web 应用程序项目，并将其命名为 NavigationExample。

将出现新项目，并且其初始页会显示在可视设计器中。下图显示了将在以下步骤中创建的页面：

图 1：第一页的设计
从组件面板的“基本”类别中，将一个静态文本组件拖放到页面上。通过直接在该组件的缺省文本上键入内容，将其 text 属性更改为 Page One。
将一个按钮组件从组件面板拖放到页面上，并将其 text 属性更改为 Go。

在两个页面之间导航

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

在可视编辑器的编辑区域空白处单击鼠标右键，然后从弹出式菜单中选择“页面导航”。
页面导航编辑器将显示 "Page1.jsp" 图标，它表示您在上一部分中创建的页面。您也可以通过在“项目”窗口中双击“页面导航”节点来打开页面导航编辑器。
在编辑区域中单击鼠标右键，然后选择“添加页面”。
在“选择页面名称”对话框中，单击“确定”以接受缺省名称 Page2。
将在导航编辑器中显示 "Page2.jsp" 图标（如图 2 所示），并在“项目”窗口的 "NavigationExample" >“Web 页”节点下面添加 "Page2.jsp" 节点。
单击 "Page1.jsp" 图标以将其放大，以便可以看到 "button1" 图标。请注意名称 "button1" 旁边的蓝色图标。这是该按钮的连接器端口。
单击连接器端口，并拖动一条直线至 "Page2.jsp" 图标。将出现一条由第一页指向第二页的连线。缺省情况下，新创建的连线名称为 case1。
双击该连线的名称，然后将其由 case1 更改为 Page 2。

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

图 2：页面导航编辑器

单击编辑工具栏中的 "XML" 以查看在最后两步中生成的代码。

代码样例 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 应用程序的单个导航规则。每个导航规则都指定一个初始页以及一个或多个目标页。

向第二页添加组件

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

单击编辑工具栏中的“导航”。
双击 "Page2.jsp" 图标。
将在可视设计器中打开此页面。
将一个静态文本组件放到页面上，并将其 text 属性更改为 Page Two，如下图所示。

图 3：第二页的布局
按 F6 键以部署应用程序。
在部署 Web 应用程序后，将在浏览器中打开第一页，如下图所示：

图 4：简单导航的 Web 应用程序
单击 "Go" 按钮，将从第一页导航至第二页。

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

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

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

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

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

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

图 6：“选项定制器”对话框
单击“确定”以保存所有更改。

添加第三页

您将创建第三个页面，从第一页可以导航至该页面。下图显示了将在以下步骤中创建的页面：

图 7：第三页的布局

在“项目”窗口中，右键单击 "NavigationExample" >“Web 页”节点，然后选择“新建”>“页”。在“新建页”向导中，单击“完成”。IDE 将创建并显示 Page3.jsp。
将一个静态文本组件从“组件面板”窗口拖放到页面上。将该组件的 text 属性设置为 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 键以部署应用程序。
在第一页上，从下拉列表中选择 "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 语句自动添加到源文件的顶部位置附近：
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>