使用页面片段

2007 年 5 月 [修订号：V5.5.1-1]

在本教程中，您将使用 NetBeans Visual Web Pack 5.5 集成开发环境 (Integrated Development Environment, IDE) 创建一个包含两个页面片段的应用程序。一个片段用来保存应用程序的徽标。另一个片段用来保存在应用程序的两个页面之间导航的链接。

目录 -  关于页面片段 -  设计包含页面片段的页 -  创建页眉片段 -  创建导航片段 -  将片段添加到另一页 -  禁用当前页的链接 -  执行更多操作：添加页脚片段 -  使用页面片段的提示

在本教程中使用的公司徽标样例

- sky.jpg

本教程将使用以下技术和资源：

JavaServer Faces 组件/ Java EE 平台	1.2/Java EE 5* 1.1/J2EE 1.4
Travel 数据库	不是必需的
BluePrints AJAX 组件库	不是必需的

* 该教程发布时，只有 Sun Java System Application Server 支持 Java EE 5。

本教程是针对使用 Sun Java Application Server PE 9.0 Update Release 1 和 Tomcat 5.5.17 进行定制的。如果您使用的是其他服务器，请参考发行说明和常见问题解答以了解已知问题和解决方法。有关支持的服务器和 Java EE 平台的详细信息，请参见发行说明。

关于页面片段

页面片段是可以在其他页面中重用的页面部分，如页眉、页脚或导航栏。例如，您可以将一个公共元素（如图形或搜索字段）放置在页面片段中，然后将该片段作为页眉包含在应用程序的所有页面中。此外，还可以将公司名称和版权信息包含在一个页面片段中，然后将该片段用作应用程序的页脚。与主页类似，页面片段是一个包含自己的关联页面 Bean 的 JSP 页；但是，页面片段的文件扩展名是 jspf 而不是 jsp。

设计包含页面片段的页

1. 创建一个新的 Visual Web 应用程序项目，并将其命名为 FragmentExample。

   图 1 显示了将在以下步骤中创建的页面：

   图 1：应用程序的主页

2. 将一个页面片段框组件从组件面板的“布局”类别拖动到页面的左上角。

   将打开“选择页面片段”对话框。

3. 单击“创建新的页面片段”。在“名称”字段中键入 CompanyLogo，然后单击“确定”。

   该页面片段将出现在页面上。此外，该页面片段还会添加到“项目”窗口中和“概要”窗口的 <div> 块中。

4. 单击“关闭”以关闭“选择页面片段”对话框。

   可视设计器中的虚线显示了页面片段的大小。缺省大小是 400 像素（宽）x 200 像素（高）。
5. 将另一个页面片段框组件放置在页面的左侧，使其位于页面片段 CompanyLogo 的下方。将此页面片段命名为 Navigation。
6. 将一个静态文本组件从组件面板的“基本”类别拖动到页面上，并将其放在页面片段 Navigation 的右侧。请确保将该组件放在页面上而不是页面片段上。将此组件的 text 属性更改为 Welcome to Sky Company。
7. 在可视设计器中没有组件的位置单击鼠标左键。在“属性”窗口中，将“标题”属性更改为 Sky Company Home。

创建页眉片段

现在，定义 CompanyLogo 片段的内容，如图 2 所示。请注意对片段进行的任何更改都必须在片段本身中进行，而不是在页面中进行。

图 2：CompanyLogo 页面片段

1. 将公司徽标样例 JPEG 文件保存到文件系统中（如果您尚未这样操作）。

2. 在可视设计器中双击 CompanyLogo 片段组件以打开该组件。

   白色背景显示页面片段的大小。
3. 在“属性”窗口中，将“宽度”属性设置为 720px，将“高度”属性设置为 120px。
4. 将一个图像组件从组件面板的“基本”类别拖动到左上角的页面片段中。

5. 在“属性”窗口中，单击图像组件的 url 属性的省略号 (...) 按钮。将公司徽标添加到页面片段中，如下所示：

   1. 在对话框中单击“添加文件”。
   2. 导航至存储公司徽标 sky.jpg 的文件夹并选择该图像。
   3. 单击“添加文件”。IDE 会将该图像复制到项目的 resources 目录中，并显示该图像的相对 URL。
   4. 单击“确定”。
6. 如有必要，请单击 sky.jpg 并将其拖放到页面片段边框内。
7. 单击 "Page1" 标签以查看对 CompanyLogo 片段的更新。根据需要调整页面上的组件布局。

创建导航片段

接下来，定义导航片段的内容，如图 3 所示。

图 3：Navigation 片段

1. 在可视设计器中双击 Navigation 片段组件以打开该组件。
2. 在“属性”窗口中，将“宽度”属性设置为 150px，将“高度”属性设置为 100px。
3. 将一个超级链接组件从组件面板的“基本”类别拖放到该页面片段中。将超级链接组件的 text 属性设置为 Home。
4. 在“属性”窗口中，将超级链接组件的 id 属性设置为 homeLink，并将其 url 属性设置为 /faces/Page1.jsp。
5. 将另一个超级链接组件拖动到该页面片段中。将此组件的 text 属性设置为 Company News。

6. 将超级链接组件的 id 属性设置为 newsLink，并将其 url 属性设置为 /faces/News.jsp。

   在下一部分中，将创建 News 页。

将片段添加到另一页

1. 在“项目”窗口中，右键单击 "FragmentExample" >“Web 页”节点，然后选择“新建”>“页”。将新页命名为 News，然后单击“完成”。

   将在可视设计器中打开 News 页。请按图 4 所示设计该页。

   图 4：News 页

2. 单击 "Page1" 标签。将页面片段和静态文本组件从此页复制到 News 页。
3. 在“概要”窗口中，按住 Ctrl 键选择两个 div 元素和静态文本组件。请确保选择 div 元素本身，而不是仅选择其 jsp:directive.include 子元素。
4. 右键单击选定的内容，然后从弹出式菜单中选择“复制”。
5. 单击 "News" 标签。
6. 在“概要”窗口中，展开 "News" > "page1" > "html1" > "body1" 节点。右键单击 "form1"，然后选择“粘贴”。将在可视设计器中显示从 Page1.jsp 复制的组件。
7. 将静态文本组件的 text 属性更改为 We have a new Chief Executive Officer。
8. 单击 News 页中的空白处。在“属性”窗口中，将“标题”属性更改为 Sky Company News。

9. 单击“背景”属性的省略号 (...) 按钮，然后使用颜色选择器将颜色设置为浅黄色。

   CompanyLogo 片段和 Navigation 片段将继承 News 页的背景色。

禁用当前页的链接

1. 单击 "Page1" 标签，然后打开该页的 Java 源代码。

2. 将以下代码添加到 prerender 方法中：

   代码样例 1：用于禁用当前页的链接的代码

   public void prerender() { Navigation navigationFragmentBean = (Navigation)getBean("Navigation"); Hyperlink homeLink = navigationFragmentBean.getHomeLink(); homeLink.setDisabled(true); }

3. 在 Java 编辑器中单击鼠标右键，然后选择“修复导入”。IDE 将添加以下 import 语句：

   import com.sun.webui.jsf.component.Hyperlink;
4. 单击 "News" 标签，然后打开该页的 Java 源代码。

5. 将以下代码添加到 prerender 方法中。

   代码样例 2：用于禁用当前页的链接的代码

   public void prerender() { Navigation navigationFragmentBean = (Navigation)getBean("Navigation"); Hyperlink newsLink = navigationFragmentBean.getNewsLink(); newsLink.setDisabled(true); }

6. 在 Java 编辑器中单击鼠标右键，然后选择“修复导入”。IDE 将添加以下 import 语句：

   import com.sun.webui.jsf.component.Hyperlink;

7. 运行应用程序。

   验证 Home 和 Company News 链接是否能够正常使用。

执行更多操作：添加页脚片段

本教程介绍了如何在简单的两页应用程序中使用页面片段。实际的应用程序通常具有多页。

试试看。在 FragmentExample 应用程序中添加第三页。请确保将另一个超级链接组件添加到页面片段 Navigation 中并设置此组件的 url 属性。

试试看。页面片段的另一个常见用法是包含公司的版权信息。在每个页面的底部添加一个页面片段，并使其宽度和高度分别为 720px 和 100px。在该页面片段中包含诸如 Copyright 1994-2006 Sky Company 之类的版权信息。

使用页面片段的提示

下面是使用页面片段时的一些注意事项：

• 本教程中的示例使用的是超级链接组件，且对其 url 属性进行了设置。建议采用这种简单的方法，因为它不要求设置 immediate 属性或设置页面导航。另一种方法是创建一个包含按钮或超级链接组件的页面片段，并且对组件的 action 属性进行设置。在这种情况下，您必须设置 immediate 属性，并且还必须为使用该片段的每个页面设置页面导航。

  如果您具有大量页面，而且按钮或超级链接组件的导航结果对于每个页面都是相同的，则可以选择编辑页面导航源文件，而不使用页面导航编辑器。要执行此操作，请单击页面导航工具栏中的 "XML" 按钮。在源代码编辑器中，将 <from-view-id> 标记后的特定页面名称（例如 /Page1.jsp）替换为通配符值（如 /*）。
• 如本教程所示，最好使用像素（例如 100px）来设置页面片段的高度和宽度。百分比（例如 100%）可在 Firefox Web 浏览器中正常地起作用，但在 Internet Explorer 6.0 中则无效。

---

请将您的意见和建议发送给我们