将 TOC 从 XML 带到 DHTML地带

　2008-01-05 10:19:56　来源：WEB开发网　　　

核心提示：对 Web 开发人员而言，通过使用带有“有意义的”标记数据元素的 xml，将 TOC 从 XML 带到 DHTML地带，可实现使信息更有携带性与弹性，由于在 Internet EXPlorer 5 中增强的 XSL 支持，我们已经写出了顶端组中的所有链接，但我们还没有涉及 TOPICS 的子 TOPICS — 主题的嵌

　　对 Web 开发人员而言，通过使用带有“有意义的”标记数据元素的 xml，可实现使信息更有携带性与弹性。由于在 Internet EXPlorer 5 中增强的 XSL 支持，使得在浏览器中显示 XML 数据更加轻易。
　　
　　我们在 Web Workshop 中使用 XML 存储 TOC 信息已经有一段时间了，通过 XSL 样式表可以将该信息转换为 Html。样式表还“写下”链接到一个 CSS 和 JScript 文件，因此我们一次就可将 XML 转换到 DHTML。通过修改单一的 XSL 样式表，XML 存储的数据即可轻松改变所有 TOC 的输出格式。
　　
　　让我们来依次看一下这四种文件 — XML、XSL、JScript 及 CSS。
　　
　　在 XML 存储 TOC
　　对于本示例，我们已经创建了一个与 web 开发有关的文章或“主题”的列表。每个 TOPIC 元素都有一个说明性的 TITLE 和 URL。主题按 TOPICS 元素内的 TYPE 进行分组。注重第三个 TOPICS 元素自身包含 TOPICS 元素。webdev.xml 文件顶端的<?xml:stylesheet type="text/xsl" href="list.xsl"?>处理指令会告诉 Internet Explorer 5 当该 XML 文件直接在浏览器中打开时，按照此样式表实施 XML。（我们将在栏目尾端讨论如何在服务器上以 asp 实现此项操作。）
　　
　　以下是 XML 数据：
　　列表 1：webdev.xml
　　<?xml version="1.0"?>
　　<?xml:stylesheet type="text/xsl" href="list.xsl"?>
　　
　　<TOPICLIST TYPE="Web Dev References">
　　
　　<TOPICS TYPE="DHTML">
　　<TOPIC>
　　<TITLE>Objects</TITLE>
　　<URL>/workshop/author/dhtml/reference/objects.asp</URL>
　　</TOPIC>
　　<TOPIC>
　　<TITLE>Properties</TITLE>
　　<URL>/workshop/author/dhtml/reference/properties.asp</URL>
　　</TOPIC>
　　<TOPIC>
　　<TITLE>Methods</TITLE>
　　<URL>/workshop/author/dhtml/reference/methods.asp</URL>
　　</TOPIC>
　　<TOPIC>
　　<TITLE>Events</TITLE>
　　<URL>/workshop/author/dhtml/reference/events.asp</URL>
　　</TOPIC>
　　<TOPIC>
　　<TITLE>Collections</TITLE>
　　<URL>/workshop/author/dhtml/reference/collections.asp</URL>
　　</TOPIC>
　　</TOPICS>
　　
　　<TOPICS TYPE="CSS">
　　<TOPIC>
　　<TITLE>Attributes</TITLE>
　　<URL>/workshop/author/css/reference/attributes.asp</URL>
　　</TOPIC>
　　<TOPIC>
　　<TITLE>Length units</TITLE>
　　<URL>/workshop/author/css/reference/lengthunits.asp</URL>
　　</TOPIC>
　　<TOPIC>
　　<TITLE>Color table</TITLE>
　　<URL>/workshop/author/dhtml/reference/colors/colors.asp</URL>
　　</TOPIC>
　　</TOPICS>
　　
　　<TOPICS TYPE="XML">
　　
　　<TOPICS TYPE="XML DOM">
　　<TOPIC>
　　<TITLE>Developer's guide</TITLE>
　　<URL>/xml/XMLGuide/default.asp</URL>
　　</TOPIC>
　　<TOPIC>
　　<TITLE>Objects</TITLE>
　　<URL>/xml/reference/scriptref/XMLDOM_Objects.asp</URL>
　　</TOPIC>
　　</TOPICS>
　　
　　<TOPICS TYPE="XSL">
　　<TOPIC>
　　<TITLE>Developer's guide</TITLE>
　　<URL>/xml/XSLGuide/default.asp</URL>
　　</TOPIC>
　　<TOPIC>
　　<TITLE>Elements</TITLE>
　　<URL>/xml/reference/xsl/XSLElements.asp</URL>
　　</TOPIC>
　　<TOPIC>
　　<TITLE>Methods</TITLE>
　　<URL>/xml/reference/xsl/xslmethods.asp</URL>
　　</TOPIC>
　　<TOPIC>
　　<TITLE>Pattern syntax</TITLE>
　　<URL>/xml/reference/xsl/XSLPatternSyntax.asp</URL>
　　</TOPIC>
　　</TOPICS>
　　
　　</TOPICS>
　　
　　</TOPICLIST>
　　
　　使用一个 XSL 样式表将 XML 转换为 HTML
　　虽然我们可以在代码中直接对 XML 进行操作，但 XSL 让我们使用陈述的方法，将 XML 转换到显示输出（在此例中为 HTML），这种方法几乎不需要代码（和劳神）。XSL 使您不必编写很多涉及分支的代码 —假如您在 XML 文件中嵌套了复杂的层次，则此效果会非凡明显。在此例中，我们可以使用任意数目的 TOPICS 层次；XSL 均可很好地对此进行处理。
　　
　　让我们来看一下 XSL 代码。
　　
　　列表 2：list.xsl
　　<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl";>
　　
　　<xsl:template match="/">
　　<HTML>
　　<HEAD>
　　<TITLE>List <xsl:value-of select="TOPICLIST/@TYPE" /></TITLE>
　　<LINK REL="stylesheet" TYPE="text/css" HREF="list.css" />
　　<SCRIPT TYPE="text/javascript" LANGUAGE="Javascript" SRC="list.js"></SCRIPT>
　　</HEAD>
　　<BODY>
　　<BUTTON >Show All</BUTTON>
　　<BUTTON >Hide All</BUTTON>
　　<H1>List <xsl:value-of select="TOPICLIST/@TYPE" /></H1>
　　<UL><xsl:apply-templates select="TOPICLIST/TOPICS" /></UL>
　　<P><BUTTON >View HTML</BUTTON></P>
　　</BODY>
　　</HTML>
　　</xsl:template>
　　
　　<xsl:template match="TOPICS">
　　<LI CLASS="clsHasKids"><xsl:value-of select="@TYPE" />
　　<UL>
　　<xsl:for-each select="TOPIC">
　　<LI>
　　<A TARGET="_new">
　　<xsl:attribute name="HREF">
　　http://msdn.microsoft.com<;xsl:value-of select="URL" />
　　</xsl:attribute>
　　<xsl:value-of select="TITLE" />
　　</A>
　　</LI>
　　</xsl:for-each>
　　<xsl:if test="TOPICS"><xsl:apply-templates /></xsl:if>
　　</UL>
　　</LI>
　　</xsl:template>
　　
　　</xsl:stylesheet>
　　
　　如您所见，我们使用了众多 HTML 标记符和少量的 "xsl:" 元素。我们明确告诉处理器这是一个 XSL 文件并作为 XSL 文件的开始，然后声明两个 xsl:template 元素块，<xsl:template match="/"> 与 <xsl:template match="TOPICS">。
　　
　　转换根目录
　　第一个块 <xsl:template match="/"> 通知处理器从由斜杠指示的 XML 文件的根目录开始转换。在本块中，我们要做两件事：“写下”我们的 HTML 输入的结构和类属元素，并有条件地挂接到任何其他模板块中。我们采用 TOPICLIST 元素 TYPE 属性的值 — Web 开发参考 — 并将其放入 <TITLE> 和 <H1> HTML 元素中；我们还挂接脚本 (list.js) 和样式表 (list.css) 文件，它们将提供对 DHTML 外观和行为的处理。我们使用脚本文件中的两个函数，在顶端绘制了一些供用户显示或隐藏所有 TOC 节点的按钮，在底端添加了另一个按钮，来查看警报框中的 HTML 源文件。
　　
　　第一个块中最有趣的元素是 <xsl:apply-templates select="TOPICLIST/TOPICS" />。它通知处理器转换 XML 文档的所有 TOPICS 节点，这些节点是根目录 TOPICLIST 节点的子节点。假如您查看一下上面的 XML 文件，您会注重到它是由 TYPE "DHTML"、"CSS" 和 "XML" 的 TOPICS 节点组成的。在这里，XSL 处理器将从此第一个块开始分支，并在样式表中搜索另一个 xsl:template 块，它与我们的 select="TOPICLIST/TOPICS" 属性相匹配。正如您可能猜到的，这就是我们的第二个块。
　　
　　转换 TOPICLIST
　　第二个模板块 <xsl:template match="TOPICS"> 才是乐趣的开始。我们的三个节点的 TOPICS 中的每一个的上下文从第一个块传递到本块，并在此得以处理。首先，我们打开一个 HTML 列表项元素 (LI)，并赋予其 "clsHasKids" 的 CLASS 属性，我们后面将在 DHTML 中用到它；然后，我们输出正在处理的 TOPICS 节点的 TYPE，这是通过 <xsl:value-of select="@TYPE" /> 处理的。为获取 XSL 中的节点值，使用了 xsl:value-of 元素。假如获取了某一属性的值，则属性名的开始处将会加上一个 "@"。
　　
　　接下来，我们打开一个 HTML 无序列表 (<UL>)，它将包括当前 TOPICS 元素的所有子元素。使用 xsl:for-each 循环结构，它也可以将每个 TOPIC 子元素上下文更改为该元素（此时为 TOPIC），我们可以创建一个 <LI> 元素，并将其 TITLE 包在一个 A 链接中输出，该链接的 HREF 属性被设为 URL 元素的值。假如要以 XSL 将某一属性动态添加到一个 HTML 输出元素中，我们可以使用 xsl:attribute，其 name 属性设为我们希望创建的 HTML 属性；正如：<xsl:attribute name="HREF">。我们用服务器名称（http://msdn.microsoft.com）以及 TOPIC URL, <xsl:value-of select="URL" /> 植入 HREF 值。
　　
　　好了，我们已经写出了顶端组中的所有链接，但我们还没有涉及 TOPICS 的子 TOPICS — 主题的嵌套列表。这是一个 XSL 真正表现出色的区域，它可以使用一条语句处理所有的递归！关闭进入第二个块先开始处理 TOPICS 元素时打开的容器 <UL>