使用页面片段
由 NetBeans 教程团队贡献
|
在本教程中，您将使用 NetBeans 6.0 来创建一个包括两个 JSF 1.2（Woodstock）页面片段组件的应用程序。一个片段维持应用程序的标志。第二个片段维持在应用程序中的页面间导航的链接。
|
预计持续时间：20 分钟
内容
本教程可用以下技术和资源运作：
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。
设计一个含页面片段的页面
您将通过创建应用程序的主页来开始学习本教程。然后您将创建一个页眉片段和一个导航片段，并把这些片段包括到主页中。
-
创建一个叫做 FragmentExample 的 Web 应用程序项目。启用 Visual Web JavaServer Faces 框架。
图 1 显示出您在后面的步骤中将要创建的页面：
 图 1：应用程序的主页 |
-
从“组件面板”的“布局”区段，把一个“页面片段框”组件拖到页面的左上角。
将打开“选择页面片段”对话框。
-
单击“创建新的页面片段”。在“名称”字段中键入“CompanyLogo”，单击“确定”。
页面上将出现页面片段。另外，该页面片段将被添加到“项目”窗口以及在“导航”窗口的一个 <div> 块中。
-
单击“关闭”以关闭“选择页面片段”对话框。
可视设计器中的点线显示出页面片段的大小。缺省大小是 400 像素宽，200 像素高。
- 把第二个“页面片段框”组件拖到 CompanyLogo 页面片段下方的页面左侧。将这个页面片段命名为“
Navigation”。
- 从“组件面板”的“基本”区段，把一个“静态文本”组件拖到页面上，放在 Navigation 页面片段的右边。一定要把它放到页面上，而非页面片段上。把这个组件的文本更改为“
Welcome to Sky Company”。
- 单击可视设计器上没有组件的地方。在“属性”窗口中，把“
标题”属性更改为“Sky Company Home”。
创建页眉片段
现在您将定义 CompanyLogo 片段的内容，如图 2 所示。任何对片段的更改必须在片段本身中进行，而不是在页面中。
 图 2：CompanyLogo 页眉片段 |
- 如果还没有的话，请将示例公司商标 JPEG 文件保存到您的文件系统中。
-
通过在可视设计器中双击组件来打开 CompanyLogo 片段。
白色背景显示出该页面片段的大小。
- 在“属性”窗口中，把“
宽度”属性设置为“720px”，“高度”属性设置为“120px”。
- 从“组件面板”的“基本”区段，把一个“图像”组件拖到页面片段的左上角。
-
在“属性”窗口中，单击该图像的“url”属性对应的省略号按钮
。如下把公司标志添加到页面片段中：
- 在对话框中，单击“添加文件”。
- 导航到您保存公司标志
sky.jpg 的文件夹，并选中该图像。
- 单击“添加文件”。IDE 把该图像复制到项目的 resources 目录，并显示该图像的相对 URL。
- 单击“确定”。
- 如有必要，单击并拖动
sky.jpg，把它定位到页面片段的边框内。
- 单击“Page1”选项卡以查看对 CompanyLogo 页面片段的更新。如有必要，调整组件在页面上的布局。
创建导航片段
下面您将定义如图 3 所示的导航片段的内容。
 图 3：导航片段 |
- 通过在可视设计器中双击组件来打开 Navigation 片段。
- 在“属性”窗口中，把“
宽度”属性设置为“150px”，“高度”属性设置为“100px”。
- 从“组件面板”的“基本”区段，把一个“超级链接”组件拖放到页面片段中。把该超级链接的文本设置为“
Home”。
- 在“属性”窗口中，
- 把第二个“超级链接”组件拖到页面片段中。把该组件的文本设置为“
Company News”。
-
把该超级链接的“id”属性设置为“newLink”，“url”属性设置为“/faces/News.jsp”。
You will create the News page in the next section. 您将在下一节中创建 News 页面。
把片段添加到第二个页面
在本节中，您将创建另一个包括页眉和导航片段的页面。您将为该页面设置背景色，以演示页面的样式设置是如何被页面片段继承的。
-
在“项目”窗口中，右键单击“FragmentExample”>“Web 页”节点，选择“新建”>“Visual Web JSF 页”。把新页面命名为“News”，单击“完成”。
将在可视设计器中打开 News 页面。您将如下图所示来设计该页面。
 图 4：News 页面 |
- 单击“Page1”选项卡。您将从该页面把页面片段和静态文本组件复制到 News 页面。
- 从“Page1 - 导航”窗口，按住 Ctrl 键，选中两个
div 元素和静态文本组件。一定要选中 div 元素本身，而不只是它们的 jsp:directive.include 子元素。
- 右键单击所选项，从弹出菜单中选择“复制”。
- 单击“News”选项卡。
- 在“导航”窗口中，展开“News”>“page1”>“html1”>“body1”节点。右键单击
form1 并选择“粘贴”。您从 Page1.jsp 复制的组件敬爱能够出现在可视设计器中。
- 把静态文本组件的文本更改为“
We have a new CEO.”。
- 在“News”页面中的空白处单击。在“属性”窗口中，把“
标题”属性更改为“Sky Company News”。
-
单击“背景”属性对应的省略号按钮，用颜色选择器把颜色设置为浅黄。在运行时，您将能清楚地看到 Sky Company News 页面和 Sky Company Home page 页面之间的差别。
公司标志和导航片段继承了 News 页面的背景色。
禁用对当前页面的链接
在本节中，您将添加代码以禁用 Page1 页面上的 Home 链接和 News 页面上的 Company News 链接。
- 单击“Page1”选项卡，打开该页面对应的 Java 源代码。
-
把下面的代码添加到 prerender 方法中：
| 代码示例 1：禁用对当前页面的链接的代码 |
public void prerender() {
Navigation navigationFragmentBean = (Navigation) getBean("Navigation");
Hyperlink homeLink = navigationFragmentBean.getHomeLink();
homeLink.setDisabled(true);
}
|
-
在 Java 编辑器中右键单击，选择“修复导入”。IDE 将添加下面的导入语句：
import com.sun.webui.jsf.component.Hyperlink;
- 单击“News”选项卡，打开该页面对应的 Java 源代码。
-
把下面的代码添加到 prerender 方法中：
| 代码示例 2：禁用对当前页面的链接的代码 |
public void prerender() {
Navigation navigationFragmentBean = (Navigation) getBean("Navigation");
Hyperlink newsLink = navigationFragmentBean.getNewsLink();
newsLink.setDisabled(true);
}
|
-
在 Java 编辑器中右键单击，选择“修复导入”。IDE 将添加下面的导入语句：
import com.sun.webui.jsf.component.Hyperlink;
-
单击“运行主项目”按钮
以运行应用程序。
请验证 Home 和 Company News 链接都正确工作。
做更多：添加页脚片段
本教程演示如何在一个简单的双页面应用程序中使用页面片段。真正的应用程序通常有更多页面。
试试看。把第三个页面添加到 FragmentExample 应用程序。一定要在 Navigation 页面片段中再添加一个超级链接组件，并设置该超级链接的“url”属性。
试试看。页面片段的另一个常见用途是用来包括公司的版权信息。向每个页面的底部添加一个页面片段，宽 720px，高 100px。把诸如“Copyright 1994-2007 Sky Company”的版权信息包括进去。
使用页面片段的提示
这里有一些在使用页面片段时要考虑的一些东西：
参见
