本教程说明了如何在中设置页面导航。首先，您将在IDE中创建一个Web应用程序，该应用程序在两个页面之间使用简单的导航。使用第一页上的按钮可以转至第二页。然后，对该应用程序进行修改，以使其在运行时基于Drop Down List组件的返回值来确定显示哪一页。您还将了解到另一种更高级的动态页面导航方法，通过该方法，可以在从下拉列表中进行选择后立即进行页面导航。
预计时间：20分钟
目录
l 创建第一页
l 向第二页添加组件
l 添加第三页
l 实现动态页面导航
l 部署应用程序
本教程将使用以下技术和资源：
| JavaServer Faces组件/ |
| |
| Travel数据库 |
| |
| BluePrints AJAX组件库 |
| |
* 为了使用NetBeans IDE 6.0的Java EE 5功能，使用完全符合Java EE 5标准的应用服务器，比如Sun Java Application Server 9/GlassFish。
本教程针对。如果您使用的是其他服务器，请参考发行说明和常见问题解答以了解已知问题和解决方法。有关支持的服务器和 Java EE 平台的详细信息，请参见发行说明。
创建第一页
在本教程的第一部分中，您将创建一个包含两个页面的Web应用程序，并使用按钮在两个页面之间进行导航。随后，将添加一个Drop Down List组件，以使用户能够在运行时选择目标页。
首先，创建一个包含Static Text组件和Button组件的页面。
1.
创建一个新的Web应用程序项目，并将其命名为NavigationExample。使用GlassFish V2 Application Server和Visual Web JavaServer Faces框架。
出现新项目，并且其初始页会显示在Visual Designer中。
2.
从Palette的类别中，将一个Static Text组件拖放到页面上。通过直接在该组件的默认文本上键入内容，将其text属性更改为Page One。
3.
将一个Button组件从Palette拖放到页面上，并将其text属性更改为Go。
¡ 请注意：在IE7中有一个已知问题会影响到JSF1.2 Button组件的宽度。解决方法是将组件按钮放到一个布局组件中（Grid Panel、Group Panel或Layout Panel）。
在两个页面之间导航
接下来，在应用程序中添加另一个页面，然后通过创建链接或页面连线指定第一页和第二页之间的导航。
1. 在可视编辑器的编辑区域空白处右键单击，然后从弹出菜单中选择“页面导航”。
Page Flow Editor将显示“Page1.jsp”图标
，它表示您在上一部分中创建的页面。注意， 该图标具有4个特性：
a. 其标记指示图标显示的页面类型。绿色箭头只是页面时项目的主页面。
b. 图标表示的文件名称用于区分产品中的页面。
c. “+”符号用于展开图标，以显示页面上的组件。
d. 连线端点用于绘制页面之间的导航线。
2. 按如下方法创建一个新JSP页面：
a. 在编辑区域中右键单击，然后选择。
b. 在New File对话框中，在Categories下面选择Java Server Faces，在File Types下面选择Visual Web JSF Page，然后单击Next。
c. 接受默认名称 Page2，然后单击Finish。
将在中显示Page2.jsp图标，并在窗口的NavigationExample >节点下面添加Page2.jsp节点。
3. 如果创建Page2.jsp之后未在Page Flow Editor中显示，请选择
4. 单击Page1.jsp图标上的“+”号以将其放大，以便可以看到button1图标。
5.
单击出现一条由第一页指向第二页的连线。默认情况下，新创建的连线名称为case1。
6.
双击该连线的名称，然后将其由case1更改为Page2。
7. 单击编辑工具栏中的XML以查看在最后两步中生成的代码。粗体显示的导航规则添加到托管bean代码下面，以省略号（）表示。
| 代码样例 1：生成的代码 |
<?xml version="1.0" encoding="UTF-8"?>
<faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee" 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图标。
将在Visual Designer中打开此页面。
3.
将一个Static Text组件放到页面上，并将其text属性更改为Page Two
4. 按F6键以部署应用程序。
5. 在部署Web应用程序后，将在浏览器中打开第一页
6. 单击Go按钮，将从第一页导航至第二页。
在这一部分中，您创建了两个页面，并建立了从一个页面到另一个页面的简单导航。在下面的部分中，您将基于从Drop Down List组件中选择的内容来建立导航。
添加用于实现动态导航的下拉列表
现在，您将了解有关动态页面导航的信息。您将在应用程序的第一页中添加一个Drop Down List组件。用户可以在运行时通过来选择目标页。随后，您将在应用程序中添加第三个页面，以使包含两个目标选项。
1.
在Visual Designer中打开Page1.jsp。
2. 将一个Drop Down List组件放在Static Text组件的下面。
3. 右键单击该Drop Down List组件，然后选择。
4. 在标记为的对话框中，将每个默认项的值替换为下图所示的值。单击每个表单元格以编辑值，并在编辑每个字段后按Enter键以接受更改。
5. 单击OK以保存所有更改。
添加第三页
您将创建第三个页面，从第一页可以导航至该页面。
1.
在Projects窗口中，右键单击NavigationExample > Web Pages节点，然后选择New > Visual Web JSF Page。在New Visual Web JSF Page向导中，单击Finish。IDE将创建并显示Page3.jsp。
2.
将一个Static Text组件从窗口拖放到页面上。将该组件的text属性设置为Page Three。
实现动态页面导航
在本部分，您将启用动态页面导航。通过动态页面导航，应用程序可以在运行时确定用户在第一页上单击 "Go" 按钮时将显示哪一页。
1. 打开Page Flow Editor。
2. 单击Page1.jsp图标以显示其内容，然后从按钮的连接器端口拖动一条连线至Page3.jsp图标。
3.
将该连线的名称由case1更改为Page 3。
4.
双击Page1.jsp图标，然后单击编辑工具栏中的Design以显示第一页的布局。
5. 双击Go按钮组件，以便在Java编辑器中显示其action事件处理程序方法的源代码。
6.
将方法中的return语句替换为下面以粗体显示的代码：
| 代码样例2：Return语句 |
public String button1_action() {
return (String) dropDown1.getValue();
}
|
部署应用程序
您将对页面之间的导航进行测试。
1. 按F6键以部署应用程序。
2. 在第一页上，从下拉列表中选择Page 2，然后单击Go转至第二页。
3. 单击浏览器的按钮可以从第二页返回至第一页。
4. 现在，从下拉列表中选择Page 3，然后单击Go转至第三页。
实现高级动态页面导航
在上一部分中，动态页面导航是以直接的方式进行处理的。用户只需在下拉列表中选择要导航到的页面，然后单击Go按钮即可。如果希望在下拉列表值发生更改后立即更改页面，请使用以下步骤修改在前面部分创建的项目。
1. 单击Page1标签，然后单击编辑工具栏中的Design以切换至Visual Designer。
2. 右键单击Go按钮，然后选择Delete。
3.
双击Drop Down List组件以在Java编辑器中查看Page1 类代码。
4.
将下面以粗体显示的代码添加到dropDown1_processValueChange()处理程序方法中。前两行代码用于检索应用程序的对象引用。在应用程序对象中，您可以获得的实例。为此对象调用handleNavigation()方法，可以指定从Drop Down List组件检索的值（该值指定要导航到的页面）。
| 代码样例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类。您将在下一步中导入这些类。
5. 在中的任意位置右键单击，然后选择，以便将下列import语句自动添加到源文件的顶部位置附近：
代码样例4：Navigation Handler方法的Import语句 |
import javax.faces.application.Application;
import javax.faces.application.NavigationHandler;
import javax.faces.context.FacesContext;
|
6. 单击编辑工具栏中的以便在Visual Designer中查看Page1。
7. 右键单击Drop Down List组件，然后选择，以便指示在选择后自动提交选定的项。
8. 部署并运行该应用程序。
9. 选择下拉列表中的Page 2项，以便从第一页导航至第二页。单击Back按钮返回至第一页。
10. 选择下拉列表中的Page 3项，以便从第一页导航至第三页。
执行更多操作：使用大量页面
本教程介绍的方案适用于页数相对较少的情况，但很多实际的应用程序需要在数十个页面中进行导航。要建立此类导航，请尝试下列步骤：
1. 在中，单击编辑工具栏中的XML按钮。
2. 在下面的XML中添加类似于第一个条目的导航规则。将<from-view-id>设置为/*，将<from-outcome>设置为某个标识字符串，然后将<to-view-id>设置为目标页面。
| 代码样例5：包含大量页面的应用程序的页面导航XML |
<?xml version="1.0" encoding="UTF-8"?> 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"> |
当返回至时，该编辑器将显示错误。不过，您可以忽略这些错误。
3. 对于要发送到页面的操作组件中的所有操作处理方法，您需要将这些方法返回from-outcome（本例中为 "login"），如下所示：
public String button1_action() {
return "login";
}
小结
用于实现页面导航的典型工作流如下所示：
1. 创建页面。
2. 将支持导航的组件（如按钮和下拉列表）放到页面上。
3. 使用，在组件和页面之间绘制连线。
4.
使用dropDown1_processValueChange()处理程序方法来实现更高级的导航。
另请参见：
l NetBeans Visual Web Pack 入门指南
l 使用页面片段
扫一扫
940
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
