XML应用系列:XSLT入门
来源:互联网 发布:数据恢复后照片打不开 编辑:程序博客网 时间:2024/06/05 14:53
以XSL为开始
XSL代表着可扩充样式表语言(EXtensible Stylesheet Language)。
因为基于XML样式表语言的需要,万维网联盟(W3C)开始发展XSL。
层叠式样式表(CSS)= HTML样式表
HTML使用预定的标签,标签的含义比较容易理解。
在HTML中,<table>元素定义了一个表格,浏览器知道如何去显示它。
给HTML元素定义样式是比较容易的。通过使用CSS,告诉浏览器对特殊字体和颜色的元素进行显示,是非常容易的。
XSL=XML样式表
XML不使用预定的标签(我们可以使用任何我们自己喜欢的标签名字),这些标签的含义比较难以理解。
<table>元素可以表示HTML表格,一种设备,或者别的一些东西,因此浏览器不知道如何去显示它们。
XSL描述的是如何显示XML文档。
XSL-超越样式表语言(More Than a Style Sheet Language)
XSL由3部分组成:
- XSLT - a language for transforming XML documents
XSLT - 转变XML文档的语言。 - XPath - a language for navigating in XML documents
XPath-对XML文档进行操作的语言。 - XSL-FO - a language for formatting XML documents
XSL-FO - 格式化XML文档的语言。
什么是XSLT?
- XSLT stands for XSL Transformations
XSLT代表XSL转换(XSL Transformations) - XSLT is the most important part of XSL
XSLT是XSL最重要的部分 - XSLT transforms an XML document into another XML document
XSLT可以把XML文档转换成另一个XML文档 - XSLT uses XPath to navigate in XML documents
XSLT通过XPath操作XML文档 - XSLT is a W3C Recommendation
XSLT是一种W3C参考标准
XSLT=XSL转换(XSL Transformations)
XSLT是XSL的最重要的一部分。
XSLT用于把XML文件转换成另一份XML文件,或者转换成另一种被浏览器所识别的诸如HTML和XHTML类型的文件。通常情况下,XSLT是通过把每个XML元素转换成(X)HTML文件来完成的。
通过XSML,你可以从已输出的文件里添加/移除元素和属性。你也可以把元素重新排列和分类,执行测试语句,决定是隐藏还是显示元素,或者实现其它更多的功能。
对于描述转换过程,可以形象的描述为:XSLT把XML源树转(XML source-tree)换成XML结果树(XML result-tree)。
XSLT对于XPath的使用
XSLT通过对XPath的使用来找寻XML文档中的信息。XPath用于操作XML文件中的元素和属性。
如果你想先学习XPath,请先阅读XPath教程。
如何使它运行?
在转换过程中,XSLT通过XPath来定义部分应该和一个或更多预定的模板相匹配的源文件。当一个匹配找到后,XSLT将会把相匹配的部分源文件转换成结果文档。
XSLT是一个网络标准
XSLT在1999年11月16日成为W3C参考标准
以上内容引自:XSLT标准参考手册.chm,XSLT标准参考手册.chm目录如下:
较全面的介绍了XSLT的基础内容,包括:基本概念、模板、取值、循环、分类、判断、选择、使用模板,常用函数等。
更详细的介绍可以查阅《XSLT从入门到精通》。
接下来我主要讲讲在Microsoft Visual studio 下的XSLT入门应用知识。
在VS的WebSite项目里添加新建项,可以选择“XSLT文件”:
以jQueryCheckTree的XML+XSLT实现为例:
未使用XML+XSLT前页面的HTML如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
>
<
head
>
<
title
>CheckTree v 0.2 by JJ Geewax</
title
>
<
script
src
=
"jquery-1.2.6.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"jquery.checktree.js"
type
=
"text/javascript"
></
script
>
<
script
>
$(document).ready(function(){
$("ul.tree").checkTree({
/*
// You can add callbacks to the expand, collapse, check, uncheck, and halfcheck
// events of the tree. The element you use as the argument is the LI element of
// the object that fired the event.
onExpand: function(el) {
console.log("expanded ", el.find("label:first").text());
},
onCollapse: function(el) {
console.log("collapsed ", el.find("label:first").text());
},
onCheck: function(el) {
console.log("checked ", el.find("label:first").text());
},
onUnCheck: function(el) {
console.log("un checked ", el.find("label:first").text());
},
onHalfCheck: function(el) {
console.log("half checked ", el.find("label:first").text());
}*/
/*
// You can set the labelAction variable to either "check" or "expand"
// to change what happens when you click on the label item.
// The default is expand, which expands the tree. Check will toggle
// the checked state of the items.
labelAction: "expand"
*/
/*
// You can also change what happens when you hover over a label (over and out)
onLabelHoverOver: function(el) { alert("You hovered over " + el.text()); },
onLabelHoverOut: function(el) { alert("You hovered out of " + el.text()); }
*/
});
});
</
script
>
<
link
type
=
"text/css"
rel
=
"stylesheet"
href
=
"checktree.css"
/>
</
head
>
<
body
>
<
h1
>CheckTree v 0.2</
h1
>
<
div
style
=
"width: 600px; margin: 0 auto; padding: 15px; border: 1px solid #28f; background-color: #def; text-align: center; font-size: 20px; font-weight: bold;"
>
CheckTree is on Google Code!
<
div
style
=
"font-weight: normal; font-size: 15px; margin-top: 10px;"
>
Visit the CheckTree GoogleCode project page: <
a
href
=
"http://jquery-checktree.googlecode.com"
>http://jquery-checktree.googlecode.com</
a
>
</
div
>
</
div
>
<
h2
>Demo</
h2
>
<
p
>
Here is a quick demo of the code which renders an unordered list and gives an example of how to format your
hierarchy to be rendered appropriately by CheckTree.
</
p
>
<
ul
class
=
"tree"
style
=
"margin-left: 15px;"
>
<
li
>
<
input
type
=
"checkbox"
>
<
label
>United States</
label
>
<
ul
>
<
li
>
<
input
type
=
"checkbox"
name
=
"geo"
value
=
"pennsylvania"
>
<
label
>Pennsylvania</
label
>
</
li
>
</
ul
>
</
li
>
<
li
>
<
input
type
=
"checkbox"
>
<
label
>Canadia</
label
>
<
ul
>
<
li
>
<
input
type
=
"checkbox"
name
=
"geo"
value
=
"province in canadia"
>
<
label
>Province In Canadia</
label
>
</
li
>
</
ul
>
</
li
>
<
li
>
<
input
type
=
"checkbox"
name
=
"geo"
value
=
"afghanistan"
>
<
label
>Afghanistan</
label
>
</
li
>
<
li
>
<
input
type
=
"checkbox"
>
<
label
>Sealand</
label
>
<
ul
>
<
li
>
<
input
type
=
"checkbox"
name
=
"geo"
value
=
"tree_city"
>
<
label
>Tree City</
label
>
</
li
>
<
li
>
<
input
type
=
"checkbox"
name
=
"geo"
value
=
"oil_province"
>
<
label
>Oil Province</
label
>
<
ul
>
<
li
>
<
input
type
=
"checkbox"
name
=
"geo"
value
=
"oil_city"
>
<
label
>Oil City</
label
>
</
li
>
</
ul
>
</
li
>
<
li
>
<
input
type
=
"checkbox"
value
=
"fun_province_checkbox"
>
<
label
>Fun Province</
label
>
<
ul
>
<
li
>
<
input
type
=
"checkbox"
name
=
"geo"
value
=
"fun_city"
>
<
label
>Fun City</
label
>
</
li
>
<
li
>
<
input
type
=
"checkbox"
name
=
"geo"
value
=
"not_fun_city"
>
<
label
>Not Fun City</
label
>
</
li
>
</
ul
>
</
li
>
</
ul
>
</
li
>
</
ul
>
</
body
>
</
html
>
分离出XML文件如下(只取了部分数据测试用):
<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/xsl" href="XSLTSampleFile.xsl"?>
<data>
<tree tlabel="United States" >
<tree tlabel="Pennsylvania" tname="geo" tvalue="pennsylvania"></tree>
</tree>
<tree tlabel="United States" >
<tree tlabel="Pennsylvania" tname="geo" tvalue="pennsylvania"></tree>
</tree>
<tree tlabel="United States" >
<tree tlabel="Pennsylvania" tname="geo" tvalue="pennsylvania"></tree>
</tree>
</data>
你会发现这个XML文件中设置了一个XSLT文件“XSLTSampleFile.xsl”,其内容如下(使用XSTL写的一个递归调用模板的方法将XML数据转换成需要的HTML):
001
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
002
<
xsl:stylesheet
version
=
"1.0"
xmlns:xsl
=
"http://www.w3.org/1999/XSL/Transform"
>
003
<
xsl:template
match
=
"/"
>
004
<
html
>
005
<
head
>
006
<
title
>CheckTree v 0.2 by JJ Geewax</
title
>
007
<
script
src
=
"jquery_checktree/jquery-1.2.6.min.js"
type
=
"text/javascript"
></
script
>
008
<
script
src
=
"jquery_checktree/jquery.checktree.js"
type
=
"text/javascript"
></
script
>
009
<
script
>
010
$(document).ready(function(){
011
$("ul.tree").checkTree({
012
/*
013
// You can add callbacks to the expand, collapse, check, uncheck, and halfcheck
014
// events of the tree. The element you use as the argument is the LI element of
015
// the object that fired the event.
016
onExpand: function(el) {
017
console.log("expanded ", el.find("label:first").text());
018
},
019
onCollapse: function(el) {
020
console.log("collapsed ", el.find("label:first").text());
021
},
022
onCheck: function(el) {
023
console.log("checked ", el.find("label:first").text());
024
},
025
onUnCheck: function(el) {
026
console.log("un checked ", el.find("label:first").text());
027
},
028
onHalfCheck: function(el) {
029
console.log("half checked ", el.find("label:first").text());
030
}*/
031
/*
032
// You can set the labelAction variable to either "check" or "expand"
033
// to change what happens when you click on the label item.
034
// The default is expand, which expands the tree. Check will toggle
035
// the checked state of the items.
036
labelAction: "expand"
037
*/
038
/*
039
// You can also change what happens when you hover over a label (over and out)
040
onLabelHoverOver: function(el) { alert("You hovered over " + el.text()); },
041
onLabelHoverOut: function(el) { alert("You hovered out of " + el.text()); }
042
*/
043
});
044
});
045
</
script
>
046
047
<
link
type
=
"text/css"
rel
=
"stylesheet"
href
=
"jquery_checktree/checktree.css"
/>
048
049
</
head
>
050
<
body
>
051
<
h1
>CheckTree v 0.2</
h1
>
052
053
<
div
style
=
"width: 600px; margin: 0 auto; padding: 15px; border: 1px solid #28f; background-color: #def; text-align: center; font-size: 20px; font-weight: bold;"
>
054
CheckTree is on Google Code!
055
<
div
style
=
"font-weight: normal; font-size: 15px; margin-top: 10px;"
>
056
Visit the CheckTree GoogleCode project page: <
a
href
=
"http://jquery-checktree.googlecode.com"
>http://jquery-checktree.googlecode.com</
a
>
057
</
div
>
058
</
div
>
059
060
<
h2
>Demo</
h2
>
061
<
p
>
062
Here is a quick demo of the code which renders an unordered list and gives an example of how to format your
063
hierarchy to be rendered appropriately by CheckTree.
064
</
p
>
065
066
<
ul
class
=
"tree"
style
=
"margin-left: 15px;"
>
067
<
xsl:call-template
name
=
"createTreeView"
>
068
<
xsl:with-param
name
=
"treePar"
select
=
"/data/tree"
></
xsl:with-param
>
069
</
xsl:call-template
>
070
</
ul
>
071
</
body
>
072
</
html
>
073
</
xsl:template
>
074
075
<
xsl:template
name
=
"createTreeView"
>
076
<
xsl:param
name
=
"treePar"
></
xsl:param
>
077
<
xsl:for-each
select
=
"$treePar"
>
078
<
xsl:call-template
name
=
"CreatTreeNode"
>
079
<
xsl:with-param
name
=
"treePar"
select
=
"$treePar"
></
xsl:with-param
>
080
</
xsl:call-template
>
081
</
xsl:for-each
>
082
</
xsl:template
>
083
084
<
xsl:template
name
=
"CreatTreeNode"
>
085
<
xsl:param
name
=
"treePar"
></
xsl:param
>
086
<
li
>
087
088
<
input
type
=
"checkbox"
>
089
<
xsl:if
test
=
"$treePar/@tname!=''"
>
090
<
xsl:attribute
name
=
"name"
>
091
<
xsl:value-of
select
=
"$treePar/@tname"
/>
092
</
xsl:attribute
>
093
</
xsl:if
>
094
<
xsl:if
test
=
"$treePar/@tvalue!=''"
>
095
<
xsl:attribute
name
=
"value"
>
096
<
xsl:value-of
select
=
"$treePar/@tvalue"
/>
097
</
xsl:attribute
>
098
</
xsl:if
>
099
</
input
>
100
101
<
label
>
102
<
xsl:value-of
select
=
"$treePar/@tlabel"
/>
103
</
label
>
104
105
106
<
xsl:variable
name
=
"innerTreePar"
select
=
"$treePar/tree"
/>
107
<
xsl:if
test
=
"$innerTreePar"
>
108
<
ul
>
109
<
xsl:call-template
name
=
"CreatTreeNode"
>
110
<
xsl:with-param
name
=
"treePar"
select
=
"$innerTreePar"
>
111
</
xsl:with-param
>
112
</
xsl:call-template
>
113
</
ul
>
114
</
xsl:if
>
115
116
</
li
>
117
118
</
xsl:template
>
119
</
xsl:stylesheet
>
代码比较简单,查阅前面提到的手册和电子书就可以较快的理解。
接下来,我详细介绍一下,在VS下写这段XSLT的过程(包括调试跟踪等过程)。
我们需要得到的HTML就是第一段页面源码中的<ul class="tree" style="margin-left: 15px;">中的内容,而我们需要的数据就是XML中的数据。
现在结果和已知数据都有了,怎么根据不同的数据得到对应的checktree的HTML呢?(即实现动态加载checktree,数据来自XML,实现工具是XSLT)
只用分析checktree中哪些是动态的哪些是静态的,然后使用XSLT即可较快的实现。
在编写XSLT的过程,VS的智能提示同样会提示XSLT的相关元素。
查看页面效果的时候,有时会发现与预想的效果不一样。这时可以在指定的代码行设置断点,单步调试跟踪问题。分析是XML数据还是XSLT的问题。
点击工具栏中的“调试XSLT”按钮(上图已标注),会提示提供XML文件,点击“确定”,选择对应的XML文件即可。
然后再次点击“调试XSLT”,即可进行调试,调试的方法与调试C#的方法一样,使用F5、F11、F10,监视变量等即可达到目的。
第一次调试XSLT文件的时候指定的XML文件路径会被自动记录在文件属性中,以后在XSLT文件的属性项里可以更改设置,也可以指定输出文件的格式。
输出为对应的HTML文件的时候,在弹出的输出页中可以通过右键菜单项中的“查看源”查看对应的HTML。
指定格式的效果与XSLT中的使用output元素控制输出格式目的一样。
我使用XSLT也才一个月的时间,分享一些小收获:
1.常用的函数有position()即取节点索引(从1开始)、normalize-space()即去字符串首尾空格、not(arg)即判断一个表达式是否为false等;
2.常用的一个运算是mod即取余,而除法运算符是div,其他运算与常用语言一样;
3.判断等于只需要一个等号,大于、小于有时需要写成>、< ,像&这样的特殊符号必需写在<![CDATA[]]>里,脚本写在<![CDATA[]]>不仅写特殊符号没问题,排版也不会因为格式化文档而丢失;
4.value-of元素间的内容,如果有常量字符串,常量字符串后不可换行,不然结果字符串中也会有换行;
5.自定义变量variable或者参数param,使用的时候前面加$符号,取属性值在属性名前加@符号且属性名区分大小写;
6.设置属性可以不适用value-of,直接在属性名的等号后的双引号里加{},将表达式写在花括号里即可;
7.Xpath表达式里直接写//代表从顶层开始找到//后制定的节点名;
8.[]括号用来加筛选条件,直接写数字代表索引(即position(),从1开始),在判断里用关键字and或or表示逻辑关系且与或,而[]里用|表示或。
- XML应用系列:XSLT入门
- XML应用系列:C#-XSLT开发
- xslt 应用系列三(转载)
- XML应用系列:使用C#开发基于XSLT的代码生成器
- xslt+xml
- xml & xslt
- XML+XSLT
- XML XSLT
- xslt入门
- XSLT入门
- XSLT入门
- xslt入门
- xslt入门
- xslt应用系列四 .net之应用篇初级
- 【XML入门系列】第02章_XML简介及应用
- 初学XML入门经典记下笔记之XSLT
- XML学习之XSLT:一、介绍和入门
- XSLT转换XML小结
- Jackrabbit OCM(二)——ObjectContentManager对象
- jackrabbit OCM(三)——映射应用1
- RegExp 对象
- Springle+EHCache 分布式缓存开发(三)
- Starting MySQL....The server quit without updating PID file 处理方法
- XML应用系列:XSLT入门
- Activity生命周期
- 数据库SQL自动执行脚本
- 抓取iframe内数据(C#)
- 数据库中聚簇索引与非聚簇索引的区别
- MyEclipse Sub Code Generator
- 在BSP 中修改LCD 类型及串口输出功能
- 吉利吉利2/KAGeXpress 的游戏通过cocos2d-x 移植 ios/android的可行性
- 让控件响应mousemove