將 TOC 從 XML 帶到 DHTML地帶

2019-11-18 12:48:07

字體：大中小

來源：轉載

供稿：網友

　　對 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>

上一篇：Tomcat 服務器Server.xml的關鍵參數配置

下一篇：XML文件DTD路徑解析——in Eclipse(圖)