XSLT入门

以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目录如下:

image

较全面的介绍了XSLT的基础内容,包括:基本概念、模板、取值、循环、分类、判断、选择、使用模板,常用函数等。

更详细的介绍可以查阅《XSLT从入门到精通》。

 

接下来我主要讲讲在Microsoft Visual studio 下的XSLT入门应用知识。

在VS的WebSite项目里添加新建项,可以选择“XSLT文件”:

Clip_41

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

你可能感兴趣的:(XSL)