Web应用程序中的导航页面

本教程将介绍在 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 个特征：

Web应用程序中的导航页面(2)

徽章标明该图标表示哪一类页面。绿色箭头表明该页面是项目的主页面。

图标上标识的文件名用以区别产品中其他页面。

展开图标上的加号可以显示页面上的组件。

连接器端口用于绘制页面间的导航线。

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

右键单击空白处，选择“新建文件”。

在“新建文件”对话框中，在“类别”面板选中“Java Server Faces”，在“文件类型”面板选中“可视化 Web JSF 页面”，然后点击“下一步”。

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

Page2.jsp 会在“可视化设计器”中打开。点击 Faces-config.xml 选项卡再次打开“页面流编辑器”。图 2 展示了包含所有页面的“页面流编辑器”。

点击 Page1.jsp 图标上的加号来将其放大，这样就能看到 button1 图标了。

点击 button1 图标，并拖拽一条线至 Pag

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!