用XML和XSLT进行高级的Web UI设计

最新推荐文章于 2023-07-25 15:24:05 发布

shaily

最新推荐文章于 2023-07-25 15:24:05 发布

阅读量729

点赞数

分类专栏： javascript专辑文章标签： xml xslt web ui xsl stylesheet

javascript专辑专栏收录该内容

63 篇文章 0 订阅

订阅专栏

创建目录树 本文要求读者熟悉JScript，MSXML，XSL/XSLT，DOM。下载例子代码简介 XML和XSL/XSLT是当今越来越流行的一种数据处理技术。本文是系列文章的第一篇，介绍如何用XML和XSL/XSLT设计和创建目录树。后续的每一篇文章都将介绍如何用XML和XSL/XSLT设计和创建一个特定的高级Web 应用程序用户界面对象。本文创建的目录树层次可以是无限制的。其建立机制是通过特定的XSL风格页将定义好的目录树XML文件转换成满足要求的HTML推送给客户端浏览器（IE5.5+）显示。客户端负责处理所有对目录的操作，如展开/收缩、最大化/最小化子目录和整个目录结点。目录树结构介绍与建立大多数Web页面对象一样，用XML/XSLT创建目录树的方法有很多，关键是确定目录树的结构，如图一是本文创建的一个目录树例子：

图一嵌套的目录树结构目录树中使用线条主要是为了有一个较好的可视化效果。但反过来会影响性能。有100个项的树大概要用300个图像来显示实体间的关系。尽管可以使用缓冲和预先加载，但在DOM中仍然犹如单个对象。不使用线条，而用简单的缩进可以说明父子之间的关系。本文中拟使用不带线条的树结构。描述目录树结构的XML 文件目录树的结构根据需要可以是多种多样的。XML为我们提供了无数的可能性来描述树型目录界面的结构。你所选择的格式直接影响XSL风格页的行为和客户的操作。本文所选则的目录树格式比较适用于XSL进行递归处理，它能很好地满足和实现无限深度的目录树的需要。本文范例构造的XML文档包含一个根元素"tree"，这个根元素下只有一个元素"entity"。可以把它看成是目录树的一个节点，整个树的结构是通过在每一层的entity元素的"contents"子元素中嵌套的entity元素来实现的。下面是"entity"元素中包含的关键所有元素或属性的清单。

名称	类型	描述
id	属性	目录节点元素（entity）的id号，唯一标示一个节点
description	元素	显示给用户的文本，目录节点元素的描述
onClick	元素	客户端触发onClick事件的函数名
image	元素	当目录节点被关闭或出于非选中状态时要显示的图像
imageOpen	元素	当目录节点打开时显示的图像
contents	元素	包含目录节点元素，其内容用以确定目录节点元素是否有子元素

在这个树结构中，用entity元素来添加与每一个树节点有关的特定数据。这些特定的数据可以是entity所表示的数据库记录的ID。在后续文章中，我们还将探讨如何创建目录节点的上下文菜单。我们将添加另外一个元素"oncontextmenu"到entity元素中。下面的XML是本文所使用的目录树结构XML文件。这是一个静态的XML文件，在实际使用中，它可能是一个从数据库记录查询中产生出来的XML文件。

<?xml version="1.0" encoding="gb2312"?>
<tree>
  <entity id="e1">
    <description>在线杂志</description>
    <image>images/book.gif</image>
    <imageOpen>images/bookOpen.gif</imageOpen>
    <contents>
      <entity id="e2">
        <description>第十二期</description>
        <image>images/book.gif</image>
        <imageOpen>images/bookOpen.gif</imageOpen>
        <onClick></onClick>
        <contents>
          <entity id="e3">
            <description>组件对象模型</description>
            <image>images/book.gif</image>
            <imageOpen>images/bookOpen.gif</imageOpen>
            <onClick></onClick>
            <contents>
              <entity id="e4">
                <description>OLE 编程</description>
                <image>images/paper.gif</image>
                <imageOpen>images/paper.gif</imageOpen>
                <onClick></onClick>
                <contents/>
              </entity>
              <entity id="e5">
                <description>ATL编程</description>
                <image>images/book.gif</image>
                <imageOpen>images/bookOpen.gif</imageOpen>
                <onClick></onClick>
	          <contents>
	            <entity id="e51">
	              <description>OLE 编程</description>
	              <image>images/paper.gif</image>
	              <imageOpen>images/paper.gif</imageOpen>
	              <onClick></onClick>
	              <contents/>
	            </entity>
	            <entity id="e52">
	              <description>ATL编程</description>
	              <image>images/paper.gif</image>
	              <imageOpen>images/paper.gif</imageOpen>
	              <onClick></onClick>
	              <contents/>
	            </entity>
	          </contents>
              </entity>
            </contents>
          </entity>
          <entity id="e3">
            <description>dotNet框架</description>
            <image>images/book.gif</image>
            <imageOpen>images/bookOpen.gif</imageOpen>
            <onClick></onClick>
            <contents>
              <entity id="e4">
                <description>C# 编程</description>
                <image>images/paper.gif</image>
                <imageOpen>images/paper.gif</imageOpen>
                <onClick></onClick>
                <contents/>
              </entity>
              <entity id="e5">
                <description>数据库编程</description>
                <image>images/paper.gif</image>
                <imageOpen>images/paper.gif</imageOpen>
                <onClick></onClick>
                <contents/>
              </entity>
            </contents>
          </entity>
        </contents>
      </entity>
      <entity id="e2">
        <description>第十三期</description>
        <image>images/book.gif</image>
        <imageOpen>images/bookOpen.gif</imageOpen>
        <onClick></onClick>
        <contents>
          <entity id="e3">
            <description>组件对象模型</description>
            <image>images/book.gif</image>
            <imageOpen>images/bookOpen.gif</imageOpen>
            <onClick></onClick>
            <contents>
              <entity id="e4">
                <description>OLE 编程</description>
                <image>images/paper.gif</image>
                <imageOpen>images/paper.gif</imageOpen>
                <onClick>www.vckbase.com/index.html</onClick>
                <contents/>
              </entity>
              <entity id="e5">
                <description>ATL编程</description>
                <image>images/paper.gif</image>
                <imageOpen>images/paper.gif</imageOpen>
                <onClick>www.vckbase.com/index.html</onClick>
                <contents/>
              </entity>
            </contents>
          </entity>
          <entity id="e3">
            <description>dotNet框架</description>
            <image>images/book.gif</image>
            <imageOpen>images/bookOpen.gif</imageOpen>
            <onClick></onClick>
            <contents>
              <entity id="e4">
                <description>C# 编程</description>
                <image>images/paper.gif</image>
                <imageOpen>images/paper.gif</imageOpen>
                <onClick></onClick>
                <contents/>
              </entity>
              <entity id="e5">
                <description>数据库编程</description>
                <image>images/paper.gif</image>
                <imageOpen>images/paper.gif</imageOpen>
                <onClick></onClick>
                <contents/>
              </entity>
            </contents>
          </entity>
        </contents>
      </entity>
    </contents>
  </entity>
</tree>

上面这个XML文件名为tree.xml，包含在可下载的例子代码中。下面我们来讨论如何在客户端浏览器中显示这个目录结构。 XSLT 式样文件图一就是用式样文件XSLT转换XML的结果，其代码全文如下，它是应用到目录树XML文档的标准XSL风格页：

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" language="JavaScript">
<xsl:template match="tree">
  <xsl:apply-templates select="entity"/>
</xsl:template>

<xsl:template match="entity">
  <div οnclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false" οndragstart="return false">
  <xsl:attribute name="image"><xsl:value-of select="image"/></xsl:attribute>
  <xsl:attribute name="imageOpen"><xsl:value-of select="imageOpen"/></xsl:attribute>
  <xsl:attribute name="open">false</xsl:attribute>
  <xsl:attribute name="id">f<xsl:value-of select="@id"/></xsl:attribute>
  <xsl:attribute name="open">false</xsl:attribute>
  <xsl:attribute name="STYLE">
    padding-left: 20px;
    cursor: hand;
    <xsl:if expr="depth(this) > 2">
      display: none;
    </xsl:if>
  </xsl:attribute>
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td valign="middle">
          <img border="0" id="image">
            <xsl:attribute name="SRC">
              <xsl:value-of select="image"/>
            </xsl:attribute>
          </img>
        </td>
        <td valign="middle" nowrap="true">
        <xsl:attribute name="STYLE">
          padding-left: 7px;
          font-family: Verdana;
          font-size: 11px;
          font-color: black;
        </xsl:attribute>
        <xsl:value-of select="description"/></td>
      </tr>
    </table>
  <xsl:apply-templates select="contents/entity"/>
  </div>
</xsl:template>

</xsl:stylesheet>

客户端操作为了让目录树按照我们自己的意图运行，还需要在客户端做一些工作：例如初始化、实现展开、收缩目录节点等功能……。归纳起来就是下面这些脚本函数： Initialize 初始化 Expand 展开单个节点 Collapse 收缩单个节点 Expand All (Maximize) 展开所有节点 Collapse All (Minimize) 收缩所有节点下面是以上五个客户端操作的详细脚本代码。它们都放在文件tree.js中。

function initialize() {
  var xmlDoc
  var xslDoc

  xmlDoc = new ActiveXObject(''''Microsoft.XMLDOM'''')
  xmlDoc.async = false;

  xslDoc = new ActiveXObject(''''Microsoft.XMLDOM'''')
  xslDoc.async = false;

  xmlDoc.load("tree/tree.xml")
  xslDoc.load("tree/tree.xsl")

  folderTree.innerHTML = xmlDoc.documentElement.transformNode(xslDoc)
}

function clickOnEntity(entity) {
  if(entity.open == "false") {
    expand(entity, true)
  }
  else {
    collapse(entity)
  }
  window.event.cancelBubble = true
}

function expand(entity) {
  var oImage

  oImage = entity.childNodes(0).all["image"]
  oImage.src = entity.imageOpen
  for(i=0; i < entity.childNodes.length; i++) {
    if(entity.childNodes(i).tagName == "DIV") {
      entity.childNodes(i).style.display = "block"
    }
  }
  entity.open = "true"
}

function collapse(entity) {
  var oImage
  var i

  oImage = entity.childNodes(0).all["image"]
  oImage.src = entity.image

  // 收缩和隐藏字节点
  for(i=0; i < entity.childNodes.length; i++) {
      if(entity.childNodes(i).tagName == "DIV") {
        if(entity.id != "folderTree") entity.childNodes(i).style.display = "none"
        collapse(entity.childNodes(i))
      }
    }
  entity.open = "false"
}

function expandAll(entity) {
  var oImage
  var i

  expand(entity, false)

  // 展开子节点
  for(i=0; i < entity.childNodes.length; i++) {
    if(entity.childNodes(i).tagName == "DIV") {
      expandAll(entity.childNodes(i))
    }
  }
}

随着Web技术的进步，维护Web应用程序的状态逐渐成为可能。更多的处理和操作将从服务器端移到客户端进行，从而减轻服务器的工作负担，使得我们的程序界面越来越复杂，同时，应用程序的可用性和性能也需要不断的改进。希望本文能抛砖引玉，共同探讨目前比较时髦的XML/XSL技术，利用它们来提高Web应用程序界面的质量。我们将在下一篇文章中继续我们的主题，讨论如何在目录树中创建上下文菜单。（

shaily

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用XML和XSLT进行高级的Web UI设计

创建目录树本文要求读者熟悉JScript，MSXML，XSL/XSLT，DOM。下载例子代码简介 XML和XSL/XSLT是当今越来越流行的一种数据处理技术。本文是系列文章的第一篇，介绍如何用XML和XSL/XSLT设计和创建目录树。后续的每一篇文章都将介绍如何用XML和XSL/XSLT设计和创建一个特定的高级Web 应用程序用户界面对象。本文创建的目录树
复制链接

扫一扫