《客户端界面中可视化的实现树形框架的设计》由会员分享，可在线阅读，更多相关《客户端界面中可视化的实现树形框架的设计（5页珍藏版）》请在金锄头文库上搜索。
1、客户端界面中可视化的实现树形框架的设计2004-03-10在用户界面设计中，树是一种不可缺少的可视控件。位于客户端的树状可视控件允许最终用户能够用一种有效的方式来组织、管理和查看他们的数据。Swing 的 JTree 就是对开发者友好的并且面向 MVC 结构的树状可视控件中的杰出代表。然而，当涉及客户端的应用程序时，Swing 的 JTree 控件却面临着严重的不利条件。该控件需要在 HTML 页面中绑定一个 applet，而这种做法与以 Web 为中心的模型并不相符。将 applet 嵌入到 HTML 页面中会导致下列问题： applet 需要在系统中下载 JRE 的正确版本，这对某些浏览器
2、来说是一个问题； 许多基于 Linux 系统的浏览器不能正确运行 java applet； applet 不能与页面上的其他元素进行很好的集成。因而我们需要考虑这样一个问题，有这样一种需求，创建一个框架使得开发者能够轻松创建客户端树形视，这样有利于避免由于使用 applet 而可能导致的缺陷。树框架通过在常见的类似 JTree 接口上使用一个可插入式的以 Javascript 为中心的模型，缓解了所有这些问题。它提供了下列功能： 允许用户轻松地创建相当复杂的树； 如果需要，允许用户在单一的 HTML 页面上创建多个树； 框架非常灵活，它允许用户定制所要呈现的图形； 呈现树所需的大部分工作都是在
3、客户端完成的。在对树出现多请求时，通过保持仅生成少量代码来实现对网络负载的最小化； 本设计支持树或不同树间的拖放操作（但当前还无法支持，因为这需要不同浏览器间拖放的标准化）； 框架能够非常容易地集成到 Struts 应用中； 它能够运行在所有符合 DOM1 标准的浏览器中；（通过测试的浏览器有 IE5.5/ Netscape 7/Mozilla 1 或者更高的版本） 因为框架与创建树的 Javascript 引擎进行了良好的分离，最终用户能够容易地将缺省的生成器用他们自己的Javascript 树生成器来代替。 它支持两种模式：本地模式和客户机-服务器模式。在本地模式中，是一次载入整个树。对于
4、相对较小的树是非常适用的。对于大一些的数据集合，则推荐使用客户机-服务器模式，该模式只是导入那些被请求的树节点； 支持页面上的多框应用； 用户使用方便，是因为缺省的 javascript 树生成器符合 Section508 标准； 框架允许每个树节点与一个可选的弹出式菜单相关联。当用户右键单击树节点时，该弹出式菜单就被激活。多个树节点可以分享一个弹出式菜单； TreeStateManager 对象负责为用户记录树的状态。树的状态由展开的树节点、当前被选中节点的名称和它的路径。它也记录与当前选中节点相关联的弹出菜单。例如：为了获取简便，我们可以在页面上显示一个活动工具条，上面包含选中节点的弹出菜
5、单项。 树框架模型下面图表展现了在树框架中不同对象间的关系：如上图所示，树框架中不同部分存在下列关系： 一棵树能够包含任意数量的树节点。树是通过名字来区分的，而且在整个站点中，每棵树的名字都是唯一的； TreeNode 对象是通过它的路径来标识的 -用户能够在同一棵树中有两个名字相同的 TreeNode，而它们的路径不同。每个 TreeNode 实例仅能包含一个 TreePopup 实例； TreePopup 通过名称进行标识，而且有效范围局限于所属树。所以在一棵树中，每一个 TreePopup 的实例都应该有一个唯一名字。如果需要，多个不同的 TreeNode 可以分享一个弹出菜单的实例；
6、树与 TreeStateManager 之间是一对一关系。站点中的每一棵树都会有一个维护该树状态的 TreeStateManager对象与之相对应。例子：利用本地模式创建一棵简单树在 Jsp 中创建一棵树是一个相当简单的过程。首先，开发人员应该创建所有树节点；然后是确定树的根节点、创建树；最后，调用 renderTree 方法来生成这棵树。这会返回一个字符串，并将这个字符串值被插入到 jsp 中，保证树能够得到正确显示。利用本地模式创建树的代码片断如下：/ Create the required TreeNodes :TreeNode root = new TreeNode(Local Tre
7、e 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_im
8、ages/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/
9、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. */
10、Tree localTree = new Tree(localTree, root, true); return localTree.renderTree(request); / print the output on your JSP. -上面的代码利用本地模式创建了一棵简单的树，树的形状如右图。我们能够利用TreeStateManager 对象来捕捉活动（展开/折叠/选中节点） ；用户完成的这些活动，而且一旦用户对树执行了某个活动，该活动就应该立刻被调用。下面这段代码能够插入服务器端的活动-处理模块中，它根据用户对树执行的某个操作处理树的状态。处理树的状态一旦用户对树执行了某一活动（展开/
11、折叠/选中），就应该调用对象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). */ TreeStateM
12、anager 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 = treeStateM
13、anager.getHighlightedNodeName();Java 文档和例程代码 如果想通过例程代码学习树框架, 您可以从 download this zip file 下载文件并将其作为 Web 应用发布在 Weblogic 服务器上。如果要访问例子，请单击下面的 URL : http:/localhost:7001/tree/index.html 结束语这里所介绍的树框架允许开发人员在不损失任何标准树状控件（比如 JTree）所提供特性的前提下，能够创建相当丰富的、可定制的树状用户界面。它也向开发人员提供了其他大量的有利条件，比如：允许他们根据数据的实际情况选择树的显示模式（本地模式/客户机-服务器模式） 。该框架也支持与其它 HTML页元素的整合与集成-这对于 applet 来说并不容易做到。最后，它提供了一个与其他树 API 接口相类似的 API 接口，这样就使得用户界面 (UI)开发人员能够快速轻松地完成界面开发。
