第一章   绪 论

"图档结构树的设计与关联"的研究目的是用树型目录的层次结构来形象的表示不同图档之间的分类关系，并借此对图档信息进行分类、管理，同时将树型目录结构的各叶子节点与图档信息数据库内的相关信息进行关联，并能够方面的输出这些信息。
类似的树型目录结构的例子有很多，如Windows的资源管理器，帮助信息等都采用的是树型结构目录。这些和这里图档结构树所使用的原理是基本相同的。图1-1显示了简单的节点层次结构。左边是节点的抽象表示，右边是典型的树型视图表示。

图1-1 典型树型视图

该图中，最上面的（或根）节点是 A，它直接包含了节点 B 和 E。节点 B 直接包含节点 C 和 D。节点 B 和 E 组成了层次结构中第 2 代子节点，C 和 D 组成了第 3 代。树型结构根据其位置转换这个层次结构，根节点或第 1 代在左边。自第 2 代往下，为有子代的节点提供了一种展开或折叠其表示的方法，这样可以显示或隐藏其下一代子节点。除了根节点之外，所有节点都只有一个父代。不包含其它节点的节点称作叶节点。某些叶节点也许是不能包含其它节点，而其它的则刚好是空的。
图档结构树采用的原理与上面所述基本相似，由于本部分模块是一个网络应用程序的客户端程序，因此客户端大量而频繁地对服务器的访问能给服务器带来的强大的负载，为了减轻服务器的工作负载，作为浏览器端的程序拟采用JavaScript语言和HTML标记结合来实现树型目录结构，目录信息从服务器上一次下载，之后就可以完全在本地对目录树的操作，而不必再去访问服务器。
当需要访问服务器上的图档数据库时则使用Java Server Pages（JSP）通过JDBC来访问它，以此来实现将图档结构树与图档信息数据库的关联。Java语言可以运行在多种不同的服务器平台，另外通过SQL的界面使用JDBC可以轻易地对任何数据库执行SQL指令，这与数据库的种类无关，所不同的是只需调用不同的数据库驱动程序而已。在本课题中由于涉及到服务器方面的问题，因此，还需要配置服务器，这里我使用的是Apache软件基金会提供的产品TOMCAT作为服务器。Java编译工具是采用的Sun公司Java2SDK v1.3。 图档数据库，我是采用MS Access建立的。
通过使用以上的几种技术可以满足本课题的基本要求。对本课题的研究和实现可以熟悉Java的运行环境，掌握面向对象的设计思想和服务器端的配置与程序设计方法，还可以更好的理解和掌握如何使用脚本来配合超文本进行工作。

第二章 JavaScript及动态HTML元素基础

2．1 JavaScript基础

2．1．1 平台无关性
 JavaScript具有平台独立性。与插件和ActiveX控件相比，这是一个主要优点。因为对于不同的操作平台，插付和ActiveX控件需要重新编译和代码重写。例如，NetScape Navigator 可在20多个平台上运作，尽管它们大多都属于不同风格的UNIX，但是在NetScape Navigator的核心中仍需要为Windows16位、Windows32位、UNIX、 MacOS以及OS/2的系统建立控件或插件。虽然UNIX可以在多种处理器中运行（MIPS，Intel等等），WindowsNT也可以在Intel和Alpha机器上 运行，但它们距离与平台无关还有很大距离。
JavaScript的另一个优点是NetScape公司和Microsoft公司的网络服务器都有内置解释器。尽管两个公司开发的编译器风格不同，但是作为网络开发者，仍然有 在客户端使用相同语言的能力。
    平台无关性是在应用程序中使用JavaScript的首要原因。的确一些执行环境解释JavaScript的方法稍有不同，但对语言主要部分的处理是基本一致的。程序员只需要输入一次程序代码即可让不同的执行环境解释它。

2．1．2 面向对象的JavaScript
让我们先看一下在服务器端和客户端的JavaScript的内核和功能有什么不同。 两者都有在自己的运行环境中特定的对象, 因此，对象的初始化和创建在不同的时间发生。由于这个特征，应该从两个方面来看待JavaScript服务器端和客户端。最低层次的客户端JavaScript，是当一个页面被装载到浏览器中时创数个核心对象。除了这些核心对象，还有当在网页中有某些标签时所创建的派生对象。这些派生对象继承了父对象的不同特性，并允许脚本获得HTML标签的属性。图2-1清晰的表明了基本的JavaScript对象在客户端的层次。

图2-1 对象层次图
正如图表中描述的一样，所有客户端对象或是从Window（窗口）对象或是从navigator对象派生出来。考虑到JavaScript是基于对象的语言, 在给定页面上的所有对象都是在浏览器的窗口中形成，因此，所有JavaScript对象均为Window对象的后代。通过使用Window对象， 程序员可以在页面中选择不同的窗格、文本、层、表格以及许多其他的对象和特性。

2．1．3 JavaScript的浏览器对象
尽管JavaScript是基于对象的脚本设计语言，但是JavaScript并没有真正实现对象的继承关系。在JavaScript的对象之间实际上存在的是一种从属关系。从属关系涉及到两个对象在属性和方法上不存在共同点。例如，在一个典型的浏览器中，每一个下载的网页都是处在一个窗口之中的，而一个网页也同样包含了一些表单、HTML语句、Java小应用程序以及各种插件，甚至这些元素内部还会包含一些别的元素，就形成了一个分层的关系。只能认为这些表单、Java小应用程序是从属于网页的，而网页又是从属于一个特定的窗口。在从属关系中，浏览器对象Window反映的是一个完整的浏览器窗口，是其他大部分对象的共同祖先。Window对象的子对象包括Locati

3．1．3 事件句柄
事件句柄是界面对象的一个属性，以存储特定的事件处理函数的信息。每当一个事件发生时，JavaScript解释器就会自动查找界面对象中相应的事件句柄，调用注册在上面的事件处理函数。一般句柄的形式总是事件的名称前面加上前缀> <IMG border=0 height=16 src="http://www.dedecms.com/web-art/htmlbase/Javascript/20020703/parameter/folder_parent.gif" width=16>设计部门分类</a>
</DIV>
所谓关闭，就是将该节点下面的所有子节点所在的层设置为"隐藏"；所谓打开，就是将该节点下面所有的子节点所在的层设置为"显示"。由于水平的位置关系是确定的，因此不用去管它，而垂直方向的位置，由于在这里的每一个"层"都是采用的相对定位方式，即它出现在文档流中自然位置上，当位于某节点上方的节点为"隐藏"状态时，该位置将被下面的这个节点自动填补，因此，各个节点在任何状态时，再垂直位置上将始终保持紧密连接状，而不会因为某个节点的隐藏而留下空白。
为了形象具体的表现每一个节点，使用两种不同的小图标来表示两类节点，即用folder_parent.gif来表示非叶子节点，用folder_leaf.gif来表示叶子节点。由于各个非叶子节点的超链接，仅仅是用来触发Click事件以处理该节点的打开或关闭状态，而不需要链接到其他的页面，因此，这里给href标记定义了一个空操作。而对于叶子节点来说，每一个叶子节点都代表着一类具有某个相同属性的数据集合，为了显示这些数据，通过超链接将其与访问数据库的jsp文件相连结以达到对图档数据库进行分类显示。

3．2．2 计算方法

3．2．2．1 初始化
在页面被加载时，执行的是对页面的初始化，也就是将所有非父节点全部隐藏。 其具体算法如下：首先，将HTML文当中的<DIV>标签建立数组，数组的长度就是该HTML文档中所有<DIV>标签的个数。这样数组中的每一个元素就对应每一个层，也就是一个节点。然后，通过检测数组中每一个元素的classname属性是parent 还是child，以此来判断该节点是父节点还是非父节点。如果是非父节点则隐藏之，否则，检测下一个数组元素，如此循环，直至将数组所有的元素，也就是所有的节点检测完。 初始化部分代码如下所示：
   divColl = document.all.tags("DIV");        file://返回<DIV>标签数组
   for (i=0; i<divColl.length; i++) {
      whichEl = divColl(i);
      if (whichEl.className == "child")
whichEl.style.display = "n docBase="howjsp"
         defaultSessi  isWAREExpanded="true"
         isWARValidated="false "  isInvokerEnabled="true"
         isWorkDirPersistent="false" reloadable="true"/>
插入到C:\tomcat\conf\server.xml文件中的examples之后。这样工作目录就已经安装好了，启动服务器后，在浏览器中就可以访问localhost:8080/howjsp/ 下面的文件了。

5．2数据库与数据源的设置

数据库名称：Graphdoc.mdb
数据源名：  Graphdoc
用户名：    ""
用户口令：  ""
数据院描述：Graph Document

表5-1是数据库中item表的字段名称、类型、长度等属性的表述：

字段名 字段类型 字段大小 字段描述
id 数字 长整型 图档编号
graphname 文本 50 图档名称
author1 文本 20 第一设计者
author2 文本 20 第二设计者
designDep 文本 50 设计部门
place 文本 20 图档存放地点
docdate 日期/时间 / 归档日期
表5-1 item的字段类型表

5．3  JSP程序流程

JSP首先加载JDBC-ODBC桥驱动程序，然后建立与DBMS连接，连接建立后，执行SQL语句，对数据库进行操作。最后将符合要求的数据取出来，并用超文本的格式反馈给浏览器，以网页的形式显示出来。

5．3．1  与数据库建立连接
第一步是加载驱动程序：
加载驱动程序非常的简单，只需要一句代码。这里使用JDBC-ODBC桥驱动： Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); 驱动程序文档将会告诉你class name。因为当你调用class.forName的时候它已经自动加载了。当你加载了驱动程序后，那么就可以和DBMS建立连接了。
第二步是与DBMS建立链接：
看如下的代码：
Connection con=DriverManager.getConection("jdbc:odbc:graphdoc", "","");
这里因为使用JDBC-ODBC桥驱动程序，那么JDBC的URL应该是jdbc:odbc：接下来是数据源的名称。在这里，数据源的用户名为""，口令为""。当DriverManager.getConnection方法找到了建立链接的驱动程序和源，那么开始根据后面提供的用户名和口令开始与DBMS建立连接，如果通过那么连接建立完成。

5．3．2  访问数据库并将数据反馈
首先，执行SQL语句，以读出符合要求的数据。例如，这里我们要把所有设计部门为"ibm"的工程图纸全部找出来。执行如下代码：
ResultSet rs = statement.executeQuery("SELECT * FROM item where designDep=''ibm''");
然后，还要将这些数据生成超文本的形式，我们可以使用循环语句，将所有的数据纪录用表格的形式生成网页。
部分代码如下：
while (rs.next())
{
out.println("<TR><TD>"+rs.getObject("id")+"</TD>");
out.println("<TD>"+rs.getString("graphname")+"</TD>");
out.println("<TD>"+rs.getString("author1")+"</TD>");
out.println("<TD>"+rs.getString("author2")+"</TD>");
out.println("<TD>"+rs.getString("designDep")+"</TD>");
out.println("<TD>"+rs.getString("place")+"</TD>");
out.println("<TD>"+rs.getString("docdate")+"</TD></TR>");
}
当然，这些并不是一个完整的表格代码，而只是表示一行单元格的HTML标识，其余部分的用以构成完整表格的HTML是静态的，而不是有JSP来动态生成的。

 
5．3．3  工作流程

5．3．4  实现图例
 

结 论

运用JavaScript脚本语言和JavaServer Pages 这两种技术，基本上可以满足本课题的设计要求，即通过树型目录的层次结构，来对数据库中具有不同属性的数据进行分类输出，同时并将这些数据作为网页的形式反馈给浏览器，这样就可以使客户端的用户非常方便的对数据库内容进行调阅。
作为工程图纸，其分类结构一般是相对固定的，而不会有经常的变动。因此，在这里我使用的是脚本语言来实现图档结构树，这样对树的处理可以在客户端完成，从而可以减轻服务器的负担。但是由于采用的是浏览器脚本来实现的。因此，如果要改变这棵树的结构时，就不得不要修改其源文件，这是本设计中值得改进的一个问题。当然，这个问题完全可以使用后面关联部分的JSP技术来解决。譬如，可以为树建立一个数据表，每一条纪录用来表示一个节点，在每一条纪录中可以设立多个数据项来表示该节点的属性，如：这个节点所处的层、当前的状态是打开还是关闭、该节点所属的父节点 等信息，这样整个树的生成信息都在这个数据库中，当需要改变树结构时，只需要改变相应数据库内容就行了，当然这些改变并不一定要直接去修改数据库，可以通过JSP把有修改权限的用户的修改信息传递给服务器。但是，这样的话当客户端的用户数很大的时候，对服务器的访问之频繁是可想而知的。因此，以上两种方法各有优缺点。
在与数据库关联这部分，每一个叶子节点对应一个JSP文件，以完成相应的数据库操作和反馈操作。这样有一个缺点就是当节点很多时，所需要的JSP文件就需要相应的增加。这个问题可以只用一个文件来进行处理，通过节点把各自不同的参数传递给该JSP文件，以执行不同的命令，从而输出不同的结果。
综上所述，本设计基本上满足了这个课题的要求，但是还有很多地方存在不足，值得进一步改进！
 

致 谢

在本课题的完成过程中，得到了陈良宽教授的悉心指导，并且在百忙之中审阅了全文，还提出了一些宝贵的建议。他那严谨的治学态度，值得我好好的学习。另外，还要感谢我的同学们，他们给我提供了很多的帮助。
同时还要感谢我们系的领导，他们为我提供了很好的上机环境，如果没有这么好的机房环境和上机条件，要想按时完成本课题是不可能的。
最后再一次感谢所有指导、帮助过我的人！
 

参 考 文 献

1、 王炜.  JavaScript编程指南. 北京：电子工业出版社，1999
2、 罗小明，付胜兵. JavaScript与HTML实用教程. 北京：国防工业版社，1998
3、 James Jaworski（美）. JavaScript与Jscript从入门到精通. 北京：电子工业出版社，2000
4、 Rick Darnell（美）. JavaScript快速查询手册. 北京：机械工业出版社，1997
5、 Lee Purcell, Mary Jane Mara（美）. JavaScript实用指南. 电子工业出版社，1997
6、 Robert Mullen（美）. HTML4开发人员参考手册. 北京：机械工业出版社，1998
7、 N.兰达尔（美）. HTML用户使用指南. 北京：科学出版社，   1996
8、 Ian S.Graham（美）. HTML格式页资源手册. 北京：电子工业出版社，1998
9、 康博创作室. HTML网页设计指南.  北京：人民邮电出版社， 1999
10、Aaron Walsh & John Frouckowiak（美）. Java宝典. 北京：电子工业出版社，1999
11、黄理，李积善. 用JSP轻松开发WEB网站. 北京：希望电子出版社，2001
12、王克宏 等. Java嵌入技术.  北京：清华大学出版社，1998
13、贺军，何雄. JSP网络程序设计. 北京：人民邮电出版社，2001
14、李巍 等. JSP编程入门与应用实例. 北京：清华大学出版社， 2001
15、杨珏. JSP网络开发技术. 北京：人民邮电出版社，2001

欢迎您访问www.5ucms.org