| 在本教程中，您将使用 Sun Java Studio Creator 集成开发环境 (Integrated Development Environment, IDE) 创建一个使用动态页面导航的应用程序。该应用程序在运行时基于下拉列表组件返回的值来确定显示哪一页。通过下拉列表，用户可以选择目标页，应用程序将导航到两个可用目标页之一。您还将了解到另一种更高级的动态页面导航方法，通过该方法，在从下拉列表中进行选择后可以立即发生页面导航。 |
|
目录
|
![[spacer]](/im/a.gif) |
 |
创建第一页
首先，创建一个新项目及其第一页。
- 创建一个新的 Web 应用程序项目，并将其命名为
DynamicNavigation。
将会出现新项目，并且其初始页 (Page1) 会显示在可视设计器中。下图显示了将在以下步骤中创建的页。
图 1：第一页的布局 |
- 从组件面板的“基本”类别中，将一个“静态文本”组件拖放到页面上。将该组件的 text 属性值设置为
Home。
- 将“下拉列表”组件放在“静态文本”组件的下面。
- 在“概要”窗口中，选择 dropDown1DefaultOptions 非可视组件，如下图所示。
图 2：dropDown1DefaultOptions 节点 |
- 在 dropDown1DefaultOptions 的“属性”窗口中，单击 options 属性中的省略号 (...) 按钮。
- 在 "dropDown1DefaultOptions" 对话框中，将每个缺省项的值替换为下图所示的值。单击每个表单元格以编辑值。在编辑每个字段后按 Enter 键以接受更改。
图 3："dropDown1DefaultOptions" 对话框 |
- 单击“确定”以接受更改。
- 在“下拉列表”组件的右侧放置一个“按钮”组件。将按钮的 text 属性设置为
Go。
实现页面导航
通过在页面之间创建链接或页面连线来添加页面导航。通过动态页面导航，应用程序可以在运行时确定用户在第一页上单击 "Go" 按钮时将显示哪一页。
- 在可视设计器的编辑区域中单击鼠标右键，然后选择“页面导航”。
导航编辑器将显示 Page1.jsp 图标，它表示您在上一部分创建的页。
- 在导航编辑器的编辑区域中单击鼠标右键，然后选择“新建页面”。
- 在“选择页面名称”对话框中单击“确定”以接受缺省名称（即 Page2）。
Page2.jsp 图标出现在 Page1.jsp 图标的右侧。同时 Page2.jsp 节点出现在“项目”窗口的 "DynamicNavigation" >“Web 页”节点下面。
- 单击 Page1.jsp 图标将其放大，然后从 button1 图标拖动一条连线到 Page2.jsp 图标。
下图显示了一条由初始页 Page1.jsp 指向目标页 Page2.jsp 的连线。
图 4：连接页 |
- 将连线的名称从
case1 更改为 Emerald City。按 Enter 键。
- 单击 Page2.jsp 图标，然后拖动一条连线到 Page1.jsp 图标。
将出现一条由第二页指向第一页的连线。在本例中，连线表示第二页中的按钮操作会让用户返回到第一页中。
- 将连线的名称从
case1 更改为 Home。按 Enter 键。
设计第二页
使用可视设计器，将组件添加到由第一页导航到的第二页中。
- 在导航编辑器中，双击 Page2.jsp 图标以便在可视设计器中显示第二页。
下图显示了将在以下步骤中创建的页。
图 5：第二页的布局 |
- 将一个“静态文本”组件从组件面板拖放到页面上。将组件的 text 属性设置为
Emerald City。
- 将一个“按钮”组件放置在页面上，使其位于“静态文本”组件的下方。将“按钮”组件的 text 属性设置为
Home。
- 右键单击“项目”窗口中的“会话 Bean”节点，然后选择“添加”>“属性”。
- 在“新建属性模式”对话框的“名称”文本字段中，输入
from，然后单击“确定”。
- 在可视设计器中，双击 "Home" 按钮以查看 Page2.jsp 的
button1_action() 处理程序方法。
- 将缺省的 return 语句替换为下面以粗体显示的代码。
| 代码样例 1：按钮的操作处理程序方法 |
public String button1_action() {
return getSessionBean1().getFrom();
} |
- 单击导航编辑器顶部的 "Page1" 标签，以便在可视设计器中查看 Page1。
双击 "Go" 按钮组件，以便在 Java 编辑器中显示其 action 事件处理程序方法的源代码。
- 将方法中的
return 语句替换为下面以粗体显示的代码：
| 代码样例 2：Return 语句 |
public String button1_action() {
getSessionBean1().setFrom("Home");
return (String) dropDown1.getValue();
} |
添加第三页
使用可视设计器，创建第一页可以导航到的第三页。
- 单击“页面导航”标签以查看导航图。
- 在导航编辑器的编辑区域中单击鼠标右键，然后选择“新建页面”。
- 在“选择页面名称”对话框中单击“确定”以接受缺省名称（即 Page3）。
- 单击 Page1.jsp 图标，然后拖动一条连线到 Page3.jsp 图标。
- 将连线的名称从
case1 更改为 Diamond City。按 Enter 键。
- 单击 Page3.jsp 图标，然后拖动一条连线到 Page1.jsp 图标。
- 将连线的名称从
case1 更改为 Home。按 Enter 键。
- 双击 Page3.jsp 图标以便在可视设计器中显示第三页。
下图显示了将在以下步骤中创建的页。
图 6：第三页的布局 |
- 将一个“静态文本”组件从“组件面板”窗口拖放到页面上。将组件的 text 属性设置为
Diamond City。
- 将一个“按钮”组件放置在页面上，使其位于“静态文本”组件的下方。将“按钮”组件的 text 属性设置为
Home。
- 双击 "Home" 按钮以查看
button1_action() 处理程序方法。
- 将缺省的 return 语句替换为下面以粗体显示的代码：
| 代码样例 3：按钮的操作处理程序方法 |
public String button1_action() {
return getSessionBean1().getFrom();
}
|
部署应用程序
最后，对页面之间的导航进行测试。
- 通过单击主工具栏中的绿色箭头来部署应用程序。
- 在第一页上，从下拉列表中选择 "Emerald City"，然后单击 "Go" 转至第二页。
- 单击 "Home" 按钮，从 Emerald City 页返回到第一页。
- 现在，从下拉列表中选择 "Diamond City"，然后单击 "Go" 转至第三页。
- 单击 "Home" 按钮，从 Diamond City 页返回到 Home 页。
实现高级动态页面导航
在上一部分中，动态页面导航是以直接的方式进行处理的。用户在下拉列表中选择要导航到的页面，然后单击 "Go" 按钮。如果希望在下拉列表值发生更改后立即更改页面，请使用以下步骤修改在前面部分创建的项目。
- 单击 "Page1" 标签，然后单击编辑工具栏中的“设计”切换到可视设计器中。
- 右键单击 "Go" 按钮，然后选择“删除”。
- 双击“下拉列表”组件以便在 Java 编辑器中查看
Page1 类代码。
- 将下列以粗体显示的代码添加到
dropDown1_processValueChange() 处理程序方法中：
| 代码样例 4：导航处理程序方法 |
public void dropDown1_processValueChange(ValueChangeEvent event) {
Application application = getApplication();
NavigationHandler navigator = application.getNavigationHandler();
getSessionBean1().setFrom("Home");
FacesContext facesContext = getFacesContext();
navigator.handleNavigation(facesContext, null,(String) dropDown1.getValue());
}
|
请注意，出现红色曲线表示找不到 Application、NavigationHandler 和 FacesContext 类。您将在下一步导入这些类。
上述前两行代码用于检索应用程序的对象引用。在应用程序对象中，您可以获得导航处理程序的实例。为此对象调用 handleNavigation() 方法，来指定从下拉列表组件检索的值（该值指定要导航到的页）。
- 在源代码编辑器中的任意位置单击鼠标右键，然后选择“修复导入”，会将以下 import 语句自动添加到源文件顶部位置的附近：
| 代码样例 5：导航处理程序方法的 Import 语句 |
import javax.faces.application.Application;
import javax.faces.application.NavigationHandler;
import javax.faces.context.FacesContext;
|
- 单击编辑工具栏中的“设计”以便在可视设计器中查看 Page1。
- 右键单击“下拉列表”组件，然后选择“更改时自动提交”，表示在选择后自动提交选定的项。
- 运行并部署应用程序。
- 选择下拉列表中的 "Emerald City" 项，以便从第一页导航到第二页。单击 "Home" 返回到第一页。
- 选择下拉列表中的 "Diamond City" 项，以便从第一页导航到第三页。单击 "Home" 返回到第一页。
另请参见：
更多的开发者资源：
此页的最新修改时间：2006 年 4 月 5 日
|
