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

isiqi

浏览: 16485286 次
性别:
来自: 济南

最近访客更多访客>>

nison

hellohank

wangyy

devcang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-07 ( 335)
2012-06 ( 252)
2012-05 ( 362)
更多存档...

XSL XML CSS 设计模式浏览器

一.XSL入门

1.XSL---XML的样式表

HTML网页使用预先确定的标识(tags)，这就是说所有的标记都有明确的含义，例如<p>是另起一行<h1>是标题字体。所有的浏览器都知道如何解析和显示HTML网页。
然而，XML没有固定的标识,我们可以建立我们自己需要的标识，所以浏览器不能自动解析它们，例如<table>可以理解为表格，也可以理解为桌子。由于XML的可扩展性，使我们没有一个标准的办法来显示XML文档。
为了控制XML文档的显示，我们有必要建立一种机制，CSS就是其中的一种，但是XSL(eXtensibleStylesheetLanguage)是显示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文档的一部分：
程序代码:

<?xmlversion="1.0"encoding="ISO8859-1"?>
<CATALOG>
<CD>
<TITLE>EmpireBurlesque</TITLE>
<ARTIST>BobDylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
...

然后我们将下面的XSL文件作为HTML的模板将XML数据转换为HTML文件：

程序代码:

<?xmlversion=''1.0''?>
<xsl:stylesheetxmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:templatematch="/">
<html>
<body>
<tableborder="2"bgcolor="yellow">
<tr>
<th>Title</th>
<th>Artist</th>
</tr>
<xsl:for-eachselect="CATALOG/CD">
<tr>
<td><xsl:value-ofselect="TITLE"/></td>
<td><xsl:value-ofselect="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:templatematch="/">语句表示XML的源文档在当前目录下。

如果为XML文档加上XSL样式表，看下面代码第2行，你的浏览器就可以精确的将XML文档转换为HTML文件。

程序代码:

<?xmlversion="1.0"encoding="ISO8859-1"?>
<?xml-stylesheettype="text/xsl"href="cd_catalog.xsl"?>
<CATALOG>
<CD>
<TITLE>EmpireBurlesque</TITLE>
<ARTIST>BobDylan</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)例子的部分代码：

程序代码:

下面是完整的XSL文件(cd_catalog.xsl)：

程序代码:

注意，现在XML文件还没有加入XSL样式表，还没有被转换成HTML文件。

下面是用JavaSript来实现最后转换的HTML代码：

程序代码:

<html>
<body>
<scriptlanguage="java script">
//LoadXML
varxml=newActiveXObject("Microsoft.XMLDOM")
xml.async=false
xml.load("cd_catalog.xml")
//LoadtheXSL
varxsl=newActiveXObject("Microsoft.XMLDOM")
xsl.async=false
xsl.load("cd_catalog.xsl")
//Transform
document.write(xml.transformNode(xsl))
</script>
</body>
</html>

上面代码中使用了Javascript，如果你不知道如何写JavaScript，您最好专门学习一下。

第一段代码建立一个MicrosoftParser(XMLDOM)解析的对象，并将XML文档读入内存；第二段代码建立另外一个对象并导入XSL文档；最后一行代码将XML文档用XSL文档转换，并将结果输出到HTML文件中。

随着Internet的发展，越来越多的信息进入互联网，信息的交换、检索、保存及再利用等迫切的需求使HTML这种最常用的标记语言已越来越捉襟见肘。HTML将数据内容与表现融为一体，可修改性、数据可检索性差，而XML借鉴了HTML与数据库、程序语言的优点，将内容与表现分开，不仅使检索更为方便，更主要的是用户之间数据的交换更加方便，可重用性更强。

　　XML是一种元标记语言，没有许多固定的标记，为WEB开发人员提供了更大的灵活性。当我们使用HTML时，标记只是简单的表示内容的显示形式，而与表示的内容没有任何关联，为文档的进一步处理带来极大的不便。比如要表示个人简历，用HTML的表示方式如下：

程序代码:

<HTML>
<BODY>
<TABLEborder=1cellspacing=0>
<TH>姓名<TD>禹希初<TH>性别<TD>男<TH>生日<TD>1977.5
<TR>
<TH>技能<TDcolspan=5>数据库设计与维护、WEB开发
</TABLE>
</BODY>
</HTML>

上例在浏览器中的样子

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

程序代码:

<?xmlversion="1.0"encoding="GB2312"?>
<resume>
<name>禹希初</name>
<sex>男</sex>
<birthday>1977.5</birthday>
<skill>数据库设计与维护、WEB开发</skill>
</resume>

上例在浏览器中的样子(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}

说明：

　　以上均为CSS样式，建议读者参考有关资料熟悉CSS，在以后学习中必须用到，此处由于篇幅关系不作介绍。建立文件resume.css后，在个人简历.xml文件的第一行后添加以下文字：
程序代码:

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

说明：

　　此处表示引用一个外部CSS样式文件，其中type规定样式类型（可取值为text/css或text/xsl），href规定文件路径。

　　保存文件，再以IE5.0打开文件。怎么样？格式有些不一样吧。好象还不令人满意，文档内容是清晰了，但显示效果比HTML编写的文档就差得多了，XML编写的文档就只能以这种方式显示吗？！

提示：

　　1.为了更好的理解与掌握XML，建议大家熟悉HTML4.0与CSS2.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呀？如果有一种程序性的语句来循环读取有多好啊！

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

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

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

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

　　语法：
程序代码:

<xsl:for-eachselect="pattern"order-by="sort-criteria-list">

　　属性：

　　1.select

　　根据XSL样式查询考察上下文以决定哪类结点集（满足select条件）使用此样式描述。作为一种简化的表示就是，如果你想对文档中的某一种标记的内容的显示方式进行格式化，就可以将让select等于此元素的标记名。例如欲对标记xml_mark进行格式化，即可用如下方式表示：
程序代码:

<xsl:for-eachselect="xml_mark">

</xsl:for-each>

　　2.order-by

　　以分号（;）分隔、作为排序标准的列表。在列表元素前添加加号（+）表示按此标记的内容以升序排序，添加减号（-）表示逆序排序。作为一种简化的表示就是，排序标准列表就是由select规定的标记的子标记的序列，每个标记之间以（;）分隔。

　　2、<xsl:value-of>

　　<xsl:for-each>模式只是选取节点，并没有取出节点的值，好比猴子只是爬到了树的某个枝干上，那么就用<xsl:value-of>来摘"胜利果实"吧！

　　语法：
程序代码:

<xsl:value-ofselect="pattern">

提取节点的值

　　属性：
　　select用来与当前上下文匹配的XSL式样。简单的讲，如果要在XSL文档某处插入某个XML标记（假定是xml_mark标记）的内容，可用如下方式表示：
程序代码:

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

或
程序代码:

<xsl:value-ofselect="xml_mark"/>

示例：

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

程序代码:

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

　　修改为：
程序代码:

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

　　然后建立一个新文件：resume.xsl，其内容如下：
程序代码:

<?xmlversion="1.0"encoding="GB2312"?>
<HTMLxmlns:xsl="http://www.w3.org/TR/WD-xsl">
<HEAD>
<TITLE>个人简历</TITLE>
</HEAD><BODY>
<xsl:for-eachselect="resume">
<P/>
<TABLEborder="1"cellspacing="0">
<CAPTIONstyle="font-size:150%;font-weight:bold">
个人简历
</CAPTION>
<TR>
<TH>姓名</TH><TD><xsl:value-ofselect="name"/></TD>
<TH>性别</TH><TD><xsl:value-ofselect="sex"/></TD>
<TH>生日</TH><TD><xsl:value-ofselect="birthday"/></TD>
</TR>
<TR>
<TH>技能</TH><TDcolspan="5"><xsl:value-ofselect="skill"/></TD>
</TR>
</TABLE>
</xsl:for-each>
</BODY>
</HTML>

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

　　完成这些以后再来让我们看一下辛勤劳动的成果，怎么样？效果不错吧。更酷还在后头呢。现在我们对文件（个人简历.xml）作进一步的修改：

　　1.在标记<resume>前添加一个新标记<document>；

　　2.将标记对<resume></resume>之间的内容（包括这一对标记）复制并粘贴在其后，并在最后用<document>结束。

　　3.以Notepad.exe打开文件resume.xsl，在标记<HTML>之后添加文字：<xsl:for-eachselect="document">；在标记</HTML>之前添加文字：</xsl:for-each>，保存文件。

　　4.在浏览器中打开文件（个人简历.xml）。看到了什么？两份个人简历！
肖斌 ® - XIaoBIN © - {xiaobin.NET} ™

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

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

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

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

　　装集装箱－－书写模板（块）：<xsl:template>

　　语法：
程序代码:

<xsl:templatematch="node-context"language="language-name">

　　属性：

　　match──确定什么样的情况下执行此模板。作为一种简化的说明，在此处使用标记的名字；其中最上层模板必须将match设为"/"。

　　language──确定在此模板中执行什么脚本语言，其取值与HTML中的SCRIPT标记的LANGUAGE属性的取值相同，缺省值是Jscript。

　　<xsl:template>用match属性从XML选取满足条件的节点，征对这些特定的节点形成一个特定输出形式的模板。

　　吊集装箱上船－－调用模板（块）：<xsl:apply-templates>

　　语法：
程序代码:

<xsl:apply-templatesselect="pattern"order-by="sort-criteria-list">

属性：

　　select──确定在此上下文环境中应执行什么模板，即选取用<xsl:template>标记建立的模板（块）。
　　order-by──以分号（;）分隔的排序标准，通常是子标记的序列。

示例：

　　以个人简历为例，为便于处理我们希望"技能"中每一项都用标记对<skill></skill>括起来，有多少项技能就有多少个这种标记对，经过修改后的个人简历XML文档内容如下：

程序代码:

<?xmlversion="1.0"encoding="GB2312"?>
<?xml:stylesheettype="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，采用模板的形式，其内容如下：

程序代码:

<?xmlversion="1.0"encoding="GB2312"?>
<xsl:stylesheetxmlns:xsl="http://www.w3.org/TR/WD-xsl">

<xsl:templatematch="/">
<HTML><HEAD><TITLE>个人简历</TITLE></HEAD>
<BODY>
<xsl:apply-templatesselect="document/resume"/>
</BODY>
</HTML>
</xsl:template>

<xsl:templatematch="resume">
<TABLEborder="1"cellspacing="0">
<CAPTION>个人简历（
<xsl:eval>formatIndex(childNumber(this),"I")</xsl:eval>
）</CAPTION>
<xsl:apply-templatesselect="name"/>
<xsl:apply-templatesselect="sex"/>
<xsl:apply-templatesselect="birthday"/>
<TR/>
<TD>技能</TD><TDCOLSPAN="5">
<TABLEcellspacing="0">
<xsl:apply-templatesselect="skill"/>
</TABLE>
</TD>
</TABLE>
<BR/>
</xsl:template>

<xsl:templatematch="name"><TD>姓名</TD>
<TD><xsl:value-of/></TD>
</xsl:template>

<xsl:templatematch="sex"><TD>性别</TD>
<TD><xsl:value-of/></TD>
</xsl:template>

<xsl:templatematch="birthday"><TD>生日</TD>
<TD><xsl:value-of/></TD>
</xsl:template>

<xsl:templatematch="skill">
<TR><TD><xsl:value-of/></TD></TR>
</xsl:template>
</xsl:stylesheet>

上例在浏览器中的样子(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:ifexpr="script-expression"language="language-name"test="pattern">

　　属性：

　　expr──脚本语言表达式，计算结果为"真"或"假"；如果结果为"真"，且通过test，则在输出中显示其中内容（可省略此项属性）。

　　language──expr属性中表达式的脚本语言类型，其取值与HTML标记SCRIPT的LANGUAGE属性的取值相同，缺省为"JScript"。

　　test──源数据测试条件。

　　示例：

　　此处以一份报表为例，文件名为report.xml，其内容如下：

程序代码:

#ff0000

分享到：