XSL/XML網頁製作入門,入門到精通

一. XSL入門

1.XSL---XML的樣式表 

HTML網頁使用預先確定的標識(tags),這就是說所有的標記都有明確的含義,例如<p>是另起一行<h1>是標題字體。所有的瀏覽器都知道如何解析和顯示HTML網頁。
然而,XML沒有固定的標識,我們可以建立我們自己需要的標識,所以瀏覽器不能自動解析它們,例如<table>可以理解爲表格,也可以理解爲桌子。由於XML的可擴展性,使我們沒有一個標準的辦法來顯示XML文檔。
爲了控制XML文檔的顯示,我們有必要建立一種機制,CSS就是其中的一種,但是XSL(eXtensible Stylesheet Language)是顯示XML文檔的首選樣式語言,它比CSS更適合於XML。 

2.XSL --- 不僅僅是一種樣式表 

XSL由兩部分組成: 

一是轉化XML文檔;二是格式化XML文檔。 

如果你不理解這個意思,可以這樣想:XSL是一種可以將XML轉化成HTML的語言,一種可以過濾和選擇XML數據的語言,一種能夠格式化XML數據的語言。(比如用紅色顯示負數。) 

3.XSL --- 它能做什麼? 

XSL可以被用來定義XML文檔如何顯示,可以將XML文檔轉換成能被瀏覽器識別的HTML文件,通常的,XSL是通過將每一個XML元素"翻譯"爲HTML元素,來實現這種轉換的。 

XSL能夠向輸出文件裏添加新的元素,或則移動元素。XSL也能夠重新排列或者索引數據,它可以檢測並決定哪些元素被顯示,顯示多少。 

4.XSL在IE5中的顯示 

注意:IE5.0中,並不能完全兼容W3C組織發佈的最新XSL標準。因爲IE5.0是在XSL標準最終確定以前發佈的。微軟已經承諾在IE5.5中修正。 
二.XSL的轉換 

1.將XML轉換成HTML

XSL是如何將XML文檔轉換成HTML文件的呢?我們來看一個例子,下面是XML文檔的一部分: 
<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<?xml version="1.0" encoding="ISO8859-1" ?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
...


然後我們將下面的XSL文件作爲HTML的模板將XML數據轉換爲HTML文件:

<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<?xml version=''1.0''?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<body>
<table border="2" bgcolor="yellow">
<tr>
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="CATALOG/CD">
<tr>
<td><xsl:value-of select="TITLE"/></td>
<td><xsl:value-of select="ARTIST"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
<?xml version=''1.0''?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<body>
<table border="2" bgcolor="yellow">
<tr>
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="CATALOG/CD">
<tr>
<td><xsl:value-of select="TITLE"/></td>
<td><xsl:value-of select="ARTIST"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>


在上面的代碼中, xsl:for-each元素的作用是定位XML文檔中的哪些元素需要按以下模板顯示。select屬性用來定義源文件中的元素名。指定屬性的這種語法又稱爲XML 
Pattern(模式),類似文件子目錄的表示形式。xsl:value-of元素用來在當前層次中插入子元素的內容模板。

因爲XSL樣式表自身也是一個XML文檔,因此,XSL文件的開頭以一個XML聲明開始。 xsl:stylesheet元素用來聲明這是一個樣式表文件。<xsl:template match="/">語句表示XML的源文檔在當前目錄下。

如果爲XML文檔加上XSL樣式表,看下面代碼第2行,你的瀏覽器就可以精確的將XML 文檔轉換爲HTML文件。

<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<?xml version="1.0" encoding="ISO8859-1" ?>
<?xml-stylesheet type="text/xsl" href="cd_catalog.xsl"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
......
<?xml version="1.0" encoding="ISO8859-1" ?>
<?xml-stylesheet type="text/xsl" href="cd_catalog.xsl"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
......


三. XSL--在客戶端的實現


1.JavaScript解決方案

在上面的章節中我們已經解釋了XSL是如何將XML轉換成HTML文件。方法就是在XML文檔的頭部加入一個XSL樣式表信息,然後讓瀏覽器執行轉換過程。

這種方法在大部分情況下都做得很好,但是在不支持XML的瀏覽器中就無法正確顯示了。

一個更好的更全面的解決方案是使用Javascript來實現XML到HTML的轉換。但是使用JavaScript必須得到以下功能支持:

a.允許Javascript代替瀏覽器進行細節檢測;

b.根據不同的需要和不同的瀏覽器使用不同的樣式表。

    對於XSL來說這是完全可行的。設計XSL的目標之一就是允許將一種格式轉換成另一種格式,支持不同的瀏覽器,支持不同的用戶需求。未來的瀏覽器的重要任務就是在客戶端執行XSL的轉換工作。

2.一個具體的實例

    下面是我們上面提到的一個XML文檔(cd_catalog.xml)例子的部分代碼:

<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<?xml version="1.0" encoding="ISO8859-1" ?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
.
.
.
<?xml version="1.0" encoding="ISO8859-1" ?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
.
.
.


下面是完整的XSL文件(cd_catalog.xsl):

<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<?xml version=''1.0''?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<body>
<table border="2" bgcolor="yellow">
<tr>
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="CATALOG/CD">
<tr>
<td><xsl:value-of select="TITLE"/></td>
<td><xsl:value-of select="ARTIST"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
<?xml version=''1.0''?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<body>
<table border="2" bgcolor="yellow">
<tr>
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-each select="CATALOG/CD">
<tr>
<td><xsl:value-of select="TITLE"/></td>
<td><xsl:value-of select="ARTIST"/></td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>



注意,現在XML文件還沒有加入XSL樣式表,還沒有被轉換成HTML文件。 

下面是用JavaSript來實現最後轉換的HTML代碼:

<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<html>
<body>
<script language="java script">
// Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("cd_catalog.xml")
// Load the XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("cd_catalog.xsl")
// Transform
document.write(xml.transformNode(xsl))
</script>
</body>
</html>
<html>
<body>
<script language="java script">
// Load XML 
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("cd_catalog.xml")
// Load the XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("cd_catalog.xsl")
// Transform
document.write(xml.transformNode(xsl))
</script>
</body>
</html>


    上面代碼中使用了Javascript,如果你不知道如何寫JavaScript,您最好專門學習一下。

    第一段代碼建立一個Microsoft Parser(XMLDOM)解析的對象,並將XML文檔讀入內存;第二段代碼建立另外一個對象並導入XSL文檔;最後一行代碼將XML文檔用XSL文檔轉換,並將結果輸出到HTML文件中。

隨着Internet的發展,越來越多的信息進入互聯網,信息的交換、檢索、保存及再利用等迫切的需求使HTML這種最常用的標記語言已越來越捉襟見肘。HTML將數據內容與表現融爲一體,可修改性、數據可檢索性差,而XML借鑑了HTML與數據庫、程序語言的優點,將內容與表現分開,不僅使檢索更爲方便,更主要的是用戶之間數據的交換更加方便,可重用性更強。

  XML是一種元標記語言,沒有許多固定的標記,爲WEB開發人員提供了更大的靈活性。當我們使用HTML時,標記只是簡單的表示內容的顯示形式,而與表示的內容沒有任何關聯,爲文檔的進一步處理帶來極大的不便。比如要表示個人簡歷,用HTML的表示方式如下:

<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<HTML>
<BODY>
<TABLE border=1 cellspacing=0>
<TH>姓名<TD>禹希初<TH>性別<TD>男<TH>生日<TD>1977.5
<TR>
<TH>技能<TD colspan=5>數據庫設計與維護、WEB開發
</TABLE>
</BODY>
</HTML>
<HTML>
<BODY>
<TABLE border=1 cellspacing=0>
<TH>姓名<TD>禹希初<TH>性別<TD><TH>生日<TD>1977.5
<TR>
<TH>技能<TD colspan=5>數據庫設計與維護、WEB開發
</TABLE>
</BODY>
</HTML>


肖斌 ® - XIaoBIN © - {xiaobin.NET} ™

上例在瀏覽器中的樣子

  在這裏,我們無法從標記TH、TD得知其內容表示什麼,如果用XML,相應的文檔(文件名:個人簡歷.xml)就可寫成如下形式:

<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<?xml version="1.0" encoding="GB2312"?>
<resume>
<name>禹希初</name>
<sex>男</sex>
<birthday>1977.5</birthday>
<skill>數據庫設計與維護、WEB開發</skill>
</resume>
<?xml version="1.0" encoding="GB2312"?>
<resume>
<name>禹希初</name>
<sex></sex>
<birthday>1977.5</birthday>
<skill>數據庫設計與維護、WEB開發</skill>
</resume>


此圖片僅顯示局部,請點擊查看完整圖片
肖斌 ® - XIaoBIN © - {xiaobin.NET} ™

上例在瀏覽器中的樣子(IE5.0或更新版本)

說明:

  version──規定了XML文檔的版本,此處只能是1.0;

  encoding── 此處規定了XML文檔的編碼類型,此處取值爲"GB2312",也就是"簡體中文"。

  對比兩例,使用XML我們可以做到自定義標記,用標記表明內容的含義。這樣在Internet上交流資料時,爲用計算機處理文檔提供了極大的方便,同時我們閱讀源文件時也不會被一大堆格式弄得暈頭轉向。

  然而,由於XML並沒有爲標記規定顯示方式,如果我們在遊覽器中查看以上兩個文檔(建議使用IE5.0或更新版本),我們將看到xml文檔並沒有以諸如表格的方式來顯示。難道我們就不能像HTML一樣顯示文檔嗎?回答是否定的。以個人簡歷爲例,需要另建一個格式文件說明各個標記的顯示方式,其內容如下(假設文件名爲resume.css):

<script src="highlight.js" type="text/javascript"> </script>程序代碼:
resume{ display: block;}
name{ display: block; font-size:120%;}
sex{ display:block; text-indent:2em}
birthday{ display:block; text-indent:2em}
skill{ display:block; text-indent:2em}
resume{ display: block;}
name{ display: block; font-size:120%;}
sex{ display:block; text-indent:2em}
birthday{ display:block; text-indent:2em}
skill{ display:block; text-indent:2em}


說明:

  以上均爲CSS樣式,建議讀者參考有關資料熟悉CSS,在以後學習中必須用到,此處由於篇幅關係不作介紹。建立文件resume.css後,在個人簡歷.xml文件的第一行後添加以下文字:
<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<?xml:stylesheet type="text/css" href="resume.css"?>
<?xml:stylesheet type="text/css" href="resume.css"?>


此圖片僅顯示局部,請點擊查看完整圖片
肖斌 ® - XIaoBIN © - {xiaobin.NET} ™

說明:

  此處表示引用一個外部CSS樣式文件,其中type規定樣式類型(可取值爲text/css或text/xsl),href規定文件路徑。

  保存文件,再以IE5.0打開文件。怎麼樣?格式有些不一樣吧。好象還不令人滿意,文檔內容是清晰了,但顯示效果比HTML編寫的文檔就差得多了,XML編寫的文檔就只能以這種方式顯示嗎?!

提示:

  1. 爲了更好的理解與掌握XML,建議大家熟悉HTML 4.0與CSS 2.0語法;掌握JavaScript、VBscript中至少一種;編程經驗、對數據庫理論與SQL的瞭解均能使大家在學習XML時獲益。

  2. XML文檔中標記必須成對出現,如果是空標記也必須有前加"/"的同名標記結束,或使用此種文式<xml_mark/>表示空標記。

  3. XML以及下面將要介紹的XSL文檔,屬性值必須用雙引號(")或單引號(’)括起來。

  4. XML文檔必須是良構的(XSL文檔也是XML文檔中一種),也就是說標記必須有結束標記、標記可以嵌套但不可交叉,如:

<outer><inner></inner><inner/></outer>

是合法的,而下面的形式

<outer><inner></outer></inner>

則是錯誤的。如果XML文檔在瀏覽時出錯,多半是違反了上面提到的規則。

  上期我們講到用CSS(層疊樣式表)來格式化XML文檔,其效果並不很令人滿意。實際上CSS用來格式化HTML標記比較合適些,只是因爲它簡單纔在上例中採用。

  XML在更多的時候只是一種數據文件,怎樣將它變爲我們日常所看到的HTML格式那樣的文件呢?如果我們將XML文件比作結構化的原料的話,那麼XSL就好像"篩子"與"模子",篩子選取自己需要的原料,這些原料再通過模子形成最終的產品:HTML。

  這個模子大致是這樣:我們先設計好表現的頁面,再將其中需要從XML中獲取數據來填充內容的部分"挖掉",然後用XSL語句從XML中篩出相關的數據來填充。一言以譬之:這XSL實際上就是HTML的一個"殼子",XML數據利用這個"殼"來生成"傳統"的HTML。

  XML在展開時是一個樹形結構,我們將樹形結構中自定義標記稱爲節點,節點之間存在父子、兄弟關係,我們要訪問其中的結點從根結點就要以"/"來層層進入。

  在XSL這個殼中,我們要從原料庫XML裏提取相關的數據,就要用到XSL提供的模式化查詢語言。所謂模式化查詢語言,就是通過相關的模式匹配規則表達式從XML裏提取數據的特定語句,即我們上面所說的"篩子"。

  參考微軟的"XSL開發者指南",我們大致可將模式語言分爲三種:

  選擇模式:

<xsl:for-each>、<xsl:value-of>和 <xsl:apply-templates>

  測試模式:

<xsl:if> 和<xsl:when>

  匹配模式:

<xsl:template>

  我們現在就分別對之進行介紹。

  一、 選擇模式

  選擇模式語句將數據從XML中提取出來,是一種簡單獲得數據的方法,這幾個標記都有一個select屬性,選取XML中特定的結點名的數據。

  1、<xsl:for-each>

  如在XML中有這樣的數據:
<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<author>
<name>小禹</name>
<name>春華</name>
<name>秋實</name>
</author>
<author>
<name>小禹</name>
<name>春華</name>
<name>秋實</name>
</author>

  我們要讀取這三個作者名字,是一個一個地按"author/name"方法來讀取嗎,可有多個這樣的name呀?如果有一種程序性的語句來循環讀取有多好啊!

  想得很對,XSL提供了這樣的具有程序語言性質的語句:<xsl:for-each>

  用它讀取這三個作者名字的方法如下:
<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<xsl:for-each select="author/name">
……
</xsl:for-each>
<xsl:for-each select="author/name">
……
</xsl:for-each>

  select,顧名思義,選取,它可以選定XML中特定唯一的標記,也可以選擇某一類相同的標記,我們稱之爲結點集。

  語法:
<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<xsl:for-each select="pattern" order-by="sort-criteria-list">
<xsl:for-each select="pattern" order-by="sort-criteria-list">


  屬性:

  1.select

  根據XSL樣式查詢考察上下文以決定哪類結點集(滿足select條件)使用此樣式描述。作爲一種簡化的表示就是,如果你想對文檔中的某一種標記的內容的顯示方式進行格式化,就可以將讓select等於此元素的標記名。例如欲對標記xml_mark進行格式化,即可用如下方式表示:
<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<xsl:for-each select="xml_mark">
<!--樣式定義-->
</xsl:for-each>
<xsl:for-each select="xml_mark">
<!--樣式定義-->
</xsl:for-each>


  2.order-by

  以分號(;)分隔、作爲排序標準的列表。在列表元素前添加加號(+)表示按此標記的內容以升序排序,添加減號(-)表示逆序排序。作爲一種簡化的表示就是,排序標準列表就是由select規定的標記的子標記的序列,每個標記之間以(;)分隔。

  2、<xsl:value-of>

  <xsl:for-each>模式只是選取節點,並沒有取出節點的值,好比猴子只是爬到了樹的某個枝幹上,那麼就用< xsl:value-of >來摘"勝利果實"吧!

  語法:
<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<xsl:value-of select="pattern">
<xsl:value-of select="pattern">

提取節點的值

  屬性:
  select用來與當前上下文匹配的XSL式樣。簡單的講,如果要在XSL文檔某處插入某個XML標記(假定是xml_mark標記)的內容,可用如下方式表示:
<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<xsl:value-of select="xml_mark"></xsl:value-of>
<xsl:value-of select="xml_mark"></xsl:value-of>


<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<xsl:value-of select="xml_mark"/>
<xsl:value-of select="xml_mark"/>

示例:

  此處仍以上期的個人簡歷的作爲例子,我們需要對文件(個人簡歷.xml)作一定修改,確切的說是將其中的第二行:

<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<?xml:stylesheet type="text/css" href="resume.css"?>
<?xml:stylesheet type="text/css" href="resume.css"?>

  修改爲:
<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<?xml:stylesheet type="text/xsl" href="resume.xsl"?>
<?xml:stylesheet type="text/xsl" href="resume.xsl"?>

  然後建立一個新文件:resume.xsl,其內容如下:
<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<?xml version="1.0" encoding="GB2312"?>
<HTML xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<HEAD>
<TITLE>個人簡歷</TITLE>
</HEAD><BODY>
<xsl:for-each select="resume">
<P/>
<TABLE border="1" cellspacing="0">
<CAPTION style="font-size: 150%; font-weight: bold">
個人簡歷
</CAPTION>
<TR>
<TH>姓名</TH><TD><xsl:value-of select="name"/></TD>
<TH>性別</TH><TD><xsl:value-of select="sex"/></TD>
<TH>生日</TH><TD><xsl:value-of select="birthday"/></TD>
</TR>
<TR>
<TH>技能</TH><TD colspan="5"><xsl:value-of select="skill"/></TD>
</TR>
</TABLE>
</xsl:for-each>
</BODY>
</HTML>
<?xml version="1.0" encoding="GB2312"?>
<HTML xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<HEAD>
<TITLE>個人簡歷</TITLE>
</HEAD><BODY> 
<xsl:for-each select="resume">
<P/>
<TABLE border="1" cellspacing="0">
<CAPTION style="font-size: 150%; font-weight: bold">
個人簡歷
</CAPTION>
<TR>
<TH>姓名</TH><TD><xsl:value-of select="name"/></TD>
<TH>性別</TH><TD><xsl:value-of select="sex"/></TD>
<TH>生日</TH><TD><xsl:value-of select="birthday"/></TD>
</TR>
<TR>
<TH>技能</TH><TD colspan="5"><xsl:value-of select="skill"/></TD>
</TR>
</TABLE>
</xsl:for-each>
</BODY>
</HTML>


此圖片僅顯示局部,請點擊查看完整圖片
肖斌 ® - XIaoBIN © - {xiaobin.NET} ™
上例在瀏覽器中的樣子(IE5.0或更新版本)

  完成這些以後再來讓我們看一下辛勤勞動的成果,怎麼樣?效果不錯吧。更酷還在後頭呢。現在我們對文件(個人簡歷.xml)作進一步的修改:

  1.在標記<resume>前添加一個新標記<document>;

  2.將標記對<resume></resume>之間的內容(包括這一對標記)複製並粘貼在其後,並在最後用<document>結束。

  3.以Notepad.exe打開文件resume.xsl,在標記<HTML>之後添加文字:<xsl:for-each select="document">;在標記</HTML>之前添加文字:</xsl:for-each>,保存文件。

  4.在瀏覽器中打開文件(個人簡歷.xml)。看到了什麼?兩份個人簡歷!
此圖片僅顯示局部,請點擊查看完整圖片
肖斌 ® - XIaoBIN © - {xiaobin.NET} ™

  就這樣,利用XML我們可以編寫內容與樣式完成分離的文檔!當然,XSL文件比一般的HTML文件要複雜一些,然而一旦完成則可用於格式化所有同類的XML文檔。

  經過前幾日的學習,我們學習了XHTML文檔的編寫和以及三個XSL元素,已能編寫相當靈活的XSL文檔,今天將學習的是XSL模板的編寫。我們都知道,短的文檔、程序十分好讀,但當規模增大後,其複雜性也以更快的速度增加。

  前面我們學了<xsl:for-each>、<xsl:value-of>等,可以用它們對XML數據實現簡單的格式化輸出,但如果遇到比較複雜的XML格式輸出,將XSL按照要求依次寫下來的話,一是設計困難,可擴展性差,不利於人員之間的分工協作;另則,可修改性很差,可能會出現牽一髮而動全軍的情況,不利於維護。程序中模塊化設計逐步細化的方法在這裏得到了應用! 

  XSL模板將XSL的設計細化成一個個模板(塊),最後再將這些模板(塊)組合成一個完整的XSL;好比船與集裝箱,我們不是將所有的貨物一件件地堆起來,而是裝在各自的集裝箱中,然後再在船上將這些集裝箱堆放起來。這種方法可以使你先從整體上考慮整個XSL的設計,然後將一些表現形式細化成不同的模塊,再具體設計這些模塊,最後將它們整合在一起,這樣,將宏觀與微觀結合起來,符合人們條理化、規範化要求。


  裝集裝箱--書寫模板(塊):<xsl:template>

  語法:
<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<xsl:template match="node-context" language="language-name">
<xsl:template match="node-context" language="language-name">


  屬性:

  match ── 確定什麼樣的情況下執行此模板。作爲一種簡化的說明,在此處使用標記的名字;其中最上層模板必須將match設爲"/"。

  language ── 確定在此模板中執行什麼腳本語言,其取值與HTML中的SCRIPT標記的LANGUAGE屬性的取值相同,缺省值是Jscript。

  <xsl:template>用match屬性從XML選取滿足條件的節點,徵對這些特定的節點形成一個特定輸出形式的模板。

  吊集裝箱上船--調用模板(塊):<xsl:apply-templates>

  語法:
<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<xsl:apply-templates select="pattern" order-by="sort-criteria-list">
<xsl:apply-templates select="pattern" order-by="sort-criteria-list">


屬性:

  select ── 確定在此上下文環境中應執行什麼模板,即選取用< xsl:template >標記建立的模板(塊)。
  order-by ── 以分號(;)分隔的排序標準,通常是子標記的序列。

示例:

  以個人簡歷爲例,爲便於處理我們希望"技能"中每一項都用標記對<skill></skill>括起來,有多少項技能就有多少個這種標記對,經過修改後的個人簡歷XML文檔內容如下:

<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<?xml version="1.0" encoding="GB2312"?>
<?xml:stylesheet type="text/xsl" href="resume_template.xsl"?>
<document>
<resume>
<name>禹希初</name>
<sex>男</sex>
<birthday>1977.5</birthday>
<skill>數據庫設計與維護</skill>
<skill>WEB開發</skill>
</resume>
</document>
<?xml version="1.0" encoding="GB2312"?>
<?xml:stylesheet type="text/xsl" href="resume_template.xsl"?>
<document>
<resume>
<name>禹希初</name>
<sex></sex>
<birthday>1977.5</birthday>
<skill>數據庫設計與維護</skill>
<skill>WEB開發</skill>
</resume>
</document>


  然後,建立一個新XSL文件resume_template.xsl,採用模板的形式,其內容如下:

<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<?xml version="1.0" encoding="GB2312"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<!--根模板-->
<xsl:template match="/">
<HTML><HEAD><TITLE>個人簡歷</TITLE></HEAD>
<BODY>
<xsl:apply-templates select="document/resume"/>
</BODY>
</HTML>
</xsl:template>
<!--簡歷模板-->
<xsl:template match="resume">
<TABLE border="1" cellspacing="0">
<CAPTION>個人簡歷(
<xsl:eval>formatIndex(childNumber(this),"I")</xsl:eval>
)</CAPTION>
<xsl:apply-templates select="name"/>
<xsl:apply-templates select="sex"/>
<xsl:apply-templates select="birthday"/>
<TR/>
<TD>技能</TD><TD COLSPAN="5">
<TABLE cellspacing="0">
<xsl:apply-templates select="skill"/>
</TABLE>
</TD>
</TABLE>
<BR/>
</xsl:template>
<!--姓名模板-->
<xsl:template match="name"><TD>姓名</TD>
<TD><xsl:value-of/></TD>
</xsl:template>
<!--性別模板-->
<xsl:template match="sex"><TD>性別</TD>
<TD><xsl:value-of/></TD>
</xsl:template>
<!--生日模板-->
<xsl:template match="birthday"><TD>生日</TD>
<TD><xsl:value-of/></TD>
</xsl:template>
<!--技能模板-->
<xsl:template match="skill">
<TR><TD><xsl:value-of/></TD></TR>
</xsl:template>
</xsl:stylesheet>
<?xml version="1.0" encoding="GB2312"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<!--根模板-->
<xsl:template match="/">
<HTML><HEAD><TITLE>個人簡歷</TITLE></HEAD>
<BODY>
<xsl:apply-templates select="document/resume"/>
</BODY>
</HTML>
</xsl:template>
<!--簡歷模板-->
<xsl:template match="resume">
<TABLE border="1" cellspacing="0">
<CAPTION>個人簡歷(
<xsl:eval>formatIndex(childNumber(this),"I")</xsl:eval>
</CAPTION>
<xsl:apply-templates select="name"/>
<xsl:apply-templates select="sex"/>
<xsl:apply-templates select="birthday"/>
<TR/>
<TD>技能</TD><TD COLSPAN="5">
<TABLE cellspacing="0">
<xsl:apply-templates select="skill"/>
</TABLE>
</TD>
</TABLE>
<BR/>
</xsl:template>
<!--姓名模板-->
<xsl:template match="name"><TD>姓名</TD>
<TD><xsl:value-of/></TD>
</xsl:template>
<!--性別模板-->
<xsl:template match="sex"><TD>性別</TD>
<TD><xsl:value-of/></TD>
</xsl:template>
<!--生日模板-->
<xsl:template match="birthday"><TD>生日</TD>
<TD><xsl:value-of/></TD>
</xsl:template>
<!--技能模板-->
<xsl:template match="skill">
<TR><TD><xsl:value-of/></TD></TR>
</xsl:template>
</xsl:stylesheet>

此圖片僅顯示局部,請點擊查看完整圖片
肖斌 ® - XIaoBIN © - {xiaobin.NET} ™
上例在瀏覽器中的樣子(IE5.0或更新版本)

  保存文件,打開文件(個人簡歷.xml),效果令人滿意吧。其實要做到同樣的效果,用前面三週介紹的方法也可做,但你得把它作爲一整體考慮。

  在上面的XSL文件中,我們將性別、生日、技能等數據項分別用模板來單獨寫,再用<xsl:apply-template>來調用,這樣,即使你日後要對這些模板作相應的修改與擴充也很方便,不致於出現互相干擾、混雜不清的情況。這種從上至下、逐層細化的設計方法,極大地減少工作複雜程度,也大大減少了差錯的產生,可以實現多人的協作設計。 
  注意:如果XML文檔中不同標記有同名的子標記,在爲其編寫模板時,應把父標記作爲其前綴,格式爲(parent_mark/child_mark)。模板文件必須有一個根模板,其屬性match是"/"。
  XML技術的優勢之一就在於數據輸出的可選擇性,即選擇需要的數據輸出。前面我們所講到的選擇模式語句:<xsl:for-each>、<xsl:value-of>及<xsl:apply-template>只是簡單的選取通過"/"符號層層到達的節點,如果我們對XML數據不需要全部輸出,而只需要其中的滿足某條件的部分數據,"蘿蔔青菜、各取所需",那麼條件判斷<xsl:if>與多條件判斷<xsl:choose>及<xsl:when>則迎合了這種需要,如果你對程序設計熟悉的話,會覺得它們似曾相識。 


  XSL中的IF,首先,介紹XSL元素<xsl:if>的語法結構: 

  語法:
<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<xsl:if expr="script-expression" language="language-name" test="pattern">
<xsl:if expr="script-expression" language="language-name" test="pattern">


  屬性:

  expr ── 腳本語言表達式,計算結果爲"真"或"假";如果結果爲"真",且通過test,則在輸出中顯示其中內容(可省略此項屬性)。 

  language ── expr屬性中表達式的腳本語言類型,其取值與HTML標記SCRIPT的LANGUAGE屬性的取值相同,缺省爲"JScript"。

  test ──源數據測試條件。 

  示例: 

  此處以一份報表爲例,文件名爲report.xml,其內容如下: 

<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<?xml version="1.0" encoding="GB2312"?>
<?xml:stylesheet type="text/xsl" href="report.xsl"?>
<document>

<report>
<class>
甲班
</class>
<q1>50</q1>
<q2>70</q2>
<q3>30</q3>
<q4>10</q4>
</report>

<report>
<class>
乙班
</class>
<q1>20</q1>
<q2>30</q2>
<q3>40</q3>
<q4>50</q4>
</report>

<report>
<class>
丙班
</class>
<q1>70</q1>
<q2>40</q2>
<q3>20</q3>
<q4>10</q4>
</report>
</document>
<?xml version="1.0" encoding="GB2312"?>
<?xml:stylesheet type="text/xsl" href="report.xsl"?>
<document>

<report>
<class>
甲班
</class>
<q1>50</q1>
<q2>70</q2>
<q3>30</q3>
<q4>10</q4>
</report>

<report>
<class>
乙班
</class>
<q1>20</q1>
<q2>30</q2>
<q3>40</q3>
<q4>50</q4>
</report>

<report>
<class>
丙班
</class>
<q1>70</q1>
<q2>40</q2>
<q3>20</q3>
<q4>10</q4>
</report>
</document>
 


  我們採用XSL模板結合今天所學的<xsl:if>,爲其編寫一個XSL文檔,要求季度產量小於等於20的用紅色表示,文件名爲report.xsl,內容如下: 

<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<?xml version="1.0" encoding="GB2312"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<xsl:template match="/">
<HTML><HEAD><TITLE>1999年生產統計</TITLE></HEAD>
<BODY><xsl:apply-templates select="document"/></BODY>
</HTML>
</xsl:template>

<xsl:template match="document">
<H3>1999年生產統計</H3>
<TABLE border="1" cellspacing="0">
<TH>班組</TH>
<TH>一季度</TH>
<TH>二季度</TH>
<TH>三季度</TH>
<TH>四季度</TH>
<xsl:apply-templates select="report"/>
</TABLE>
</xsl:template>

<xsl:template match="report">
<TR>
<TD><xsl:value-of select="class"/></TD>
<TD><xsl:apply-templates select="q1"/></TD>
<TD><xsl:apply-templates select="q2"/></TD>
<TD><xsl:apply-templates select="q3"/></TD>
<TD><xsl:apply-templates select="q4"/></TD>
</TR>
</xsl:template>

<xsl:template match="q1|q2|q3|q4">
<!--此處測試產量,如小於等於20則添加一STYLE屬性color,其值爲red(紅色)-->
<xsl:if test=".[value()$le$20]">
<xsl:attribute name="style">color:red</xsl:attribute>
</xsl:if>
<xsl:value-of/>
</xsl:template>

</xsl:stylesheet>
<?xml version="1.0" encoding="GB2312"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<xsl:template match="/">
<HTML><HEAD><TITLE>1999年生產統計</TITLE></HEAD> 
<BODY><xsl:apply-templates select="document"/></BODY>
</HTML>
</xsl:template>

<xsl:template match="document">
<H3>1999年生產統計</H3> 
<TABLE border="1" cellspacing="0"> 
<TH>班組</TH>
<TH>一季度</TH>
<TH>二季度</TH>
<TH>三季度</TH>
<TH>四季度</TH>
<xsl:apply-templates select="report"/>
</TABLE>
</xsl:template>

<xsl:template match="report">
<TR>
<TD><xsl:value-of select="class"/></TD>
<TD><xsl:apply-templates select="q1"/></TD>
<TD><xsl:apply-templates select="q2"/></TD>
<TD><xsl:apply-templates select="q3"/></TD>
<TD><xsl:apply-templates select="q4"/></TD>
</TR>
</xsl:template>

<xsl:template match="q1|q2|q3|q4">
<!--此處測試產量,如小於等於20則添加一STYLE屬性color,其值爲red(紅色)--> 
<xsl:if test=".[value()$le$20]"> 
<xsl:attribute name="style">color:red</xsl:attribute>
</xsl:if>
<xsl:value-of/>
</xsl:template>

</xsl:stylesheet>

此圖片僅顯示局部,請點擊查看完整圖片
肖斌 ® - XIaoBIN © - {xiaobin.NET} ™
上例在瀏覽器中的樣子(IE5.0或更新版本)




  說明:

  q1|q2|q3|q4 ── 標記q1、q2、q3、q3均用此模板確定輸出

  $le$ ── 是關係運算符中的"小於等於",其它關係有小於($lt$)、大於($gt$)、大於等於($ge$)、等於($eq$)、不等於($ne$)等。

  . ── 表示引用當前標記。

  [ ] ── 表示篩選,只有滿足篩選條件的標記才能被選取。


  value() ──XSL函數,其他常用XSL函數有text()、end()、index()等。 


  下期,我們將學習XSL的另外三個元素,可對同一數據進行多次測試,根據不同條件產生相應輸出。
  上期我們學習了XSL元素<xsl:if>,已能通過測試XML數據的值來決定不同的輸出形式,不知你嘗試過沒有,實際上<xsl:for-each>也可部分實現<xsl:if>的功能,但有時,我們希望對同一數據同時測試多個條件,根據不同條件輸出相應結果。當然,我們可以用if,假如我們只有if可用的話。幸好我們有一個更好的選擇,那就是用<xsl:choose>。下面介紹相關元素的語法:

  <xsl:choose>

  語法:<xsl:choose>

  屬性:無,表示一個多選測試的開始

  <xsl:when>

  語法:

<xsl:when expr="script-expression" language="language-name" test="pattern">

  屬性:

  expr ── 腳本語言表達式,計算結果爲"真"或"假";如果結果爲"真",且通過test,則在輸出中顯示其中內容(可省略此項屬性)。

  language ── expr屬性中表達式的腳本語言類型,其取值與HTML標記SCRIPT的LANGUAGE屬性的取值相同,缺省爲"JScript"。

  test ── 源數據測試條件。

  <xsl:otherwise>

  語法:<xsl:otherwise>

  屬性:無,在一個多選測試中,如果沒有不滿足<xsl:when>規定的條件,如果在最後有此標記,則輸出此標記中的內容。

  示例:

  此處以學生成績單爲例,要求按成績的高低給出優秀( >85)、一般(70~85)、及格(60~69)、不及格(< 60),而不是顯示分數。其中成績單的XML文檔(文件名:grade.xml)如下:

<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<?xml version="1.0" encoding="GB2312"?>
<?xml:stylesheet type="text/xsl" href="grade.xsl"?>
<document>
<grade>
<name>大胖</name>
<english>80</english>
<math>90</math>
<chymest>90</chymest>
</grade>
<grade>
<name>小花</name>
<english>98</english>
<math>70</math>
<chymest>85</chymest>
</grade>
</document>
<?xml version="1.0" encoding="GB2312"?>
<?xml:stylesheet type="text/xsl" href="grade.xsl"?>
<document>
<grade>
<name>大胖</name>
<english>80</english>
<math>90</math>
<chymest>90</chymest>
</grade>
<grade>
<name>小花</name>
<english>98</english>
<math>70</math>
<chymest>85</chymest>
</grade>
</document>


  爲實現按分數分等級顯示,其XSL文檔(文件名:grade.xsl)內容如下:

<script src="highlight.js" type="text/javascript"> </script>程序代碼:
<?xml version="1.0" encoding="GB2312"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<HTML>
<HEAD><TITLE>成績單</TITLE></HEAD>
<BODY>
<xsl:apply-templates select="document"/>
</BODY>
</HTML>
</xsl:template>

<xsl:template match="document">
<TABLE border="1" cellspacing="0">
<TH>姓名</TH><TH>英語</TH><TH>數學</TH><TH>化學</TH>
<xsl:apply-templates select="grade"/>
</TABLE>
</xsl:template>

<xsl:template match="grade">
<TR>
<TD><xsl:apply-templates select="name"/></TD>
<TD><xsl:apply-templates select="english"/></TD>
<TD><xsl:apply-templates select="math"/></TD>
<TD><xsl:apply-templates select="chymest"/></TD>
</TR>
</xsl:template>

<xsl:template match="name">
<xsl:value-of/>
</xsl:template>

<xsl:template match="english|math|chymest">
<xsl:choose>
<xsl:when test=".[value()$gt$85]">優秀</xsl:when>
<xsl:when test=".[value()$gt$70]">一般</xsl:when>
<xsl:when test=".[value()$gt$60]">起格</xsl:when>
<xsl:otherwise>不起格</xsl:otherwise>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>
<?xml version="1.0" encoding="GB2312"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<HTML>
<HEAD><TITLE>成績單</TITLE></HEAD>
<BODY>
<xsl:apply-templates select="document"/>
</BODY>
</HTML>
</xsl:template>

<xsl:template match="document">
<TABLE border="1" cellspacing="0">
<TH>姓名</TH><TH>英語</TH><TH>數學</TH><TH>化學</TH>
<xsl:apply-templates select="grade"/>
</TABLE>
</xsl:template>

<xsl:template match="grade">
<TR>
<TD><xsl:apply-templates select="name"/></TD>
<TD><xsl:apply-templates select="english"/></TD>
<TD><xsl:apply-templates select="math"/></TD>
<TD><xsl:apply-templates select="chymest"/></TD>
</TR>
</xsl:template>

<xsl:template match="name">
<xsl:value-of/>
</xsl:template>

<xsl:template match="english|math|chymest">
<xsl:choose>
<xsl:when test=".[value()$gt$85]">優秀</xsl:when>
<xsl:when test=".[value()$gt$70]">一般</xsl:when>
<xsl:when test=".[value()$gt$60]">起格</xsl:when>
<xsl:otherwise>不起格</xsl:otherwise>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>

此圖片僅顯示局部,請點擊查看完整圖片
肖斌 ® - XIaoBIN © - {xiaobin.NET} ™
上例在瀏覽器中的樣子(IE5.0或更新版本)

  說明:在<xsl:choose>選擇中,從第一個<xsl:when>開始,逐個測試,直到滿足一個測試條件就將其中的內容輸出,不再測試後面的條件;如果不滿足任何一個條件,則輸出<xsl:otherwise>中的內容。

  標記對<xsl:when></xsl:when>與<xsl:otherwise></xsl:otherwise>中可嵌套<xsl:if>或<xsl:choose>。
發佈了98 篇原創文章 · 獲贊 2 · 訪問量 12萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章