.NET JAVA园

A tree widget is basically a bunch of collapsible containers, when you open a node all it's child nodes becomes visible, and when you close it they're hidden. The basic idea is that simple however there are a few things that makes it a bit more complicated. Below you'll find information about parts of the implementation of this tree widget, how the generated code looks like and how a few of the methods work. This is not something you need to read and understand in order to use this widget, however if you're interested in how this was made and how it works you might find this helpful.

Generated Code

As described earlier the tree widget uses an object hierarchy implementation to simplify the creation of trees, however since the browser cannot understand that object hierarchy we are required to convert it into something that the browser can render, in this case guess what we're using? Yeah you where right, our old buddy html. Below is the generated html code for a small tree with only three items. Further down this document you'll find the same code but split up and described.

<div id="webfx-tree-object-0" ondblclick="webFXTreeHandler.toggle(this);" class="webfx-tree-item">
  <img id="webfx-tree-object-0-icon" src="images/openfoldericon.png" onclick="webFXTreeHandler.select(this);">
  <a href="javascript:void(0);" id="webfx-tree-object-0-anchor">Root</a>
</div>
<div id="webfx-tree-object-0-cont" class="webfx-tree-container" style="display: block;">
  <div id="webfx-tree-object-1" class="webfx-tree-item">
    <img id="webfx-tree-object-1-plus" src="images/L.png">
    <img id="webfx-tree-object-1-icon" src="images/new.png" onclick="webFXTreeHandler.select(this);">
    <a href="javascript:void(0);" id="webfx-tree-object-1-anchor">1</a>
  </div>
  <div id="webfx-tree-object-2" class="webfx-tree-item">
    <img id="webfx-tree-object-2-plus" src="images/L.png">
    <img id="webfx-tree-object-2-icon" src="images/new.png" onclick="webFXTreeHandler.select(this);">
    <a href="javascript:void(0);" id="webfx-tree-object-2-anchor">2</a>
  </div>
  <div id="webfx-tree-object-3" class="webfx-tree-item">
    <img id="webfx-tree-object-3-plus" src="images/L.png">
    <img id="webfx-tree-object-3-icon" src="images/new.png" onclick="webFXTreeHandler.select(this);">
    <a href="javascript:void(0);" id="webfx-tree-object-3-anchor">3</a>
  </div>
</div>

WebFXTree Object

The code below is what is generated from the WebFXTree Object (it will however also contain the code from all tree items but to increase the readability that code has been removed).

<div id="webfx-tree-object-0" ondblclick="webFXTreeHandler.toggle(this);" class="webfx-tree-item">
  <img id="webfx-tree-object-0-icon" src="images/openfoldericon.png" onclick="webFXTreeHandler.select(this);">
  <a href="javascript:void(0);" id="webfx-tree-object-0-anchor">Root</a>
</div>
<div id="webfx-tree-object-0-cont" class="webfx-tree-container" style="display: block;">
  <!-- This is where the Tree Item's will be inserted -->
</div>

The first div contains the top level icon and label while the secund div is the container that will house the tree items. When the first div is double clicked the display property of the secund one will be toggled.

WebFXTreeItem

The code below is what is generated from a singel WebFXTreeItem Object.

<div id="webfx-tree-object-1" class="webfx-tree-item">
  <img id="webfx-tree-object-1-plus" src="images/L.png">
  <img id="webfx-tree-object-1-icon" src="images/new.png" onclick="webFXTreeHandler.select(this);">
  <a href="javascript:void(0);" id="webfx-tree-object-1-anchor">1</a>
</div>

As you can see the code generated by each WebFXTreeItem looks pretty much the same as the one for the WebFXTree object, the main difference is the extra image(s) that the tree items has (the plus/minus and track icons). Also note that the code shown above is from a tree item without children. If the tree item has children an extra div to contain those will be added (much like the secund div generated by the WebFXTree Object).

Expanding/Collapsing

The most important methods for this widget are expand and collapse. Here I'll try to describe how those works. As the html code above showed webFXTreeHandler.toggle(this); is executed once a tree item is clicked. The tree handler then uses an internal reference, webFXTreeHandler.all to look up the object for the clicked tree item. Once the object has been found it executes the toggle() method on that object.

Below is the code for the toggle method and as you can see all it does is to check whatever or not the item is currently expanded or collapsed, and then calls the appropriated method (expand if it's collapsed or collapse if it's expanded).

WebFXTreeItem.prototype.toggle = function () {
  if (this.open) { this.collapse(); }
  else { this.expand(); }
}

Since the expand and collapse methods works pretty much the same I'll only describe one of them, the expand method.

WebFXTreeItem.prototype.expand = function () {
  if (!this._subItems.length > 0) { return; }
  document.getElementById(this.id + '-cont').style.display = 'block';
  document.getElementById(this.id + '-icon').src = openFolderIcon;
  document.getElementById(this.id + '-plus').src = this.minusIcon;
  this.open = true;
  setCookie(this.id.substr(18,this.id.length - 18), '1');
}

The first line of code checks to see if there are any children, since it doesn't do any good to expand it unless there are. The next line is the most important one and does the expanding by changing the display mode of the div containing all children to block. The next two lines changes the icon and the plus/minus sign, then the open property is changed to reflect the expanded/collpased state and finally it sets a cookie (used to keep track of what's expanded or not so that the tree can be restored to it's previous state the next time you visit the site).

This tree widget is based on objects and all html code is generated from a js structure. To create a tree you won't have to write a single line of html however you will have to learn how to to create the tree and treeItem objects.

Usage

The tree(s) needs to be create during the initial load phase of the page. This is accomplished by creating a WebFXTree object and then add WebFXTreeItems to it. Once all items has been added document.write is used to generate the html code and insert it into the page.

  var tree = new WebFXTree('Root');
  tree.add(new WebFXTreeItem('Tree Item 1'));
  tree.add(new WebFXTreeItem('Tree Item 2'));
  tree.add(new WebFXTreeItem('Tree Item 3'));
  document.write(tree);

Folders

A folder is created by adding a new tree item to a already created tree item. However since we need to keep a reference to this tree item object (so that we can add tree items to it, and make it a folder) we cannot create the new object inside the add method. So instead we first create the new tree item object and then we add it to the tree.

  var tree = new WebFXTree('Root');
  /* Add tree item to tree */
  tree.add(new WebFXTreeItem('1'));
  /* Create a new folder and add it to tree */
  var folder = new WebFXTreeItem('2')
  tree.add(folder);
  /* Add tree items to folder */
  folder.add(new WebFXTreeItem('2.1'));
  folder.add(new WebFXTreeItem('2.2'));
  folder.add(new WebFXTreeItem('2.3'));
  /* Add another tree item to tree */
  tree.add(new WebFXTreeItem('3'));
  document.write(tree);

Explorer behavior

Since I first published this tree control I've been getting a lot of requesters about making it contain only folders. So I added a setBehavior method to it. The example below is an exact copy of the one above, with the one exception that this uses tree.setBehavior('explorer');

  var tree = new WebFXTree('Root');
  /* Change the behavior of the tree */
  tree.setBehavior('explorer');
  /* Add tree item to tree */
  tree.add(new WebFXTreeItem('1'));
  /* Create a new folder and add it to tree */
  var folder = new WebFXTreeItem('2')
  tree.add(folder);
  /* Add tree items to folder */
  folder.add(new WebFXTreeItem('2.1'));
  folder.add(new WebFXTreeItem('2.2'));
  folder.add(new WebFXTreeItem('2.3'));
  /* Add another tree item to tree */
  tree.add(new WebFXTreeItem('3'));
  document.write(tree);

Custom Icons

Some times you might want to combine the two styles, or make some of the folders/items have a different icon than the default. To achieve that set the object.icon property to an uri, or to a javascript variable containing one. To change the open icons for folders use object.openIcon.

  var tree = new WebFXTree('Root');
  tree.setBehavior('explorer');
  tree.icon = 'http://webfx.eae.net/images/notepad.gif';
  tree.add(new WebFXTreeItem('1'));
  var folder = new WebFXTreeItem('2')
  tree.add(folder);
  var t21 = new WebFXTreeItem('2.1');
  /* Change the icon */
  t21.icon = webFXTreeConfig.fileIcon;
  folder.add(t21);
  var t22 = new WebFXTreeItem('2.2');
  /* Change the icon */
  t22.icon = webFXTreeConfig.fileIcon;
  folder.add(t22);
  var t23 = new WebFXTreeItem('2.3');
  /* Change the icon */
  t23.icon = webFXTreeConfig.fileIcon;
  folder.add(t23);
  tree.add(new WebFXTreeItem('3'));
  document.write(tree);

(2006-05-26) Changed license to Apache Software License 2.0.
(2003-03-16) Version 1.17 - Added target property.
(2003-02-15) Version 1.16 - The selected node can now be distinguished even when the tree control loses focus.
(2002-10-29) Version 1.15 - This version is based on 1.13 and fixes the bugs 1.14 were supposed to fix.
(2002-10-23) Version 1.14 - Minor fix for a case where the plus icon used wrong image.
(2002-08-20) Version 1.13 - Added usePersistence flag to allow disable the usage of cookies.
(2002-06-13) Version 1.12 - Various bug fixes.
(2002-01-27) Version 1.11 - Bug fixes and improved mozilla support.
(2001-09-23) Version 1.1 - New features included keyboard navigation (ie) and the ability to add and remove nodes dynamically and some other small tweaks and fixes.
(2001-03-18) Added getSelected and get/setBehavior that can make it behave more like the windows explorer
(check usage for more information about it).
(2001-01-10) Original Version Posted.

An object based tree widget with persistence using cookies that works in ie5 and mozilla.

History

Among the first things I created with DHTML was a tree view, that was over four years ago (spring 1997), since then a lot has happened in the browser market, and also with my skills in JavaScript and DHTML. Today I give you the third version of this tree view widget. The idea behind it is the same as in the first version, to emulate the tree widget found in many modern graphical operation environments, such as Microsoft Windows, and so is the basic idea of how to accomplish this, to toggle the display property of elements depending on the expanded state of their parents. However the similarities stop there. Another thing I can mention from a historical point of view is that this is the first complex script that I have created that works under two different browsers without the use of browser detection, the same code is actually used for ie5 and mozilla. :o)

Introduction

This new version is based on objects, so you do not create the actual html code for the tree yourself, you create an object (the tree's root folder) and then you add child items to this. Once you're done adding items the actual html code is generated and inserted into the page. This makes it very easy to create and update the content of the tree (or to dynamically generate it). If you've seen Erik's new xMenu you will notice that it's working in similar way.

Persistence

This script also features persistence using per session cookies. So now if you go to a page using this tree widget, expand a few folders and then leave the page again (by following a link or by typing a new url manually) it will store the state of each folder in a cookie so when you go back to the page it will remember what folders you last had opened and open them for you. This could be very useful if you use this for site navigation etc.

Limitations

The persistence functionality is using the node creation order to remember the state of each node, this works fine for static trees, but not for dynamic ones since adding and/or deleting nodes will change the original order numbering.

WebFXTreeAbstractNode

Abstract object with common functions and methods shared by WebFXTree and WebFXTreeItem. The two of those inherites from this object.

Constructor

Abstract object - no instances of it should be created

Properties

Methods

WebFXTree

The WebFXTree object is used to create the actual tree root that can later be populated with tree items. All properties and methods from the WebFXTreeAbstractNode are inherited.

Constructor

new WebFXTree([text], [action], [behavior])

Properties

Methods

WebFXTreeItem

Used to create tree items, can be added (uisng the add method) to a WebFXTree or to another WebFXTreeItem object. All properties and methods from the WebFXTreeAbstractNode are inherited.

Constructor

new WebFXTreeItem([text], [action], [parent], [icon], [openIcon])

Properties

Methods

现在浏览网页主要用chrome，因为chrome的速度确实快，包括启动速度和加载网页的速度，比ie和ff快得多，不过看评测OPERA的新版本加载网页速度更快，由于没有用过OPERA，不好评价.我在用chrome和FF显示我的html文件的时候，发现它们的结果有所出入，我先不管是什么原因造成的，先hack一下再说，可是以前用过的css hack 都是针对ie，ff，opera，这个chrome和ff该怎么区分呢？试了几个ie，ff的hack方法，都不行，上网搜索，看到很多人说可以用

　@media screen and (-webkit-min-device-pixel-ratio:0) {　    body { background-color: blue; }来进行chrome 和ff的css hack，可是我用了没有效果，最后看到一位仁兄的方法很管用，就是使用：

}

body:nth-of-type(1)这句是选择第一个body元素。 据说safari和chrome的内核是一样的。目前只有safari 3+ 和 chrome浏览器支持这种选择方式，所以可用来做它们的hack；

访问级别修饰符决定其他类是否可以访问该类的某个字段或某个方法。

有两种访问控制种类；

1.Top Level（针对类的修饰）

包括public和package-private（不明确指定修饰符，什么都不写，即默认情况）两种修饰符；

2.Member Level（针对成员的修饰）

包括public，private，protect，package-private四种修饰符。

对于类的访问控制，public表示被修饰的类对任何地方的类都可见。如果不写访问修饰符，即package-private情况，被修饰类只对该类所属包的类可见。

对于成员的访问控制，public和package-private的定义和类的访问控制完全一样，成员新增了两个访问修饰符分别是private和protect，private表示该成员只能被所属的类访问，protect包括了package-private的可见性，多出了对该类子类的可见性，子类可以在该类的同一个包，也可以在其他包。

JAVA的访问控制看上去还是很简单，但有一点我觉得有点迷惑，就是如果一个类的访问修饰符为package-private（不明确指定修饰符），那么该类的成员比如一个方法的修饰符定义为public有什么意义？因为该类在别的包都不能访问了，那该类的方法肯定也就无法调用了。但是这样定义程序并不报错，因此肯定有其存在的道理。在网上搜索了一下类似的疑问，发现了一个很好例子可以解释这个疑问。

代码

package test;   
public abstract class Test {   
    public abstract void test();   
    public static Test getInstance(){   
        return new SubTest();   
    }   
}   
class SubTest extends Test{   
    @Override  
    public void test() {   
        System.out.println("SubTest's test()");   
    }   
}   
测试用代码：   
import test.Test;   
public class Main {   
    public static void main(String[] args) {   
        Test t = Test.getInstance();   
        t.test();   
    }   
}  

 这是现在我知道的唯一一种可以让package-private修饰的类的public或protect方法可以被其他包访问的方法，我想这样写是因为可以间接实现让一个子类重写的方法的访问级别较父类的方法降低，因为重写方法降低访问级别是不允许的。这样假设继承或实现了一个public方法，但是可以让其他包无法得知他的方法，除非通过其父类来访问。算是增加了访问控制的灵活性。

需要引入Jquery库

代码: