FeaturesDocs & SupportCommunityBlogsPartners

使用页面片段

在本教程中，您将使用 NetBeans IDE 6.5 创建包括两个 JSF 1.2 (Woodstock) 页面片段组件的应用程序。一个片段用来保存应用程序的徽标。另一个片段用来保存在应用程序的两个页面之间导航的链接。

预计时间：30 分钟

目录

本页上的内容适用 NetBeans IDE 6.5

 

在本教程中使用的公司徽标样例
» sky.jpg

 

要学习本教程，您需要具备以下软件和资源。

软件或资源 要求的版本
NetBeans IDE 6.5 Java 版本
Java Development Kit (JDK) 版本 6 或版本 5
JavaServer Faces 组件/
Java EE 平台		 1.2（带有 Java EE 5*）或
1.1（带有 J2EE 1.4）
GlassFish 应用服务器 V2
Travel 数据库 无版本要求

* 要利用 NetBeans IDE 的 Java EE 5 功能，请使用完全符合 Java EE 5 规范的应用服务器，例如 GlassFish V2 UR2 应用服务器。如果使用的是其他服务器，请查阅发行说明和常见问题解答，了解已知问题和解决方法。有关支持的服务器和 Java EE 平台的详细信息，请参见发行说明。

关于页面片段

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

设计包含页面片段的页

在本教程中，首先创建应用程序的主页。然后，创建一个页眉片段和一个导航片段，并将这些片段包含在主页中。

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

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

    应用程序的主页

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

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

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

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

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

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

创建页眉片段

现在，定义 CompanyLogo 片段的内容，如图 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 片段的更新。根据需要调整页面上的组件布局。

创建导航片段

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

Navigation 片段

 

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

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

    在下一部分中，将创建 News 页。
  8. 右键单击超级链接组件，然后选择“添加绑定属性”。

将片段添加到另一页

在本部分中，您将创建另一个包含页眉片段和导航片段的页。此外，还将设置此页的背景色以说明页面片段如何继承页面的样式设置。

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

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

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

  9. 单击“背景”属性的省略号按钮 省略号按钮，然后使用颜色选择器将颜色设置为浅黄色。在运行时能够看到 Sky Company News 页和 Sky Company Home 页之间的明显区别。

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

禁用当前页的链接

在本部分中，您将添加代码以禁用 Page1 页上的 Home 链接和 News 页上的 Company 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. 单击“运行主项目”按钮 “运行项目”工具栏图标 以运行应用程序。

    注意：缺省情况下，将在启用“在保存时编译”功能的情况下创建项目，因此无需先编译代码即可在 IDE 中运行应用程序。有关“在保存时编译”功能的详细信息，请参见创建、导入和配置 Java 项目指南的“在保存时编译”部分。

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

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

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

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

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

使用页面片段的提示

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

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

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

 

另请参见

 

本页的最新修改时间：2008 年 10 月 22 日
Companion
Projects: 		                  Powered by: