XML與XSL


阿瑟 發表



其實XSL才是為XML量身訂作的樣式語言, 他除了能夠設定資料的顯示樣式以外, 在定義XML以後, 可以將XML轉換成不同的格式, 其功能強大乃CSS無法批敵也!

如果想要用很複雜的樣式怎麼辦? 這次小弟介紹您使用一種功能超強的樣式語言: XSL.
其實XSL用的是XML語法, 在寫XSL的時候你也可以用別的如HTML, CSS語法來寫, 總之, 你的XSL顯示將取決於你的XSL中的內容. 重溫上次的XML語法: (test2.xml)
<?xml version="1.0" encoding="big5" ?>

<catalog>

 <tutorial>
  <title>認識XML</title>
  <author>阿得</author>
  <date>9/19/2002</date>
  <category>XML教學</category>
 </tutorial>

 <tutorial>
  <title>Javascript: 隨機背景音樂</title>
  <author>阿得</author>
  <date>8/31/2002</date>
  <category>Javascript教學</category>
 </tutorial>

 <tutorial>
  <title>VBscript: Class類別</title>
  <author>阿得</author>
  <date>9/17/2002</date>
  <category>Vbscript教學</category>
 </tutorial>
</catalog>


現在要開始建立樣式檔了喔...請建立一個檔案並命名為test2.xsl test2.xsl內容為:
<?xml version="1.0" encoding="big5" ?>
<HTML xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<body>

<xsl:for-each select="catalog/tutorial">
<div style="background-color:#336699;color:#ffffff;font-size:13px;font-weight:bold;font-family:verdana,arial">
<xsl:value-of select="title" /> - <xsl:value-of select="category" />
</div>
<blockquote style="color:#555555;font-size:11px;font-family:verdana,arial">
<xsl:value-of select="author" /> 於 <xsl:value-of select="date" /> 發表
</blockquote>
</xsl:for-each>

</body>
</HTML>


惹? 這不是XML嗎? 怎麼裡面還有混HTML? 沒錯, 因為在這次的範例中小弟要把XML轉換成HTML, 這樣我們才能看到漂亮的網頁.

針對以上語法講解:

HTML xmlns:xsl="http://www.w3.org/TR/WD-xsl, 其實就是HTML標籤, 代表從這邊開始的內容是用HTML, 後面的xmlns:xls是定義命名空間, 總之照打就對囉.

xsl:for-each select="catalog/tutorial", xsl:for-each其實作用有點像是for迴圈, 意思是以下的內容是每一個tutorial標籤都有的. 另外值得注意的一點就是, XML裡面一定要有一個root標籤, 如在這個範例裡面的root標籤是catalog, root就是最底層的標籤, 如果不懂得話可以參考test2.xml的內容.

<xsl:value-of select="title" />, 由於你在上面已經寫了for-each, 所以在這邊你就不需要打root標籤和上面的父標籤, 因為瀏覽器已經知道這個標籤在什麼地方. xsl:value-of 就是將指定的標籤 (也就是select指定的, 在此例是<title>與<title>中的內容), 而後面的 / 代表是省略了尾標籤. 在XML中的規定比較嚴格, 所有的標籤都必須有起始和尾標籤, 用/ 代表的就是起始標籤和尾標籤中並沒有值, 意同<xsl:value-of select="title"></xsl:value-of>



其實這份XSL樣式的作用就是定義catalog標籤中所有的tutorial標籤, 並且定義tutorial之下的category, author, title與date標籤.


儲存好樣式以後, 現在要在test2.xml內嵌剛剛的test2.xsl檔:
<?xml version="1.0" encoding="big5" ?>
<?xml-stylesheet type="text/xsl" href="test2.xsl" ?>

<catalog>

.....略


你可以跑跑看, 現在你應該可以看到一份很漂亮的列表 (相對漂亮啦).

你可以 按這裡 看完成的範例

很不可思議吧?! 同樣是樣式語言, 但是XSL的延伸性就很強, 在定義標籤的同時還可以用HTML自己去排這些XML文件上資料的顯示.
試想, 這份XSL如果用不同的方法寫, 可以用不同的方式輸出顯示. 同樣的XML文件, 如果用不同的XSL文件去定義, 輸出很有可能有極大的不同.
據筆者所知, 微軟的許多應用程式 (如Office) 的文件不是用XML就是用XML相容的格式去寫的.
如同筆者剛剛提的, 如果要轉換格式的話, 同樣的標籤用不同的樣式去定義就會有不同的結果 (如果要轉成網頁就用這次的範例同樣的方法去轉), 這樣的延伸特性也是為什麼許多公司都十分看好XML的未來. 現在XML在瀏覽器的支援還是有一點不完全, 在這次的範例中小弟用的是IE 5.0相容的舊的命名空間, 筆者在此建議您去更新您的IE到6.0以上版本, 才會有更好的支援度.

最後更新日期: 9/19/2002 6:59:46 PM