利用 Dynamic Page Template 改善您的 Web 页面外观（1）

look_w

这篇文章通过三种基本的方法指导您利用 IBM® Rational® Application Developer V 7 中介绍过的 Dynamic Page Template 的特性：

• 利用 Dynamic Page Template 创建 JavaServer™ Faces (JSF) 页面
      学习 Dynamic Page Template 的基本原理，与此同时学习如何与 Dynamic Page Template 一起使用 JSF 或者 Web 站点导航元素。

• 用一致的外观创建并管理多个模版
     Dynamic Page Template 使得管理多个模版的外观变得十分简单。这个部分展示如何在您的项目中使多个模版保持一致的外观。

• 从 Design-Time Template 中移入到 Web 页面
      学习一种技巧，从而可以平稳地将您从设计阶段模版创建的Web 页面移入到 Dynamic Page Template 中去。Design-Time Template 是一个 IBM Rational Application Developer V6 也支持的页面模版。

选项1. 利用 Dynamic Page Template 创建 JavaServer Faces 页面这个方案将告诉您关于 Dynamic Page Template 特征的一个全面的理解，并且它说明了从 Dynamic Page Template 创建一个 JSF 页面的方法。首先，您创建一个项目，然后是创建模版。
步骤1. 创建一个新的动态 Web 项目

• 首先，创建一个为 JSF 和Dynamic Page Template所配置的 动态的 Web 项目
  • 从系统菜单中，选择 File > New > Project。
  • 选择 Web > Dynamic Web Project，然后点击     Next。
  • 填写 Project name 区域，然后从 Configurations中选择      Faces Project 。
  • 进入下一页，标题为Project Facets （请参见 ），并且通过检查那个选项对话框来激活 Dynamic Page Template support (Struts Tiles) 然后单击Finish。

图1. New Dynamic Web Project 向导的 Project Facets 页面您的动态 Web 的项目现在已经被创建和配置与 JSF 以及 Struts Tiles 一起工作。您可能会因为这个项目为 Struts 所配置而感到担心，其实根本就没有。您可以浏览在 Project Explorer 的项目中的文件夹并且在 Web App Libraries 目录下找到 struts.jar library 。但是您却不能在 WEB-INF 文件夹下找到 struts-config.xml 文件，也不能在 web.xml 文件中找到 ActionServlet 。因此，您可以确信这个项目只是为了 Struts Tiles 而配置。这个struts.jar文件被用于 Struts Tiles 功能性。
步骤2. 创建一个 Dynamic Page Template接下来，临时创建一个 Dynamic Page Template ：

• 在 Project Explorer 中右键点击 WebContent 文件夹，并从菜单中选择 New > Web Page Template 。
• 在 File Name 区域填写,并且保证选择这些选项：
  • Type 区域：Dynamic Page Template
  • Template 区域：Basic Template > JSP
• 然后单击 Finish。您的新模版文件在     Page Designer 编辑器中被打开。

注意：
如果您为这个练习在项目中创建了一个模版，那么您要么选择一个样本模版，要么选择您自己的模版。如果您使用您自己的模版，它变成一个被选模版的实例。当您进行下面的步骤时要牢记这一点。
设计一个模版页面与创建一个 Web 页面非常相似。您可以通过从 Palette 视图中拖拽一些项目来编辑一个页面，从 Page Data 视图中插入数据，并且从 Properties 视图中配置标签。有一件必须引起您注意的事情是，从  Palette 视图的 Page Template 绘图工具插入一个 Content Area，这将会为您提供稍后会被 Web 页面填充当页面区域。
这里的页面规划示例都是来自于拥有 Rational Application Developer的 Free Layout Table 。这些内容来自 Project Interchange .zip 压缩文件中的 template1.jsp 文件，您可以在这篇文章的末尾 DynamicPageTemplate.zip 文件。这个样例模版用一个竖线进行页面导航。然而，由于 Rational Application Developer V6 和 V7 中含有 Design-Time Template，您可以选择并在页面模版中插入Web网站导航程序。它也能为每个 Web 页面生成页面导航的连接。
步骤3. 从这个模版中创建一个 JSF页面既然在您的项目中已经有了一个模版，您就可以开始利用这个模版来创建 Web 页面了。
从这个模版中创建一个 Web 页面：

• 右键点击 Project Explorer中的 WebContent 文件夹，并从这个菜单中选择 New > Web Page。
• 在 Template区域的 My Template 目录下，选择您刚才创建的模版。
• 填充 File Name 字段，然后点击 Finish。
• Page Designer 打开这个新的 Web 页面，您将看到一个提示消息。点击 Yes 作为这个提示的回应从而打开 Dynamic Page Template 的 Configure Content Areas 对话框。

这个 Dynamic Page Template 需要四种类型的文件：

• 页面模版 JSP 文件： 这个文件包含 Web 页面通常含有的HTML 或者 JavaServer Pages™ (JSP™) 内容。
• JSP 实例文件：这是一个终端用户通过他们的 Web 浏览器来进行访问的 Web 页面。然而，他却仅含有模版的参考，并映射指令来填充内容区域，而不是 HTML 内容，也不是 JSP 内容。
• 内容区域 JSP 片断文件： 这个文件填充了 Web 页面的内容区域。特殊页面 HTML 或者 JSP 内容都在这里，作为 JSP 实例文件的参考。
• Struts Tiles 定义 XML 文件： 这个文件含有涉及 JSP 模版文件的并列定义。Dynamic Page Template 使用这个文件是因为它聚集 JSP 文件的能力。 JSP 实例文件引用这个定义而不是 JSP 模版文件。

步骤4. 配置这个模版的内容区域在这个部分的步骤2中，您创建了一个页面模版文件，这个向导将它注册到 XML 定义文件中。JSP 实例文件在步骤3中被创建。好，现在就是创建内容区域 JSP 片断文件的时候了。Dynamic Page Template的 Configure Content Areas 对话框 （）使 JSP 实例文件的创建和映射指令中的填充变得十分容易。
图2. 配置 Dynamic Page Template 的 Content Area 对话框编辑 Content Area 文件Rational Application Developer V7的一个好处在于，您可以按照您的意愿为这个片段文件填充内容。以前，您通常需要对您的片段文件进行处理，通过隐藏含有 <f:verbatim> 标签的 HTML 内容使 JSF 和 Struts 能够同时运行。但是以后您就不用再这样处理了，因为 Rational Application Developer V7 会自动将这个 <hx:viewFragment> 标签添加到这个片段文件中。这样可以保持文件的运行，如您在 Design 系统中看到的一样。
因此，当在 Source 系统中进行编辑时不用对它进行修改。

现在，开始创建  Content Area JSP 碎片文件：

• 从 Content Area Name 表格中选择 bodyarea。
• 确保 New or existing fragment file 已经被选择，然后填充 Name 和 Folder 区域。
• 点击 OK。

提示：
当创建这个片段文件之后，它将填充主体区域的内容。然后您可以在 Page Designer 中编辑这个片段，如您编辑其它 JSF 页面一样。（请看其它选项）
重复这部分中的步骤3和步骤4，直到您创建几个 Web 页面为止。无论何时您想更改这个页面的版面或者外观，只需编辑这个 JSP 模版文件就可以。更改将会影响您所有的 Web 页面。
如果您想在进入下一环节之前，在应用软件服务器上对您的页面进行测试，可以按照以下步骤进行：

• 右键点击一个 JSP 实例文件，选择 Run As > Run on server。
• 您将看到所有 JSP 文件的片段都聚集在一个 Web 页面，如  所示。

图3. 显示在服务器上的 Web 页面