用XSL与XML实现多级菜单 - 吹雪 - JavaEye技术网站

来源:百度文库 编辑:神马文学网 时间:2024/03/29 16:32:58

XML是可扩展标记语言(地球人都知道),其文档内容具有良好的可读性。我们通常在项目中保存一些系统配置数据,也就它来做一些数据的交换。
 
而XSL本身也是xml,这是一种可扩展的样式表语言。 它为xml的数据表示和数据的转换定义一组标准的标签语言。我们可以用 xsl来控制xml数据显示为特定格式或者转换为特定媒体。
 
下面写个简单的例子来看看xml与xsl的关系(这个例子来自于Microsoft的xml文档)。我们有一个xml文档,:

Xml代码
  1.     
  2. XML(hello.xml)    
  3.  version="1.0"?>    
  4.  type="text/xsl" href="hello.xsl"?>     
  5.   
  6.    An XSLT Programmer  
  7.    Hello, World!  
  8.     
  9.    

 

这个xml文档第2行是指定处理文档用的样式表文件。后面的是文档数据。下面的是XSL文件:

Xml代码
  1.     
  2. XSL(hello.xsl)    
  3.  version="1.0"?>    
  4.  xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">    
  5.     match="/hello-world">  
  6.          
  7.            
  8.              
  9.            
  10.            
  11.             

     select="greeting"/>

      
  12.              select="greeter"/>  
  13.            
  14.          
  15.      
  16.     match="greeter">  
  17.        
    from    
  18.             select="."/>  
  19.        
  
  •      
  •     
  •    
  •  

    我们先将这两个文件存在同一个目录。因为在xml文档中指定了样式表文件,当我们从IE中打开xml文件时,IE会自动调用相应的XSL文件来处理xml数据。从xsl文档中我们看到很多熟悉的文字,没错,它们就是html标签。我们通过这个xsl文件将xml数据以html形式表现出来。这时我们会从IE中看到 
     Hello,World!
    from An XSLT Programmer
    XSL语言功能强大而奇妙。从上面的例子中,我们可以初步了解到,一个xsl文档中使用了很多类似"xsl:xxxxx"这样的标签,这些标签就是xsl语言的部分。一个xsl文档至少是由一个模板组成的,xsl的解析引擎会负责将xml数据按xsl的模板定义来转换。就像上面的例子,就有两个模板:


    模板可以用来处理特定的xml数据,通过match属性来指定。match属性里的是一个xpath的表达式(xpath在本文先不作讨论),通过它可以匹配相关的xml节点给模板来处理。我们看到在模板中,大部分内容都是html的内容,只有少量的这样的标签,非标签的内容,在xsl引擎解析时,会原文保留。当遇到标签才做处理。像上面的例子中,有一个标签,它是将select属性指定的greeting节点输入到当前位置。通过xml文档我们看到greeting节点值是“Hello, World!”,输出时它正好在html的

    标签当时,所以它当然以大号的黑体字来显示了。
     
    常用的xsl标签有很多,常用到的一般有:
    xsl:value-of (选择节点并输出)
    xsl:apply-templates (对匹配的节点应用相应的模板)
    xsl:template (模板定义)
    xsl:if (条件判断)
    xsl:choose (多条件分支)
    xsl:for-each (循环)
     
    利用这些xsl的标签,我们可以实现一定的‘数据结构+算法’来完成一部分工作,所以我们说,xsl是一种程序语言,关于xsl 更详细的学习,你可以看Microsoft的XML SDK文档,它对xml, xsl甚至xpath的内容讲的非常详细(感谢Microsoft提供这么好的文档)。
     
    下面回到正题,如何用xml/xsl实现一个多级树形菜单。
    我来看一下树形菜单的xml文档类型定义:








    通过这个定义可以看到,我们的菜单xml结构是由一个tree根结点组成。tree节点可以包含多个menu节点。而每个menu节点也可以包含多个menu节点。这样就达到多级树形结构的要求。下面来看这个xml结构的例子:

     

    Xml代码
    1.     
    2.   
    3.       
    4.          text="一级菜单" icon="xxx.gif" folded="false">  
    5.              text="二级菜单1" icon="yyy1.gif" url="www.yyy1.com" target="_blank"/>  
    6.              text="二级菜单2" icon="yyy2.gif" url="www.yyy2.com" target="_blank"/>  
    7.           
    8.       
    9.   
    10.    

     

     menu节点具有5种属性,分别是:
    text,用来作为菜单的显示文字
    icon,菜单的图标
    url, 点击菜单后的地址
    target, 显示地址的目标框架
    folded, 如果是菜单还有子菜单的话,此属性决定菜单是否折叠。
    其中,text属性是必须,其它的根据需要取舍。
     
    根据我们的DTD, 我们可以把这个菜单定义的任意复杂,可以嵌套任意层,程序实现上看起来有点复杂。还好,我们可以使用 xsl做一个模板,让模板自动递归调用,显示任意级数的菜单。我们的模板是这样:

     

     

    Xml代码
    1.     
    2.   
    3.      match="menu">  
    4.              bgcolor="#FFFFFF">  
    5.                  style="padding-left: 15px">  
    6.                      style="cursor: default">  
    7.                          name="onclick">toggle( select="generate-id   
    8. (@text)"/>,flagimg select="generate-id(@text)"/>)    
    9.                          test="count(./*)>0">  
    10.                               
    11.                                  test="@folded='true'">  
    12.                                      src="c.gif">  
    13.                                          name="id">flagimg select="generate-id   
    14. (@text)"/>    
    15.                                       
    16.                                   
    17.                                   
    18.                                      src="o.gif">  
    19.                                          name="id">flagimg select="generate-id   
    20. (@text)"/>    
    21.                                       
    22.                                   
    23.                               
    24.                           
    25.                           
    26.                              test="@url">  
    27.                                   
    28.                                      name="href"> select="@url"/>  
    29.                                      name="target">    
    30. select="@target"/>    
    31.                                      test="@icon">  
    32.                                          border="0">  
    33.                                              name="src">    
    34. select="@icon"/>    
    35.                                           
    36.                                       
    37.                                      select="@text"/>  
    38.                                   
    39.                               
    40.                               
    41.                                  test="@icon">  
    42.                                      border="0">  
    43.                                          name="src">    
    44. select="@icon"/>    
    45.                                       
    46.                                   
    47.                                  select="@text"/>  
    48.                               
    49.                           
    50.                     

      
  •                       
  •                          name="style">  
  •                               
  •                                  test="@folded='true'">display:none  
  •                                 display:block  
  •                               
  •                           
  •                          name="id"> select="generate-id(@text)"/>  
  •                           
  •                     
  •   
  •                   
  •               
  •       
  • >    
  •     
  •     
  •    
  •  

    这个模板中,有一个地方用了标签,它会自动找到当前menu节点下所有的子节点并调用相应的 template. 由于menu节点下还是menu节点,当然就调用了模板自身,这就实现了所谓的递归,解决了无限级数的问题。