admin 管理员组文章数量: 1184232
2024年4月20日发(作者：sscanf 堆栈)
维普资讯
技术及应用 《教育信息化》编辑部：ｍｉｓ＠ｍｏｃ．ｅｄｕ．ｃｎ
基于 的Ｗｅ ｂ页面树形组件的
设计与实现
垦管理干部学院信息中心
中图分类号：ＴＰ３１１ 文献标识码：Ｂ
张瑞华
文章编号：１６７１－７２０１（２００６）０４－００７２—０２
一
、
引言 ＨＴＭＬ页面。ＸＳＬＴ文件可以是预先定义的，也可以是按照一定规
则利用程序即时生成的。在ＨＴＭＬ代码中一般使用ＣＳＳ来统一
规范界面的风格。
当组件开发基本完成，Ｓｃｈｅａ文件以及ＸＳＬＴ文件构成了组 ｍ
件的引擎，ＸＭＬ则是组件引擎的输入数据。使用者根据实际应用
按Ｓｃｈｅｍａ文件生成ＸＭＬ文件，在ＸＭＬ文件中链接Ｓｃｈｅｍａ文
件和ＸＳＬＴ文件，则浏览器在打开此ＸＭＬ文件时。调用Ｓｃｈｅｍａ
文件对ＸＭＬ文件进行数据有效性检查，通过后再调用ＸＳＬＴ文
件对ＸＭＬ文件进行解析，以得到最终含有组件的页面。图１就是
组件实现的流程图。
在开发基于Ｗｅｂ的应用程序中。经常要使用树形目录系
统。在开发网络课程考试系统中，利用ＸＭＬ技术开发了树形组
件，此组件在浏览器中具有一定的视觉表现，显示指定的信息，
并能够与客户进行交互。开发完成的组件可以交给控件的使用
者直接利用，使用者只需要提供待显示的信息。由组件加以相应
的处理，最终在浏览器中显示符合要求的界面。这样就实现了数
据与应用的分离，便于扩展与维护。在编写基于ｗｅｂ的应用程
序中，实现数据与应用分离较为合适的技术为ＸＭＬ。利用ＸＭＬ
技术中的ＤＴＤ或Ｓｃｈｅｍａ定义用户数据的结构，ＸＭＬ文件保存
待显示的数据，ＸＳＬＴ文件完成生成树形界面的最终任务。
二、树形组件的实现步骤
第一步，对需要实现的界面组件进行外观设计，决定其在
ＨＴＭＬ页面中如何表示，信息如何显示；然后抽取组件的属性，比
如文字的大小和颜色、组件的背景图、控制组件行为的参数等，需
要在组件中显示的信息也作为属性看待。这些属性形成组件的属
性列表，并注明哪些属性可以由使用者指定。记录下组件应该支
持的交互操作，以便将来实现它。
有了组件的属性，就可以开始使用Ｓｃｈｅｍａ定义组件的结构。
用面向对象的方法将组件属性一一转化为Ｓｃｈｅａ中的元素。或 ｍ
多个组件属性作为元素属性集合于Ｓｃｈｅｍａ一个元素中。定义
Ｓｃｈｅｍａ文件时，应充分利用Ｓｃｈｅｍａ的各种功能，比如，必须要指
定的组件属性可以设置元素属性ｕｓｅ＝ ｒｅｑｕｉｒｅｄ ，有缺省值的组件
属性可以设置ｄｅｆａｕｌｔ＝ ＜缺省值＞ ，等等。不用使用者定义的属性
可以不定义在Ｓｃｈｅｍａ中。
圈１组件实现流程圈
三、树形组件的实现实例
１．树形组件的设计
一
个典型的树形组件类似Ｗｉｎｄｏｗｓ资源管理器中左侧的资
源树。其特点是通过直观的树形表示数据间的层次关系，由图标
指示数据的属性和状态，使用者可以通过展开、折叠树中的节点
灵活地显示指定的数据，并通过选择某个节点来进行相应的操
作。
第二步，对组件应该实现的交互功能进行编码，一般通过脚
本来实现。利用脚本函数或脚本对象封装复杂的代码实现是比较
好的方法。
第三步，将实现组件交互功能的脚本代码、实现组件外观的
ＨＴＭＬ代码放置于一个ＸＳＬＴ文件中；如果按照模块化的方法。
将这些内容放置于不同的ＸＳＬＴ文件中，并用一个主ＸＳＬＴ文件
引用它们即可。此ＸＳＬＴ文件检索ＸＭＬ文件中定义的组件属性。
树形组件的外观中包括４个主要部分。即节点图标、节点文
本、节点展开折叠把柄以及节点连接虚线，其中图标、展开折叠把
柄以及连接虚线将使用图片来表现。
树形组件主要的交互功能有二：节点的展开、折叠以及节点
的选择。任一节点的展开、折叠可通过显示、隐葳此节点的所有子
节点来实现。对于节点的选择功能。通过对节点图标以及节点文
通过对属性值的适当处理，将包含信息、参数、属性的ＸＭＬ文件
转换为包含具有外观、显示相应数据、有交互功能的组件的
维普资讯
《教育信息化》发行部：ｃｙｌ＠ｍｏｅ．ｅｄｕ．ｃｎ
本的鼠标点击事件进行编程，或将节点文本设置为链接即可实
现。
节点文本用于显示信息，通过ＨＴＭＬ的ｆｏｎｔ元素可以方便
技术及应用
＜ｘｓｌ：ｖａｒｉａｂｌｅ ｎｇｎｌｅ＝”ｐａｒｅｎｔ”ｓｅｌｅｃｔ ”ｃｏｕｎｔ（ｐａｒｅｎｔ：：Ｎｏｄｅ）”／＞
＜ｘｓｌ：ｖａｒｉａｂｌｅ ｎａｌｌｌｅ＝”ｃｈｉｌｄｒｅｎ”ｓｅｌｅｃｔ＝”ｃｏｕｎｔ（．／Ｎｏｄｅ）”／＞
＜ｘｓｌ：ｖａｒｉａｂｌｅ ｎａｌｌｌｅ＝”ｓｉｂｌｉｎｇ”ｓｅｌｅｃｔ＝”ｃｏｕｎｔ（．／ｆｏｌｌｏｗｉｎｇ一￣ｂｌｉｎｇ：
Ｎｏｄｅ）”／＞
地得到各种表现的文本。
２．具体实现
下列代码示范了使用ｔａｂｌｅ元素显示一个节点：
＜ｔａｂｌｅ ｂｏｒｄｅｒ＝”０”ｃｅｌｌｓｐａｃｉｎｇ ”０”ｃｅｌｌｐａｄｄｉｎｇ＝”０”＞
＜汀＞
完成了对树形组件的大致设计，可以生成Ｓｃｈｅｍａ文件。在
Ｓｃｈｅｍａ中。定义一个根元素Ｔｒｅｅ，对应于整个组件。Ｔｒｅｅ元素下定
义４个子元素：Ｎｏｄｅ、Ｂａｃｋｇｒｏｕｎｄ、ＤｅｆａｕｌｔＴａｒｇｅｔ．Ｊｓｃ却ｔＦｕｎｃｔｉｏｎ。定
义Ｔｒｅｅ元素的Ｓｃｈｅｍａ代码如下：
＜ｘｓ：ｄｅｍｅｎｔ ｎａｌｌｌｅ＝”Ｔｒｅｅ”＞
＜ｘｓ：ｃｏｍｐｌｅｘＴｙｐｅ＞
＜ｘｓ：ｓｅｑｕｅｎｃｅ＞
＜ｘｓ：ｅｌｅｍｅｎｔ ｒｅｆ＝”Ｎｏｄｅ’Ｉ／＞
＜ｔｄ＞＜ｉｍｇ ｂｏｒｄｅｒ ”０”ｓｒｃ ”ｐｈｏｔｏ１．ｇ ＞＜／ｔｄ＞
＜ｔｄ＞＜ｉｒｎｇ ｂｏｒｄｅｒ：”０”ｉｄ＝”ａｒｒａｙ
ｌ”ｓｒｃ ”ｐｈｏ￣２．ｇｉｅ’＞＜／ｔｄ＞
＿
ｒｃ ”ｐｈｏｔｏ３．ｇｉｅ’＞＜／ｔｄ
＜ｔｄ＞＜ｉｒｎｇ ｂｏｒｄｅｒ＝”０”ｉｄ＝”ａｒｒａｙ
２”ｓ
＿
＜ｔｄ ｎｏｗｒａｐ＞＜ｆｏｎｔ ｉｄ＝”ａｒｒａｒｙ＿３”＞ＸＭＬ＜／ｆｏｎｔ＞＜／ｔｄ＞
＜／汀＞
＜Ｉｍｂ￣＞
＜ｘ￣：ｅｌｅｍｅｎｔ ｒｅｆ＝”Ｂａｃｋｇｒｏｕｎｄ”ｍｉｎＯｃｃｕｒｓ ”０”／＞
＜ｘｓ：ｅｌｅｍｅｎｔ ｒｅｆ＝”ＤｅｆａｕｌｔＴａｒｇｅｔ”ｍｉｎＯｃｃｕｒｓ ”０”／＞
在生成节点的ＨＴＭＬ代码时，有一个关键点是为每个节点
指定一个唯一的关键字，经过适当的处理后关键字分别用于指
定节点图标、节点文字的ＩＤ．这些ＩＤ可以作为参数传递给脚本
函数。以便控制ＨＴＭＬ元素。下列ＸＳＬＴ代码根据Ｎｏｄｅ元素在
ＸＭＬ文件中的顺序生成～个唯一的关键字保存于变量ＮｏｄｅｌＤ
中：
＜ｘｓ：ｅｌｅｍｅｎｔ ｒｅｆ ’＇ＪｓｃｒｉｐｔＦｕｎｃｔｉｏｎ”
ｍａｘＯｃｃｕｒｓ＝”ｕｎｂｏｕｎｄｅｄ”／＞
＜／ｘｓ：ｓｅｑｕｅｎｃｅ＞
＜／ｘｓ：ｃｏｍｐｌｅｘＴｙｐｅ＞
＜／ｘｓ：ｅｌｅｍｅｎｔ＞
ｍｉｎＯｃｃｕｒｓ ”０”
＜ｘｓｌ：ｖａｒｉａｂｌｅ ｎａｍｅ＝”ＮｏｄｅｌＤ”ｓｅｌｅｃｔ＝”ｇｅｎｅｒａｔｅ—ｉｄ（．、”／＞
Ｂａｃｋｇｒｏｕｎｄ用于定义组件的背景图；ＤｅｆａｕｌｔＴａｒｇｅｔ定义了组
件中所有链接的缺省目标窗口；ＪｓｃｒｉｐｔＦｕｎｃｔｉｏｎ元素用于定义脚本
函数，可多次应用以定义多个脚本函数，这些脚本函数可以由
Ｎｏｄｅ元素的Ａｃｔｉｏｎ、ＯｎＣｌｉｃｋ属性调用，以完成用户自定义的功
能。
Ｓｃｈｅｍａ文件和ＸＳＬＴ文件创建后，就可以用来处理ＸＭＬ文
件。使用者只要生成ＸＭＬ文件，并在ＸＭＬ中引用些ＸＳＬＴ文件，
则在ＩＥ浏览器中打开此ＸＭＬ文件时．将显示出一个树形组件。
下面是一个ＸＭＬ文件的片断：
＜Ｔｒｅｅ＞
Ｔｒｅｅ元素的Ｎｏｄｅ子元素对应于组件中的根节点，在此Ｎｏｄｅ
元素下．可以递归定义任意数量的Ｎｏｄｅ元素，从而形成了一个节
＜Ｎｏｄｅ Ｔｅｘｔ＝”课程”Ｅｘｐａｎｄｅｄ＝”ｔ／＇ｕｅ”Ｉｍａｇｅ＝”ｉｍａｇｅ／
ｐｈｏｔｏ３．ｇｉｅ’Ｅｘｐａｎｄｅｄｌｍａｇｅ＝”ｉｍａｇｅ／ｐｈｏｔｏ４．ｇｉｅ’＞
点树。
下一步是生成ＸＳＬＴ文件。ＸＳＬＴ文件中首先定义一些常
量．比如ｉｍｇＯｐｅｎＦｏｌｄｅｒ值指示了展开节点的图标的ＵＲＬ等。
＜Ｎｏｄｅ Ｔｅｘｔ＝”财会专业”Ｔｉｐ＝”Ｔｅｓｔ Ｔｉｐ”＞
＜Ｎｏｄｅ Ｔｅｘｔ＝”会计基础”Ａｃｔｉｏｎ＝”Ａｃｃｏｕｎｔ ｔｓｅｔ．ａｓｐ”／＞
＜／Ｎｏｄｅ＞
定义这些常量有利于保持ＸＳＬＴ文件的简洁以及可读性．也便
于维护。用于控制节点展开、折叠的脚本函数也包含在ＸＳＬＴ
中。
＜Ｎｏｄｅ Ｔｅｘｔ＝．．计算机应用专业”＞
＜Ｎｏｄｅ Ｔｅｘｔ＝”网页制作”Ａｃｔｉｏｎ＝”ｈｏｍｅｐａｇｅ＿ｔｅｓｔ．ｓａｐ”／＞
＜／Ｎｏｄｅ＞
＜／Ｎｏｄｅ＞
ＸＳＬＴ文件将对ＸＭＬ元素进行处理以生成ＨＴＭＬ代码。比
如．如果ＸＭＬ文件中定义了Ｂａｃｋｇｒｏｕｎｄ元素，下面的ＸＳＬＴ代码
．
＜ＤｅｆａｕｌｔＴａｒｇｅｔ＞ｍａｉｎ＜／ＤｅｆａｕｌｔＴａｒｇｅｔ＞
＜／Ｔｒｅｅ＞
・
将生成一行ＨＴＭＬ代码．指示ＨＴＭＬ页面的背景图片：
＜ｓｔｙｌ￣＞ｂｏｄｙ｛ｂａｃｋｇｒｏｕｎｄ—ｉｍａｇｅ：ｕｒｌ（＜ｘｓｌ：ｖａｌｕｅ—ｏｆ ｓｅｌｅｃｔ ’
四、结束语
使用ＸＭＬ技术并结合ＨＴＭＬ以及脚本技术．以模块化、对
象化的思想来开发、设计类似树形组件的Ｗｅｂ页面组件非常合
适。而页面组件的开发及组件库的建立．也必将在页面设计以及
Ｂａｃｋｇｒｏｕｎｄ”／＞）｝＜／ｓｔｙｌｅ＞
利用ＸＳＬＴ模板递归处理ＸＭＬ文件中所有Ｎｏｄｅ元素以生
成对应的ＨＴＭＬ代码。对每个Ｎｏｄｅ元素．ＸＳＬＴ主要完成两部
分工作：一是节点本身的显示．二是定义ｄｉｖ元素包含其所有子
节点。节点本身的显示又包括显示节点连接虚线、节点展开折
叠把柄、节点图标以及节点文本。组件利用ＨＴＭＬ中的ｔａｂｌｅ、ｔｄ
元素规范、定位这些图片和文字，若ＸＭＬ的Ｎｏｄｅ元素中没有
定义节点的图标．将使用ＸＳＬＴ文件中定义的缺省图标显示。
Ｂ／Ｓ开发等活动中极大地提高代码的可重用性，提高编码效率，提
高系统可维护性，降低系统维护成本。◎
参考文献：
…１ Ｆａｂｉｏ Ａｒｃｉｎｉｅｇａｓ著．ＸＭＬ开发指南【Ｍ】．天宏工作室译，北京：清华
大学出版社．２００３．
在这个处理过程中，获取节点相关信息是必需的，下列ＸＳＬＴ
代码分别获得当前Ｎｏｄｅ元素父节点、子节点以及后续兄弟节
点的个数：
［２】ＸＭＬ Ｓｃｈｅｍａ．ｈｔｔｐ：ｌｌｗｗｗ．ｗ３．ｏｒｇ／ＸＭＬ／Ｓｃｈｅｍａ／．
【３１ ＸＭＬ ｄｅｖｅｌｏｐｍｅｍ ｈｉｓｔｏｒｙ．ｈｔｔｐ：ｌｌｗｗｗ．ｗ３．ｏｒｇ／ＸＭＬ／ｈｉｓｔ２００２
２０ｏ６年４月一 ｏ
版权声明：本文标题：基于XML的Web页面树形组件的设计与实现 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1713564373a640971.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论