?? 0403-0200.htm
字號:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0071)http://162.105.170.55/ASPs/GetLearningArticleTemp.asp?section=0403-0200 -->
<HTML><HEAD><TITLE>XML中國論壇 - 初學進階 - 4.3.2 一個XSLT的簡單例子</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>TABLE {
FONT-SIZE: 9pt; COLOR: black; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"
}
.pt9 {
FONT-SIZE: 9pt; COLOR: black; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"
}
.pt10 {
FONT-WEIGHT: 700; FONT-SIZE: 10pt; LINE-HEIGHT: 18pt; FONT-FAMILY: "宋體"
}
.TempOutline {
FONT-SIZE: 9pt; MARGIN-LEFT: 15pt; COLOR: #666666; TEXT-INDENT: -28pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
.TempOutline1 {
FONT-SIZE: 9pt; MARGIN-LEFT: 24pt; COLOR: #666666; TEXT-INDENT: -36pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
.Outline {
FONT-SIZE: 9pt; MARGIN-LEFT: 15pt; TEXT-INDENT: -28pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
.Outline1 {
FONT-SIZE: 9pt; MARGIN-LEFT: 24pt; TEXT-INDENT: -36pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
.Outline11 {
FONT-SIZE: 9pt; MARGIN-LEFT: 38pt; TEXT-INDENT: -50pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
.passage0 {
FONT-SIZE: 9pt; MARGIN-LEFT: 15pt; TEXT-INDENT: -28pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
.passage1 {
FONT-SIZE: 9pt; MARGIN-LEFT: 24pt; TEXT-INDENT: -36pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
.passage11 {
FONT-SIZE: 9pt; MARGIN-LEFT: 38pt; TEXT-INDENT: -50pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
.passage111 {
FONT-SIZE: 9pt; MARGIN-LEFT: 51pt; TEXT-INDENT: -64pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋體"; TEXT-DECORATION: none
}
</STYLE>
<META content="Microsoft FrontPage 5.0" name=GENERATOR></HEAD>
<BODY vLink=#000000 aLink=#000000 link=#000000 leftMargin=0 topMargin=0
onload=""><!-- 以下為主體內容 -->
<div align="center">
<center>
<TABLE width="100%" border=0 style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
<TBODY>
<TR vAlign=top>
<TD width=39 rowSpan=2></TD>
<TD vAlign=center width="510" >
<p align="center"><IMG height=33
src="image/title_learner.gif" width=226></TD>
<TD width=37 rowSpan=2></TD>
</TR>
<TR vAlign=top>
<TD width="510" ><!-- 正文內容 -->
<DIV class=pt10><B>4.3.2 一個XSLT的簡單例子</B></DIV>
<DIV></DIV><BR>
<DIV class=pt9>
<P>為了讓讀者能夠對XSLT有一個感性認識，很快地掌握它的精髓，我們先來看一個XSLT的簡單例子。通過剖析這個例子，讀者可以掌握一些XSLT的基本語法和功能，甚至可以照葫蘆畫瓢寫出自己的XSLT文檔。</P>
<P>我們仍然使用前面在講述CSS時用過的“學生花名冊”的例子。在這里，為了使用XSL樣式單，樣式單聲明語句應改為：</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%"><?xml-stylesheet type="text/xsl"
href="mystyle.xsl"?></TD></TR></TBODY></TABLE></CENTER></DIV>
<P>mystyle.xsl文檔如下：</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%"><?xml version="1.0" encoding="gb2312" ?>
<BR><xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/TR/REC-html40">
<P><xsl:template> <BR><xsl:apply-templates/>
<BR></xsl:template> <BR><BR><xsl:template match="/">
<BR><FONT color=#804040><HTML> <BR> <HEAD>
<BR> <TITLE>學生花名冊</TITLE>
<BR> <STYLE> .title{font-size:15pt;
font-weight:bold; color:blue }
.name{color:red}<BR> </STYLE> <BR>
</HEAD> <BR> <BODY> <BR> <P
class="title" >學生花名冊</P> </FONT><BR>
<xsl:apply-templates select="roster"/> <BR><FONT
color=#804040></BODY> <BR> </HTML>
</FONT><BR></xsl:template> <BR><BR><xsl:template
match="roster"> <BR><FONT color=#804040><TABLE BORDER="1">
<BR> <THEAD>
<BR> <TD> <B>姓名</B>
</TD><BR> <TD>
<B>籍貫</B> </TD> <BR>
<TD> <B>年齡</B> </TD>
<BR> <TD> <B>電話</B>
</TD> <BR>
</THEAD></FONT><BR> <xsl:for-each
select="student" order-by="name"> <BR><FONT
color=#804040> <TR>
<BR> <TD><B></FONT><FONT
color=#000000><xsl:value-of select="name"/></FONT><FONT
color=#804040></B></TD>
<BR> <TD></FONT><FONT
color=#000000><xsl:value-of select="origin"/></FONT><FONT
color=#804040></TD> <BR>
<TD></FONT><FONT color=#000000><xsl:value-of
select="age"/></FONT><FONT color=#804040></TD>
<BR> <TD></FONT><FONT
color=#000000><xsl:value-of select = "telephone"/></FONT><FONT
color=#804040></TD> <BR>
</TR></FONT><BR>
</xsl:for-each><BR> <FONT color=#804040></TABLE>
</FONT><BR></xsl:template>
<BR></xsl:stylesheet></P></TD></TR></TBODY></TABLE></CENTER></DIV>
<P>將上例的XML文檔用XSL樣式轉換為HTML文檔的步驟是：先用XML解釋器將XML文檔解釋成DOM對象，相當于建立了原文檔的一個節點樹。然后用XML解釋器解釋XSL文檔，用模板匹配的方法去遍歷XML節點樹，將樹中的節點按模板的設定轉換為模板指示的顯示語言，即HTML語言。
<BR><BR>為看懂上例中的XSL源碼，首先介紹一下XSL的幾條主要語句： </P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD align=middle width="30%"><STRONG>主要語句</STRONG></TD>
<TD align=middle width="50%"><STRONG>含 義</STRONG></TD></TR>
<TR>
<TD width="30%">xsl:stylesheet</TD>
<TD width="50%">聲明語句</TD></TR>
<TR>
<TD width="30%">xsl:template</TD>
<TD width="50%">相當于編程中函數的概念</TD></TR>
<TR>
<TD width="30%">xsl:template match = ""</TD>
<TD width="50%">相當于函數調用，去匹配引號中指定的節點</TD></TR>
<TR>
<TD width="30%">xsl:apply-templates</TD>
<TD width="50%">應用模板函數</TD></TR>
<TR>
<TD width="30%">xsl:apply-templates select =""</TD>
<TD width="50%">應用模板函數的調用，跳轉到引號中指定的模板</TD></TR>
<TR>
<TD width="30%">xsl:for-each select = ""</TD>
<TD width="50%">循環語句，遍歷與引號中的屬性值相同的節點</TD></TR>
<TR>
<TD width="30%">xsl:value-of select = ""</TD>
<TD width="50%">賦值語句，取出引號中指定的屬性值</TD></TR></TBODY></TABLE></CENTER></DIV>
<P>知道了上面這些語句的含義，我們就可以分析一下這段XSLT源代碼的執行過程了：
<OL>
<LI>在作過XML聲明和XSL聲明之后，樣式單利用<xsl:template>
<xsl:apply-templates/> </xsl:template>聲明XSL模板，并調用該模板。
<LI>根據<xsl:apply-templates/>，系統最先匹配XML源樹的根節點。根節點用"/"表示，它的匹配方法在一對<xsl:template
match="/">括起的源碼中聲明。按照這段代碼，首先生成帶有樣式信息的HTML文檔的開頭一段代碼: <BR>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%"><HTML> <BR> <HEAD>
<BR> <TITLE>學生花名冊</TITLE>
<BR> <STYLE> .title{font-size:15pt;
font-weight:bold; color:blue }
.name{color:red}<BR> </STYLE> <BR>
</HEAD> <BR> <BODY> <BR> <P
class="title" >學生花名冊</P>
</TD></TR></TBODY></TABLE></CENTER></DIV>
<P><BR></P>
<LI>下面，系統看到了<xsl:apply-templates
select="roster"/>的指示，于是，它在XML源樹中尋找標記為“roster”的節點進行匹配。就象函數調用一樣，現在系統跳到了用<xsl:template
match="roster">括起的“函數”中繼續生成下面的HTML代碼： <BR>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%"><FONT color=#000000> <TABLE
BORDER="1"> <BR> <THEAD>
<BR> <TD>
<B>姓名</B> </TD><BR>
<TD> <B>籍貫</B>
</TD> <BR> <TD>
<B>年齡</B> </TD> <BR>
<TD> <B>電話</B>
</TD> <BR>
</THEAD></FONT></TD></TR></TBODY></TABLE></CENTER></DIV>
<P><BR></P>
<LI>現在，系統又接到了新的指示 <xsl:for-each select="student"
order-by="name">。這條指示要求系統尋找標記為“student”的子節點，并按照“name”下的內容將這些節點排序，然后一一處理。
<LI>對于每一個“student”子樹中的內容，系統為其生成表中一行的內容。每一行包含四列，分別把標記為“name”、“origin”、“age”、“telephone”的子節點的內容填進去。其中“name”下的內容還是粗體顯示。對應到本例中的XML數據，生成的HTML代碼為:
<BR>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%"><FONT color=#000000> <TR>
<BR>
<TD><B>李華</B></TD>
<BR> <TD>河北</TD>
<BR> <TD>15</TD>
<BR> <TD>62875555</TD>
<BR> </TR></FONT>
<P><FONT color=#000000> <TR>
<BR>
<TD><B>張三</B></TD>
<BR> <TD>北京</TD>
<BR> <TD>14</TD>
<BR> <TD>82873425</TD>
<BR>
</TR></FONT></P></TD></TR></TBODY></TABLE></CENTER></DIV>
<P><BR></P>
<LI>處理完<xsl:for-each select="student"
order-by="name">中的內容，系統繼續生成HTML代碼: <BR>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%">
</TABLE></TD></TR></TBODY></TABLE></CENTER></DIV>
<P>至此，系統已處理完<xsl:template match="roster">中的所有內容，可以“函數返回”了。</P>
<LI>系統返回到<xsl:template match="/">括起的源碼中，完成HTML最后兩行代碼的生成： <BR>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD
width="100%"></BODY><BR></HTML></TD></TR></TBODY></TABLE></CENTER></DIV></LI></OL>
<P>把上面的HTML代碼串起來，就是生成的轉換結果文件，它在IE5中的瀏覽效果為：</P>
<P align=center><IMG height=312
src="image/TU000000-0403-0200-01.gif" width=255></P>
<P>匹配的過程從下面的“節點與模版匹配示意圖”看得更加清晰：</P><FONT face=宋體 size=3>
<P align=center><IMG height=224
src="image/TU000000-0403-0302-02.jpg" width=388></FONT></P>
<P>不知讀者是否記得，在第一章中，我們也給出了一個關于XSL樣式單的例子，生成了列表形式顯示的“聯系人列表”信息。現在大家就可以自己分析一下這個XSL文件所定義的模板和執行的過程了。</P></DIV>
<P></P>
<P></P></TD></TR></TBODY></TABLE>
</center>
</div>
<P></P>
<P>
<P></P></BODY></HTML>?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -