客户端界面中可视化的实现树形框架的设计

在用户界面设计中，树是一种不可缺少的可视控件。位于客户端的树状可视控件允许最终用户能够用一种有效的方式来组织、管理和查看他们的数据。Swing的JTree就是对开发者友好的并且面向MVC结构的树状可视控件中的杰出代表。然而，当涉及客户端的应用程序时，Swing的JTree控件却面临着严重的不利条件。该控件需要在HTML页面中绑定一个applet，而这种做法与以Web为中心的模型并不相符。

将applet嵌入到HTML页面中会导致下列问题：

· applet需要在系统中下载JRE的正确版本，这对某些浏览器来说是一个问题；
· 许多基于Linux系统的浏览器不能正确运行java applet；
· applet不能与页面上的其他元素进行很好的集成。
因而我们需要考虑这样一个问题，有这样一种需求，创建一个框架使得开发者能够轻松创建客户端树形"视"，这样有利于避免由于使用applet而可能导致的缺陷。
树框架通过在常见的类似JTree接口上使用一个可插入式的以Javascript为中心的模型，缓解了所有这些问题。它提供了下列功能：
· 允许用户轻松地创建相当复杂的树；
· 如果需要，允许用户在单一的HTML页面上创建多个树；
· 框架非常灵活，它允许用户定制所要呈现的图形；
· 呈现树所需的大部分工作都是在客户端完成的。在对树出现多请求时，通过保持仅生成少量代码来实现对网络负载的最小化；
· 本设计支持树或不同树间的拖放操作（但当前还无法支持，因为这需要不同浏览器间拖放的标准化）；
· 框架能够非常容易地集成到Struts应用中；
· 它能够运行在所有符合DOM1标准的浏览器中；（通过测试的浏览器有IE5.5/ Netscape 7/Mozilla 1或者更高的版本）
· 因为框架与创建树的Javascript引擎进行了良好的分离，最终用户能够容易地将缺省的生成器用他们自己的Javascript树生成器来代替。
· 它支持两种模式：本地模式和客户机-服务器模式。在本地模式中，是一次载入整个树。对于相对较小的树是非常适用的。对于大一些的数据集合，则推荐使用客户机-服务器模式，该模式只是导入那些被请求的树节点；
· 支持页面上的多框应用；
· 用户使用方便，是因为缺省的javascript树生成器符合Section508标准；
· 框架允许每个树节点与一个可选的弹出式菜单相关联。当用户右键单击树节点时，该弹出式菜单就被激活。多个树节点可以分享一个弹出式菜单；
· TreeStateManager对象负责为用户记录树的状态。树的状态由展开的树节点、当前被选中节点的名称和它的路径。它也记录与当前选中节点相关联的弹出菜单。例如：为了获取简便，我们可以在页面上显示一个活动工具条，上面包含选中节点的弹出菜单项。

树框架模型
下面图表展现了在树框架中不同对象间的关系：

如上图所示，树框架中不同部分存在下列关系：
· 一棵树能够包含任意数量的树节点。树是通过名字来区分的，而且在整个站点中，每棵树的名字都是唯一的；
· TreeNode对象是通过它的路径来标识的--用户能够在同一棵树中有两个名字相同的TreeNode，而它们的路径不同。每个TreeNode实例仅能包含一个TreePopup实例；
· TreePopup通过名称进行标识，而且有效范围局限于所属树。所以在一棵树中，每一个TreePopup的实例都应该有一个唯一名字。如果需要，多个不同的TreeNode可以分享一个弹出菜单的实例；
· 树与TreeStateManager之间是一对一关系。站点中的每一棵树都会有一个维护该树状态的TreeStateManager对象与之相对应。

例子：利用本地模式创建一棵简单树
在Jsp中创建一棵树是一个相当简单的过程。首先，开发人员应该创建所有树节点；然后是确定树的根节点、创建树；最后，调用renderTree方法来生成这棵树。这会返回一个字符串，并将这个字符串值被插入到jsp中，保证树能够得到正确显示。
利用本地模式创建树的代码片断如下：

 // Create the required TreeNodes :

 TreeNode root = new TreeNode("Local Tree Root");

 root.setIconSrcOpen("tree_images/base.gif");

 root.setIconSrcClosed("tree_images/base.gif");

 TreeNode child1 = root.addChild("Regional", "NodeSubmitForm", 

 "tree_images/folderopen.gif","tree_images/folder.gif");

 TreeNode child2 = root.addChild("International", "NodeSubmitForm", 

 "tree_images/folderopen.gif","tree_images/folder.gif");

 TreeNode child3 = child1.addChild("East", "NodeSubmitForm", 

 "tree_images/folderopen.gif","tree_images/folder.gif");

 TreeNode child4 = child1.addChild("West", "NodeSubmitForm", 

 "tree_images/folderopen.gif","tree_images/folder.gif");

 TreeNode child5 = child1.addChild("North", "NodeSubmitForm", 

 "tree_images/folderopen.gif","tree_images/folder.gif");

 TreeNode child6 = child1.addChild("South", "NodeSubmitForm", 

 "tree_images/folderopen.gif","tree_images/folder.gif");

 TreeNode child7 = child4.addChild("Colorado", "NodeSubmitForm", 

 "tree_images/folderopen.gif","tree_images/folder.gif");

 /** now create the tree, and render it. */ 

 Tree localTree = new Tree("localTree", root, true); 

 return localTree.renderTree(request); // print the output on your JSP.... 

 ------------------------------------------------------------------

 <!-- 

 In your html page, create a form called NodeSubmitForm which will 

 be submitted when the user selects the node 

 -->

  <form name="NodeSubmitForm" method="post">

    <!-- Add any needed extra form parameters here -->

  </form> 

上面的代码利用本地模式创建了一棵简单的树，树的形状如右图。我们能够利用TreeStateManager对象来捕捉活动（展开/折叠/选中节点）；用户完成的这些活动，而且一旦用户对树执行了某个活动，该活动就应该立刻被调用。下面这段代码能够插入服务器端的活动-处理模块中，它根据用户对树执行的某个操作处理树的状态。

处理树的状态

一旦用户对树执行了某一活动（展开/折叠/选中），就应该调用对象TreeStateManager的方法processState（请求）对树的状态进行处理。正如下面代码段所示：一旦完成了树状态的处理，您就可以通过访问TreeStateManager获得不同树状态变量的值。

/**

* let us process the tree state first. The tree state can be processed anytime after a user 

* has performed an action on the tree (like a select action for example). 

*/ 

TreeStateManager treeStateManager = TreeStateManager.getInstance(session, "localTree"); 

treeStateManager.processState(request); 

/** Users can choose to obtain information about the selected node if required */

String selectedNodePath = treeStateManager.getHighlightedNodePath();

String selectedNodeName = treeStateManager.getHighlightedNodeName();