Web应用程序中的导航页面

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

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

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 应用程序，而且在页面之间使用按钮进行导航。稍后，您将添加一个下拉列表组件，以使用户能在运行时选择目标页面。

首先，创建一张带有静态文本组件和按钮组件的页面。

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

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

图 1：页面 1 的设计

从“组件面板”的“基本组件”中，拖动一个静态文本组件，并将其放置在页面中。在组件的默认文本上直接按键，来将组件的 text 属性更改为 Page One。

从“组件面板”中拖拽一个按钮组件，放置在页面，并将其 text 属性更改为 Go。

重要注意事项：在 IE7 中有一个已知问题会影响 JSF 1.2 按钮组件的宽度。解决方法是将按钮组件放置在一个布局组件中（Grid Panel、Group Panel、或者是 Layout Panel）。缩放布局组件能自动缩放该按钮组件。

两张页面间的导航

接下来，在项目中添加另一张页面，并通过创建一个链接或者页面连接器来在两张页面间指定一个导航。

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

“页面流编辑器”会显示一个图标表示 Page1.jsp

，代表在前一节中创建的页面。注意该图标有 4 个特征：