服务热线:13616026886

技术文档 欢迎使用技术文档,我们为你提供从新手到专业开发者的所有资源,你也可以通过它日益精进

位置:首页 > 技术文档 > JAVA > 新手入门 > 基础入门 > 查看文档

将 toc 从 xml 带到 dhtml地带


  对 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 onclick="showall('ul')">show all</button>
  <button onclick="hideall('ul')">hide all</button>
  <h1>list <xsl:value-of select="topiclist/@type" /></h1>
  <ul><xsl:apply-templates select="topiclist/topics" /></ul>
  <p><button onclick="window.alert(document.body.innerhtml);">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>

扫描关注微信公众号