📄 xsl.htm
字号:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb_2312-80">
<TITLE>XSL和XML实例</TITLE>
<style type="text/css">
<!--
.normal10 { font-size: 11pt}
.normal9 { font-size: 9pt}
p{ font-size: 9pt}
a{ text-decoration: none }
a:hover{ color:Red;text-decoration:underline }
a {
font-size:9pt;
COLOR: cornflowerblue;
FONT-FAMILY: "新细明体", "宋体";
FONT-WEIGHT: bold
}
-->
</style>
<link rel="stylesheet" href="../../Global.css" tppabs="http://www.xml.org.cn:8188/Global.css"></HEAD>
<BODY>
<p ALIGN="CENTER">[<a href="../../default.asp.htm" tppabs="http://www.xml.org.cn:8188/default.asp" target="_parent">返回首页</a>][<a href="../application.htm" tppabs="http://www.xml.org.cn:8188/application/application.htm" target="_parent">返回应用</a>]</p>
<table width="85%" border="0" align="center" height="3644">
<tr>
<td width="22%" height="20"> </td>
<td width="53%" height="20">
<h2 align="center"><font color="#6633FF"><b><font color="#3333FF">用XSL表现你的XML</font></b></font></h2>
</td>
<td width="25%" height="20"><a name="top"></a></td>
</tr>
<tr>
<td colspan="3" height="2">
<div align="right">
<p align="center"> 作者:<a href="mailto:onecenter@yahoo.com">孙一中</a><br>
<br>
<font color="#FF0033">下载源代码:<a href="XSLDEMO.zip" tppabs="http://www.xml.org.cn:8188/application/XSL/XSLDEMO.zip">XSLDEMO.ZIP</a>
</font>(3.41k)</p>
</div>
</td>
</tr>
<tr>
<td colspan="3" height="3280"><font face="宋体" lang="ZH-CN" size=3> </font>
<rev></rev>
<p><font lang="ZH-CN"><span class="normal105">我们已经知道，XML文件用来存放数据，而如何表现XML则要借助其他的手段。我们现在推荐您使用IE5.0。如果您在IE5<span class="normal105">.0中直接打开</span></span></font><span class="normal105"><span class="normal105">
一个XML文件，那</span></span><span class="normal105">么你看到的只是XML的源代码；要进一步以更灵活更丰富的形式来表示，就要借助于CSS或XSL。如何使用CSS,建议阅读<a href="../../../www.w3.org/TR/1998/REC-CSS2-19980512/index.htm" tppabs="http://www.w3.org/TR/1998/REC-CSS2-19980512/">CSS2规范(W3C建议)</a>
. 这里我们想介绍如何用XSL来表现您的XML.</span></p>
<p><span class="normal105">首先我们给出一个XML文件(stock-sorter.xml)的简单例子：<br>
<font face="宋体" lang="ZH-CN"><?xml:stylesheet type="text/xsl" href="simple.xsl"?><br>
<portfolio xmlns="x-schema:portfolio-schema.xml"><br>
<description>Technology Stock Index</description><br>
<date>1999-08-13T15:56:00</date><br>
<br>
<stock><br>
<symbol>AOL</symbol><br>
<name>america online inc</name><br>
<price>92.250</price><br>
<change>-1.125</change><br>
<percent>-1.20</percent><br>
<volume>4.99</volume><br>
</stock><br>
<br>
<stock><br>
<symbol>CSCO</symbol><br>
<name>cisco sys inc</name><br>
<price>50.688</price><br>
<change>-1.688</change><br>
<percent>-3.22</percent><br>
<volume>18.23</volume><br>
</stock><br>
<br>
<stock><br>
<symbol>DELL</symbol><br>
<name>dell computer corp</name><br>
<price>53.000</price><br>
<change>-3.063</change><br>
<percent>-5.46</percent><br>
<volume>32.95</volume><br>
</stock><br>
...... <br>
<br>
</portfolio> <br>
<br>
</font>其中元素portfolio是在portfolio文件中定义的:<br>
<br>
<font face="Albertus (W1)"><?xml version="1.0" ?><br>
<Schema xmlns="urn:schemas-microsoft-com:xml-data" xmlns:dt="urn:schemas-microsoft-com:datatypes"><br>
<ElementType name="date" dt:type="dateTime"/><br>
<ElementType name="description"/><br>
<ElementType name="symbol"/><br>
<ElementType name="name"/><br>
<ElementType name="price" dt:type="fixed.14.4"/><br>
<ElementType name="change" dt:type="fixed.14.4"/><br>
<ElementType name="percent" dt:type="fixed.14.4"/><br>
<ElementType name="volume" dt:type="fixed.14.4"/><br>
<ElementType name="portfolio" content="eltOnly"><br>
<group minOccurs="0" maxOccurs="1"><br>
<element type="description" /><br>
</group><br>
<group minOccurs="0" maxOccurs="1"><br>
<element type="date" /><br>
</group><br>
<group minOccurs="1" maxOccurs="1"><br>
<element type="stock" /><br>
</group><br>
</ElementType><br>
<ElementType name="stock" content="eltOnly"><br>
<element type="symbol" /><br>
<element type="name" /><br>
<element type="price" /><br>
<element type="change" /><br>
<element type="percent" /><br>
<element type="volume" /><br>
</ElementType><br>
</Schema></font></span></p>
<blockquote>
<blockquote>
<p> </p>
</blockquote>
</blockquote>
<p><span class="normal105"><font face="宋体" lang="ZH-CN">在stock-sorter.xml文件中第一行的处理指令(Process
Instruction)： <?xml:stylesheet type="text/xsl" href="simple.xsl"?>
表示由simple.xsl来规定XML的表现方式。当我们在IE中打开该XML时，浏览器根据其中所规定的XSL的位置去得到该XSL，并通过XSL
处理器将XML和XSL结合成为XSL定义的输出形式。这里我们将其输出形式定为HTML格式，是为了方便在浏览器中直接显示。好,让我们来看简单的XSL文件是怎样写的：<br>
</font></span></p>
<p align="JUSTIFY"> </p>
<p><span class="normal105">Simple.xsl:<br>
<br>
<font face="宋体" lang="ZH-CN"><?xml version="1.0"><br>
<HTML xmlns:xsl="http://www.w3.org/TR/WD-xsl"><br>
<BODY STYLE="font-family:Arial, helvetica, sans-serif; font-size:9.5pt;background-color:#FEEEEE"><br>
<xsl:for-each select="portfolio/stock"><br>
<DIV STYLE="background-color:teal; color:white; padding:4px"><br>
<SPAN STYLE="font-weight:bold; color:white"><br>
<xsl:value-of select="name"/></SPAN><br>
- <xsl:value-of select="price"/><br>
</DIV><br>
<DIV STYLE="margin-left:10px; margin-bottom:1em; font-size:9pt"><br>
<xsl:value-of select="description"/><br>
<SPAN STYLE="font-style:italic"><br>
(change:<xsl:value-of select="change"/> )<br>
</SPAN><br>
</DIV><br>
</xsl:for-each><br>
</BODY><br>
</HTML></font></span></p>
<p><span class="normal105"><font face="宋体">以上的代码很容易理解，关键是采用选择语句(for-each
select)在XML树结构中进行选择，并把得到的结果树(Result Tree)包容于HTML中(value-of select).其实这只是简单的XSL语句.XSL的脚本语言叫做ECMAScript,它是在JavaScript的基础上发展的。如果我们要改变</font><font face="宋体" lang="ZH-CN">stock-sorter.xml的表现，只要在stlye
sheet的href中指定另外的XSL文件。<br>
<br>
在<a href="../../../www.w3.org/TR/WD-xsl" tppabs="http://www.w3.org/TR/WD-xsl">XSL的规范</a>定义了XML的匹配模板(Template),设置匹配字符,则处理时将从XML的根节点(Root
Node)搜索匹配的节点.如:<xsl: template match="/">.通常构成HTML格式的模板，它可以只是XSL的一部分。您还可以写XSL的脚本，举个示例：</font></span></p>
<p><span class="normal105"><font face="宋体" lang="ZH-CN"><xsl:script><![CDATA[<br>
function Demo(node)<br>
{<br>
total = 0;<br>
volumes = node.selectNodes("/portfolio/stock/volume");<br>
for (v = volumes.nextNode(); v; v = volumes.nextNode())<br>
total += v.nodeTypedValue;<br>
return formatNumber(total, "#") + " million shares";<br>
}<br>
]]></xsl:script></font></span></p>
<p><span class="normal105"><font face="宋体">还可以加XSL的注释，如：<br>
<br>
</font><font face="宋体" lang="ZH-CN"><xsl:comment><![CDATA[<br>
function sort(field)<br>
{<br>
sortField.value = field;<br>
listing.innerHTML = source.documentElement.transformNode(stylesheet);<br>
}<br>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -