XML 和 WebSphere Studio Application Developer - 第 7 部分: 使用 XSL Editor 和 XSL Debugger 开发 XSL 样式表

文档选项 未显示需要 JavaScript 的文档选项 样例代码

级别： 初级

Christina Lau (clau@ca.ibm.com), 高级技术职员, IBM 多伦多实验室

2002 年 12 月 01 日

本文是我们广受欢迎的讲述 Application Developer 附带的各种 XML 工具的系列的第 7 部分。在第 7 部分中，Christina Lau 描述了如何使用 Application Developer 的最新版本来开发 XSL 样式表。

© Copyright International Business Machines Corporation 2002. All rights reserved.

引言

IBM® WebSphere® Studio Application Developer 是一种应用程序开发环境，它支持用 JSP、servlet、HTML、XML、Web 服务、数据库和 EJB 等不同的技术构建多种应用程序。Application Developer 还特别提供了 XML 和关系数据之间的紧密集成。凡是 WebSphere Application Server 支持的数据库，Application Developer 都支持，包括 DB2®、Oracle、Sybase 和 Microsoft® SQL Server™。

本文是着重讲述 WebSphere Studio Application Developer 附带的各种 XML 工具的系列文章的第 7 部分。第 7 部分演示如何使用 WebSphere Studio Application Developer 版本 5.0 提供的一些新 XSL 工具来开发 XSL 样式表。

我建议您阅读本系列的其他文章：

• 阅读 第 1 部分，学习如何使用 Application Developer 开发 XML Schema。
• 阅读 第 2 部分，学习如何使用 Application Developer 的 SQL Builder 创建 SQL 查询。
• 阅读 第 3 部分，学习可以用来把数据访问和 XML 结合到应用程序中的 Application Developer 功能。
• 阅读 第 4 部分，学习如何使用 XML Editor，它是一个用于创建和编辑 XML 文档的可视工具。
• 阅读 第 5 部分，学习如何使用 RDB to XML Mapping Editor 来创建与 DB2 XML Extender 一起使用的 DAD 文件。
• 阅读 第 6 部分，学习如何一起使用 XML Schema Editor 和 XML Editor 来开发使用 XML 名称空间的 XML 应用程序。

回页首

创建一个简单的样式表

我们将从零开始创建一个新的 XSL 样式表。在开始之前，请下载 下面提供的 xslExample1.zip 文件。切换到 XML 透视图。创建一个名为 Simple 的新项目，然后将 videos.xml 文件从 xslExample1.zip 文件导入到 Simple 项目中。按如下步骤启动 New XSL 文件向导：

1. 选择 File =>New =>XSL以启动 New XSL 向导。
2. 在 File name 域中，输入 videos.xsl 。单击 Next。
3. 在 Select XML file 页中，选择您已经导入的 videos.xml 文件。这会把 videos.xml 文件和 videos.xsl 文件 关联起来。
4. 单击 Finish。这样就创建了 videos.xsl 文件，并且 XSL Editor 自动为您打开。

回页首

创建样式表

XSL Editor 提供了许多向导来帮助您创建样式表中的内容。它还提供了一单击即转换功能，让您很快就能看到转换的结果。在这一部分，我们将向您展示如何用三个简单的步骤创建一个简单的 XSL 样式表并用它把 videos.xml 数据格式化成一张 HTML 表格：

第 1 步：添加一个 HTML 模板头

为创建 HTML 文档，我们将添加一个模板用来生成 HTML 头信息和定义文档的输出方法。

1. 把光标放到 videos.xsl 文件中 <xsl:stylesheet> 元素后面的空行上。
2. 从菜单中选择 XSL =>HTML Template。这将创建一个 <xsl:output> 元素（它将以 HTML 格式输出结果）和一个模板（它将用 videos.xml 文件中处理所有直接子元素的 <xsl:apply-templates> 规则生成 HTML 头）。

第 2 步：创建一张 HTML 表格

接下来，我们将创建一个将产生 HTML 表格的模板。

1. 把光标放到在上面的第 1 步中生成的 </xsl:template> 元素后面的空行上。
2. 从菜单中选择 XSL =>HTML Table。这会启动如下面图 1 所示的 XSL Table Wizard。
3. 选择 VIDEO元素作为用于构建 HTML 表格的上下文节点。这意味着 VIDEO 元素的所有子元素都将作为表格中的列被添加。
4. 选择 Wrap table in a template复选框指出我们想把这个表格包装到新的模板中。
5. 选择 Include Header复选框指出我们想在这个表格中包含一个表头。
6. （可选步骤）单击 Next转到下一页，为该表格添加表格边框和背景色。
7. 单击 Finish。这将在 videos.xsl 文件中创建一个将生成 HTML 表格的新 VIDEOS 模板。

第 3 步：保存和转换

1. 选择 File =>Save 保存 videos.xsl 文件。将对 videos.xsl 文件运行 XSL 验证（XSL Validation）。完成后的 videos.xsl 文件包含在 xslExample1.zip 文件中。
2. 从菜单中选择 Debug =>Transform。这将调用 Xalan 处理器来转换与这个 XSL 文件相关联的 XML 文件（ videos.xml ）。所得到的 HTML 文件如下面的图 2 所示。

回页首

把一个样式表与多个 XML 文档关联起来

当我们创建 videos.xsl 文件时，我们把它和 videos.xml 文件关联了起来。您可以在 Associations 对话框中更改这种关联。先选择 videos.xsl文件，然后选择 Properties。这会启动 videos.xsl 文件的 Properties 页。单击如图 3 所示的 Associations 选项卡启动 Associations 对话框。您可以看到 videos.xml 文件目前已被关联起来了。

使用 Associations 对话框，您可以添加或删除关联，还可以设置缺省关联。如果某个 XML 文件被设置为一个 XSL 文件的缺省关联，那么对 XSL 文件的任何需要知道实例文件的处理（例如，转换、调试或 XPath 向导调用）都将自动使用该缺省关联进行。

将一个 XSL 样式表应用于许多个结构相同但内容有别的 XML 文档是很常见的。您可以使用 Associations 对话框来设置所有关联。当您更改 XSL 样式表时，您只需单击一下鼠标就可以选择 Transform all XMLs 操作来转换所有已与 XSL 样式表关联在一起的 XML 文件。

回页首

改善录像商店的设计

至此，我已经演示了如何使用 XSL Editor 中的向导来根据 XML 文档快速创建样式表。但对于一个真实的录像商店来说，这个 HTML 表格看起来不是很吸引人。例如，您更愿意看到录像的真实图像吗？一种更吸引人的设计可能如下面的图 5 所示。当您访问该录像商店时，会给您显示一个最受欢迎影片的列表。接着，您可以通过单击链接选择某部特定的影片；这样将会显示一张图像和详细的描述，如下面的图 6 所示。

这样一个 Web 站点可以使用与它的数据源相同的 videos.xml 。但是，要使用 XSL 样式表创建这个 Web 站点，您需要执行以下步骤：

• 创建能够处理超链接（ href ）的样式表。
• 设计并部署将在运行时把 XSL 转换成 HTML 的 Web 应用程序。

在本文余下的几部分中，我们将着重讨论第一项任务。我们将研究可以用来调试 XSL 样式表的 XSL Debugger。在本系列的下一部分，我们将讨论如何构建将把这些样式表应用于输入数据以将输入数据转换成如上面的图 5 和图 6 所示的 HTML 输出的 Web 应用程序。

回页首

调试 XSL 样式表

创建一个名为 Scenario 的新项目，然后把 xslExample1.zip 的 Scenario 目录中的所有文件导入到本项目中。您将注意到，在 xsl 文件夹中有两个 XSL 样式表： movieList.xsl 和 movieDetail.xsl 。 movieList.xsl 样式表用来显示影片列表。 moveDetail.xsl 样式表用来显示一部特定影片的详细信息。

为了搞清楚 movieList.xsl 的工作原理，我们将使用 XSL Debugger 来研究它。选择 movieList.xsl文件和 videos.xml文件。选择 Apply XSL =>As HTML。这会在 XSL Debug 透视图中启动 XSL Debugger，如下面的图 7 所示：

XSL Debugger 具有下列视图：

• Sessions 视图显示调试会话列表。您可以从这个视图使用工具栏按钮在当前转换上单步向前 
  
  

  或单步向后 

  
  
  

  ，如果在 XSL 源代码中设置了断点的话可以运行到某个断点 

  
  
  

  ，或者在结果文档上打开浏览器

  
  
  。
  
  
• Current XSL Element 视图在您一步步执行转换的过程中显示 XSL 样式表中某个元素的详细信息。Actual Value 列显示该 XSL 元素被求值时的实际值。
  
  
• Breakpoints 视图显示在 XSL 样式表上所设置的断点的列表。您可以使用这个视图除去断点。
  
  
• Template Call Stack 视图显示调用堆栈中的模板的列表。当进入某个模板时，将会有一个条目被添加。当模板完成执行时，该条目就被从堆栈中除去。

XSL Debugger 还在一个平铺编辑器中打开输入 XML 和 XSL，以便在您一步步执行转换时把 XML 和 XSL 并排放在一起，这样看起来就很方便。不过，如果您的 XSL 样式表包含其他样式表，或者如果您的样式表转换多个文档，那么平铺编辑器读起来就很困难了，您可能会想简单地把各个编辑器层叠起来。要更改这一点，您可以选择 Windows =>Preference =>XML =>XSL Debugging，然后取消对“Show all debugging files in a tile editor”复选框的选择，如下面的图 8 所示：

使用 XSL Debugger 研究 movieList.xsl 文件

在 Sessions 视图中，单击

<xsl:variable name="id" select="VID_ID"/>

XSL Debugger 在碰到结束标记时对变量进行求值。在这个简单的例子中，该变量在同一行中就结束了，但对于更复杂的变量声明，一个变量的值可能会涉及到调用另一个可能跨越多行的模板。请仔细查看 Current XSL Element 视图，看看 </xsl:variable> 标记出现时所求得的结果。您将看到求得的上下文节点的值为 100，它是 VID_ID 元素在当前迭代时的值。

继续单步向前，直到到达下面定义 href 链接的行：

<a href="/VideoWeb/main/detail?videoId={$id}">

这个 href 属性定义了单击链接时将转到的页面的链接。那么，这个 href 中包含什么内容呢？这个 href 的第一部分定义了一个 URL /VideoWeb/main/detail ，它在 Web 应用程序中运行时有意义。我们将在本系列的下一篇文章中重新探讨这一部分。这个 href 的第二部分定义了一个参数 videoId ，它的值是根据 {$id} 变量的值计算出来的。要求出对 videos.xml 文件执行转换时这个 href 的确切值，请在 Current XSL Element视图（如下面的图 9 所示）中查看它。注意，如果实际值很长，您可以使用 ... 按钮打开一个对话框。

您可以单步遍历 <xsl:for-each> 循环在 XSL 元素被执行时查看每一个 XSL 元素，如果您只对查看某些值感兴趣的话也可以设置一个断点。我们来通过双击 <a href> 元素所在的行在该元素上设置一个断点。您将注意到在第 28 行处添加了一个断点（一个绿色圆点），如图 7 所示。

现在，单击

使用 XSL Debugger 研究 movieDetail.xsl 文件

接下来，我们将使用 XSL Debugger 仔细研究一下 movieDetail.xsl 文件。先选择 movieDetail.xsl文件和 videos.xml文件，然后选择 Apply XSL =>As HTML 启动一个新的调试会话。

请回想一下， movieDetail.xsl 文件是被用来显示被选中影片的详细信息。必须将该影片的标识 videoId 传递给这个样式表。在本系列的下一篇文章中，我们将向您展示当 URL 被请求时，如何从 servlet 动态传入这样一个参数。下面您将看到，出于设计这个样式表的目的，您可以用一个支架（scaffolding）值来代替。

在 XSL 源代码编辑器中，在下面这一行上设置一个断点，该行根据变量 $videoId 测试 VID_ID 值。

<xsl:if test="VID_ID=$videoId">

在 Sessions 视图中，单击

<xsl:variable name="videoId" select="100"/>

如果您再次单击

您可以修改 XSL 或 XML 源代码，然后重新启动 XSL Debugger 来立即看到结果。让我们像下面这样将 videoId 值改为 103 ，然后保存文件。

<xsl:variable name="videoId" select="103"></xsl:variable>

在 Sessions 视图中，选择当前会话并启动弹出菜单（参见图 10）。选择 Relaunch 开始一次新转换。单击

回页首

结束语

本文描述了如何使用 WebSphere Studio Application Developer 版本 5.0 中的一些新的 XSL 工具。这些工具可以帮助初学者很快就可以开始使用 XSL，并且可以帮助 XSL 程序员中的高手提高工作效率。

WebSphere Studio Application Developer 5.0 中本文未描述的其他与 XSL 有关的工具包括：

• XSL from XHTML 向导。它根据 XHTML 文件生成 XSL 样式表。如果您想把现有的 HTML 文件迁移到 XSL 和 XML 基础架构中，它还可以把数据转换成 XML 格式（可选）。
• Java bean XML/XSL Web client 向导。它接受 Java bean，然后生成一个 DOM、一些可以应用于这个 DOM 的关联的 XSL 样式表和一个能够将这些 XSL 样式表应用于该 DOM（这样您便可以使用 XML 和 XSL 快速创建 Web 应用程序的前端）的 servlet。
• 支持使用 XSLTC的编译后的 XSL 样式表。
• 帮助您构建和测试 XPath表达式的 XPath 向导。

在本系列的下一篇文章中，我们将讲述如何开发和部署将使用我们在本文中创建的 XSL 样式表的 Web 应用程序。

回页首

下载

	关于下载方法的信息

关于作者

		Christina Lau是 IBM 的高级技术职员。目前，她正在领导 WebSphere Studio Application Developer 的 XML 和数据工具方面的工作。您可以通过 clau@ca.ibm.com与她联系。

对本文的评价

太差！ (1) 需提高 (2) 一般；尚可 (3) 好文章 (4) 真棒！(5) 建议？

回页首