📄 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 + -