分享
 
 
 

XSL/XML网页制作入门,入门到精通

王朝other·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

一. 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文档的一部分:

程序代码:

<?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文件作为HTML的模板将XML数据转换为HTML文件:

程序代码:

<?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文件。

程序代码:

<?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)例子的部分代码:

程序代码:

<?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):

程序代码:

<?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代码:

程序代码:

<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的表示方式如下:

程序代码:

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

此图片仅显示局部,请点击查看完整图片

=514)window.open(this.src);else return false;" alt="肖斌 ® - XIaoBIN © - {xiaobin.NET} ™" hspace=4 src="http://www.jxyc.gov.cn/leida/jsj/withwolf/uploadimg/20046323145219225.jpg" onload="if(this.width=514){this.style.cursor='hand'; this.previousSibling.style.display='';}" vspace=4 border=0

上例在浏览器中的样子

在这里,我们无法从标记TH、TD得知其内容表示什么,如果用XML,相应的文档(文件名:个人简历.xml)就可写成如下形式:

程序代码:

<?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>

此图片仅显示局部,请点击查看完整图片

=514)window.open(this.src);else return false;" alt="肖斌 ® - XIaoBIN © - {xiaobin.NET} ™" hspace=4 src="http://www.jxyc.gov.cn/leida/jsj/withwolf/uploadimg/20046323165463799.gif" onload="if(this.width=514){this.style.cursor='hand'; this.previousSibling.style.display='';}" vspace=4 border=0

上例在浏览器中的样子(IE5.0或更新版本)

说明:

version──规定了XML文档的版本,此处只能是1.0;

encoding── 此处规定了XML文档的编码类型,此处取值为"GB2312",也就是"简体中文"。

对比两例,使用XML我们可以做到自定义标记,用标记表明内容的含义。这样在Internet上交流资料时,为用计算机处理文档提供了极大的方便,同时我们阅读源文件时也不会被一大堆格式弄得晕头转向。

然而,由于XML并没有为标记规定显示方式,如果我们在游览器中查看以上两个文档(建议使用IE5.0或更新版本),我们将看到xml文档并没有以诸如表格的方式来显示。难道我们就不能像HTML一样显示文档吗?回答是否定的。以个人简历为例,需要另建一个格式文件说明各个标记的显示方式,其内容如下(假设文件名为resume.css):

程序代码:

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文件的第一行后添加以下文字:

程序代码:

<?xml:stylesheet type="text/css" href="resume.css"?>

<?xml:stylesheet type="text/css" href="resume.css"?>

此图片仅显示局部,请点击查看完整图片

=514)window.open(this.src);else return false;" alt="肖斌 ® - XIaoBIN © - {xiaobin.NET} ™" hspace=4 src="http://www.jxyc.gov.cn/leida/jsj/withwolf/uploadimg/20046323182357205.gif" onload="if(this.width=514){this.style.cursor='hand'; this.previousSibling.style.display='';}" vspace=4 border=0

说明:

此处表示引用一个外部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中有这样的数据:

程序代码:

<author>

<name>小禹</name>

<name>春华</name>

<name>秋实</name>

</author>

<author>

<name>小禹</name>

<name>春华</name>

<name>秋实</name>

</author>

我们要读取这三个作者名字,是一个一个地按"author/name"方法来读取吗,可有多个这样的name呀?如果有一种程序性的语句来循环读取有多好啊!

想得很对,XSL提供了这样的具有程序语言性质的语句:<xsl:for-each>

用它读取这三个作者名字的方法如下:

程序代码:

<xsl:for-each select="author/name">

……

</xsl:for-each>

<xsl:for-each select="author/name">

……

</xsl:for-each>

select,顾名思义,选取,它可以选定XML中特定唯一的标记,也可以选择某一类相同的标记,我们称之为结点集。

语法:

程序代码:

<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进行格式化,即可用如下方式表示:

程序代码:

<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 >来摘"胜利果实"吧!

语法:

程序代码:

<xsl:value-of select="pattern">

<xsl:value-of select="pattern">

提取节点的值

属性:

select用来与当前上下文匹配的XSL式样。简单的讲,如果要在XSL文档某处插入某个XML标记(假定是xml_mark标记)的内容,可用如下方式表示:

程序代码:

<xsl:value-of select="xml_mark"></xsl:value-of>

<xsl:value-of select="xml_mark"></xsl:value-of>

程序代码:

<xsl:value-of select="xml_mark"/>

<xsl:value-of select="xml_mark"/>

示例:

此处仍以上期的个人简历的作为例子,我们需要对文件(个人简历.xml)作一定修改,确切的说是将其中的第二行:

程序代码:

<?xml:stylesheet type="text/css" href="resume.css"?>

<?xml:stylesheet type="text/css" href="resume.css"?>

修改为:

程序代码:

<?xml:stylesheet type="text/xsl" href="resume.xsl"?>

<?xml:stylesheet type="text/xsl" href="resume.xsl"?>

然后建立一个新文件:resume.xsl,其内容如下:

程序代码:

<?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>

此图片仅显示局部,请点击查看完整图片

=514)window.open(this.src);else return false;" alt="肖斌 ® - XIaoBIN © - {xiaobin.NET} ™" hspace=4 src="http://www.jxyc.gov.cn/leida/jsj/withwolf/uploadimg/20046323192162750.gif" onload="if(this.width=514){this.style.cursor='hand'; this.previousSibling.style.display='';}" vspace=4 border=0

上例在浏览器中的样子(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)。看到了什么?两份个人简历!

此图片仅显示局部,请点击查看完整图片

=514)window.open(this.src);else return false;" alt="肖斌 ® - XIaoBIN © - {xiaobin.NET} ™" hspace=4 src="http://www.jxyc.gov.cn/leida/jsj/withwolf/uploadimg/20046323192162750.gif" onload="if(this.width=514){this.style.cursor='hand'; this.previousSibling.style.display='';}" vspace=4 border=0

就这样,利用XML我们可以编写内容与样式完成分离的文档!当然,XSL文件比一般的HTML文件要复杂一些,然而一旦完成则可用于格式化所有同类的XML文档。

经过前几日的学习,我们学习了XHTML文档的编写和以及三个XSL元素,已能编写相当灵活的XSL文档,今天将学习的是XSL模板的编写。我们都知道,短的文档、程序十分好读,但当规模增大后,其复杂性也以更快的速度增加。

前面我们学了<xsl:for-each>、<xsl:value-of>等,可以用它们对XML数据实现简单的格式化输出,但如果遇到比较复杂的XML格式输出,将XSL按照要求依次写下来的话,一是设计困难,可扩展性差,不利于人员之间的分工协作;另则,可修改性很差,可能会出现牵一发而动全军的情况,不利于维护。程序中模块化设计逐步细化的方法在这里得到了应用!

XSL模板将XSL的设计细化成一个个模板(块),最后再将这些模板(块)组合成一个完整的XSL;好比船与集装箱,我们不是将所有的货物一件件地堆起来,而是装在各自的集装箱中,然后再在船上将这些集装箱堆放起来。这种方法可以使你先从整体上考虑整个XSL的设计,然后将一些表现形式细化成不同的模块,再具体设计这些模块,最后将它们整合在一起,这样,将宏观与微观结合起来,符合人们条理化、规范化要求。

装集装箱--书写模板(块):<xsl:template>

语法:

程序代码:

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

语法:

程序代码:

<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文档内容如下:

程序代码:

<?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,采用模板的形式,其内容如下:

程序代码:

<?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>

此图片仅显示局部,请点击查看完整图片

=514)window.open(this.src);else return false;" alt="肖斌 ® - XIaoBIN © - {xiaobin.NET} ™" hspace=4 src="http://www.jxyc.gov.cn/leida/jsj/withwolf/uploadimg/20046323203770266.gif" onload="if(this.width=514){this.style.cursor='hand'; this.previousSibling.style.display='';}" vspace=4 border=0

上例在浏览器中的样子(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>的语法结构:

语法:

程序代码:

<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,其内容如下:

程序代码:

<?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,内容如下:

程序代码:

<?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>

此图片仅显示局部,请点击查看完整图片

=514)window.open(this.src);else return false;" alt="肖斌 ® - XIaoBIN © - {xiaobin.NET} ™" hspace=4 src="http://www.jxyc.gov.cn/leida/jsj/withwolf/uploadimg/20046323214661982.gif" onload="if(this.width=514){this.style.cursor='hand'; this.previousSibling.style.display='';}" vspace=4 border=0

上例在浏览器中的样子(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)如下:

程序代码:

<?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)内容如下:

程序代码:

<?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>

此图片仅显示局部,请点击查看完整图片

=514)window.open(this.src);else return false;" alt="肖斌 ® - XIaoBIN © - {xiaobin.NET} ™" hspace=4 src="http://www.jxyc.gov.cn/leida/jsj/withwolf/uploadimg/20046323221621355.gif" onload="if(this.width=514){this.style.cursor='hand'; this.previousSibling.style.display='';}" vspace=4 border=0

上例在浏览器中的样子(IE5.0或更新版本)

说明:在<xsl:choose>选择中,从第一个<xsl:when>开始,逐个测试,直到满足一个测试条件就将其中的内容输出,不再测试后面的条件;如果不满足任何一个条件,则输出<xsl:otherwise>中的内容。

标记对<xsl:when></xsl:when>与<xsl:otherwise></xsl:otherwise>中可嵌套<xsl:if>或<xsl:choose>。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有