使用页面片段

2007 年 12 月 [修订号：V6.0]

在本教程中，您将使用 NetBeans 6.0 来创建一个包括两个 JSF 1.2（Woodstock）页面片段组件的应用程序。一个片段维持应用程序的标志。第二个片段维持在应用程序中的页面间导航的链接。

预计持续时间：20 分钟

内容

• 关于页面片段
• 设计一个含页面片段的页面
• 创建页眉片段
• 创建导航片段
• 把片段添加到第二个页面
• 禁用对当前页面的链接
• 做更多：添加页脚片段
• 使用页面片段的提示

本教程中使用的示例公司标志

» sky.jpg

本教程可用以下技术和资源运作：

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 规范完全兼容的应用服务器，比如 GlassFish。

本教程被编写成适用于 GlassFish V2 应用服务器。如果您使用不同的服务器，请查阅发行说明和 FAQ 以了解已知问题和解决办法。要了解有关受支持的服务器和 Java EE 平台的详细信息，请参见发行说明。

关于页面片段

页面片段是页面的一个部分，比如页眉、页脚或导航条，它可在其它页面中重用。例如，您也许想在一个页面片段里放置诸如图像或搜索字段的常见元素，然后把这个片段作为页眉包含到应用程序中的所有页面中。您也许还想在另一个页面片段中包括您的公司名称和版权信息，再把这个片段用作应用程序的页脚。像主页面一样，页面片段是一个带有与其自身关联的页面 Bean 的 JSP 页面；但是，页面片段的文件扩展名是 jspf 而非 jsp。

设计一个含页面片段的页面

1. 创建一个叫做 FragmentExample 的 Web 应用程序项目。启用 Visual Web JavaServer Faces 框架。

   图 1 显示出您在后面的步骤中将要创建的页面：

   图 1：应用程序的主页

2. 从“组件面板”的“布局”区段，把一个“页面片段框”组件拖到页面的左上角。

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

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

   页面上将出现页面片段。另外，该页面片段将被添加到“项目”窗口以及在“导航”窗口的一个 <div> 块中。

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

   可视设计器中的点线显示出页面片段的大小。缺省大小是 400 像素宽，200 像素高。
5. 把第二个“页面片段框”组件拖到 CompanyLogo 页面片段下方的页面左侧。将这个页面片段命名为“Navigation”。
6. 从“组件面板”的“基本”区段，把一个“静态文本”组件拖到页面上，放在 Navigation 页面片段的右边。一定要把它放到页面上，而非页面片段上。把这个组件的文本更改为“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：导航片段

1. 通过在可视设计器中双击组件来打开 Navigation 片段。
2. 在“属性”窗口中，把“宽度”属性设置为“150px”，“高度”属性设置为“100px”。
3. 从“组件面板”的“基本”区段，把一个“超级链接”组件拖放到页面片段中。把该超级链接的文本设置为“Home”。
4. 在“属性”窗口中，
5. 把第二个“超级链接”组件拖到页面片段中。把该组件的文本设置为“Company News”。

6. 把该超级链接的“id”属性设置为“newLink”，“url”属性设置为“/faces/News.jsp”。

   You will create the News page in the next section. 您将在下一节中创建 News 页面。

把片段添加到第二个页面

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

   将在可视设计器中打开 News 页面。您将如下图所示来设计该页面。

   图 4：News 页面

2. 单击“Page1”选项卡。您将从该页面把页面片段和静态文本组件复制到 News 页面。
3. 从“Page1 - 导航”窗口，按住 Ctrl 键，选中两个 div 元素和静态文本组件。一定要选中 div 元素本身，而不只是它们的 jsp:directive.include 子元素。
4. 右键单击所选项，从弹出菜单中选择“复制”。
5. 单击“News”选项卡。
6. 在“导航”窗口中，展开“News”>“page1”>“html1”>“body1”节点。右键单击 form1 并选择“粘贴”。您从 Page1.jsp 复制的组件敬爱能够出现在可视设计器中。
7. 把静态文本组件的文本更改为“We have a new CEO.”。
8.  在“News”页面中的空白处单击。在“属性”窗口中，把“标题”属性更改为“Sky Company News”。

9. 单击“背景”属性对应的省略号按钮，用颜色选择器把颜色设置为浅黄。在运行时，您将能清楚地看到 Sky Company News 页面和 Sky Company Home page 页面之间的差别。

   公司标志和导航片段继承了 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 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 com.sun.webui.jsf.component.Hyperlink;

7. 单击“运行主项目”按钮以运行应用程序。

   请验证 Home 和 Company News 链接都正确工作。

做更多：添加页脚片段

本教程演示如何在一个简单的双页面应用程序中使用页面片段。真正的应用程序通常有更多页面。

试试看。把第三个页面添加到 FragmentExample 应用程序。一定要在 Navigation 页面片段中再添加一个超级链接组件，并设置该超级链接的“url”属性。

试试看。页面片段的另一个常见用途是用来包括公司的版权信息。向每个页面的底部添加一个页面片段，宽 720px，高 100px。把诸如“Copyright 1994-2007 Sky Company”的版权信息包括进去。

使用页面片段的提示

这里有一些在使用页面片段时要考虑的一些东西：

• 本教程使用了设置了其“url”属性的超级链接组件。采用这种做法是由于简单，因为它不需要您设置“immediate”属性或建立页面导航。另一种做法是创建包含设置了其“action”属性的按钮或超级链接组件的页面片段。这种情况下，您必须设置“immediate”属性，还要为每个使用了该片段的页面建立页面导航。

  如果您有大量的页面，并且对于每个页面，按钮或超级链接的导航结果都相同，您也许可选择性地编辑页面导航源文件，而不使用页面导航编辑器。要这样做，单击页面导航工具栏上的“XML”按钮。在源编辑器中，把位于 <from-view-id> 标记（例如 /Page1.jsp）之后指定的页面名称替换为一个通配值，比如 /*。
• 如本教程所示，最好使用像素（例如 100px）来设置页面片段的高度和宽度。百分比（例如 100%）在 Firefox Web 浏览器中工作良好，但在 Internet Explorer 6.0 中出错。

参见

• 使用虚拟表单
• 在 Web 应用程序中导航页面

请将反馈发送给我们