目录   -  创建第一页 -  在两个页面之间导航 -  向第二页添加组件 -  运行应用程序

创建第一页

1. 创建一个新的 Web 应用程序项目，并将其命名为 SimpleNavigation。
   
   将出现新项目，并且其初始页会显示在可视设计器中。下图显示了将在以下步骤中创建的页。
   
   

   图 1：第一页设计

    
   
2. 将 “静态文本”组件从组件面板的“基本”类别拖放到页面上。通过直接在组件的缺省文本上键入内容，将组件的 text 属性更改为 Page One。
   
   要稍后更改文本，请选择“静态文本”组件，再次单击它，然后键入新文本。也可以通过在“属性”窗口中更改“外观”> text 属性的值来修改文本。
   
   
3. 将一个“按钮”组件从组件面板拖放到页面上，并将其 text 属性更改为 Next。
   
   要稍后更改文本，请选择“按钮”组件，再次单击它，然后键入新文本。也可以在“属性”窗口的“外观”> text 属性中修改文本。在按 Enter 键之前，不会看到页面中更新的文本。

在两个页面之间导航

1. 在可视编辑器编辑区域的空白处单击鼠标右键，然后从弹出式菜单中选择“页面导航”。
   
   导航编辑器将显示 Page1.jsp 图标，它表示您在上一部分创建的页。也可以通过在“属性”窗口中双击“页面导航”节点来调用导航编辑器。
   
   
2. 单击 Page1.jsp 图标以查看其内容。
   
   图标将增至原始大小的两倍。可以看到 button1 图标。按钮组件同时具有 ID 和 text 属性。在上一部分更改了按钮的 text 属性后，在显示时该按钮上出现的文本也会随之改变。不要将组件显示的文本与 ID 属性的值相混淆。在本例中，按钮组件的 ID 是 button1。ID 属性是 Java 源文件中用于私有实例字段的标识符。
   
   
3. 单击编辑工具栏中的“源”以查看为页面导航生成的代码，下面的代码样例 1 显示了生成的代码。
   
   

   代码样例 1：JSP 源代码

   <?xml version="1.0"?> <!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd "> <faces-config> </faces-config>

    
   对于 http://java.sun.com/dtd/web-facesconfig_1_1.dtd 中的 DTD，此应用程序配置文件必须是有效的。此文件包括一个 faces-config 标记，该标记包含您将更多功能添加到 JSP 页时会自动添加的所有其他声明。
   
   
4. 单击编辑工具栏中的“导航”。
   
   
5. 在编辑区域中单击鼠标右键，然后选择“新建页面”。
   
   
6. 在“选择页面名称”对话框中单击“确定”接受缺省名称（即 Page2）。
   
   Page2.jsp 图标将出现在 Page1.jsp 图标的右侧。此外，Page2.jsp 节点将出现在“项目”窗口的 "SimpleNavigation" >“Web 页”节点下。
   
   
7. 单击 Page1.jsp 图标将其放大，以便您可以看到按钮。
   
   
8. 单击 button1，然后拖动一条直线到 Page2.jsp 图标。
   
   将出现一条由第一页指向第二页的连线。缺省情况下，新创建的连线名称为 case1。
   
   
9. 将连线的名称从 case1 更改为 nextAction。
   
   可以使用若干种方法更改连线的名称。在创建了连线时，文本 case1 是选定的，您可以通过在缺省名称上键入内容来替换此新名称。如果连线的名称不再是选定的，请选择连线，然后在“属性”窗口中的“常规”>“结果”下更改其名称。或者，双击连线的名称以选择并突出显示它，然后键入新名称。
   
   下图显示了导航编辑器，其中包括了两个页面之间的连线。
   
   

   图 2：简单页面导航

    
   
10. 单击编辑工具栏中的“源”，以查看在最后两步中生成的代码。
    
    

    代码样例 2：生成的代码

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd "> <faces-config> <navigation-rule> <from-view-id>/Page1.jsp</from-view-id> <navigation-case> <from-outcome>nextAction</from-outcome> <to-view-id>/Page2.jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config>

     
    在 faces-config 标记内添加的代码指定了此 Web 应用程序的单个导航规则。每个导航规则都指定一个初始页面以及一个或多个目标页面。

向第二页添加组件

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

   图 3：简单导航的第二页

    
   

运行应用程序

1. 通过单击主工具栏中的绿色箭头来部署应用程序。
   
   在部署 Web 应用程序后，可以在浏览器上看到 "Page One"，如下图所示。
   
   

   图 4：简单导航 Web 应用程序

    
   
2. 单击 "Next" 按钮，将从第一页导航到第二页。

• 使用动态页面导航
• 在两个页面之间共享数据