JavaScript Object-oriented technology to implement tree control

A tree control is a familiar user interface control that is widely used to display hierarchical data.

The tree control has the unique ability to expand and fold branches, can display a large amount of information in a small space, and clearly conveys the hierarchical relationship between the data. All users who are familiar with the graphical user interface are able to use the tree-shaped control freely.

Figure I: A tree-shaped control implemented with JavaScript

The HTML itself does not support tree controls, but we can implement them through some JavaScript scripting code. In order to improve the reusability of the control, we should make full use of JavaScript to support object-oriented programming technology. The tree controls in this article apply to IE 4+ and Netscape 6.x, which should be said to cover the current mainstream browsers.

One, JavaScript and object-oriented

Object-oriented programming has three basic concepts: inheritance, encapsulation, polymorphism. The concepts of inheritance and encapsulation are relatively well understood, and the concept of polymorphism is relatively difficult to master and apply. In general, polymorphism refers to the ability to perform in many forms. In object-oriented programming, polymorphism represents the ability of a programming language to take a different approach depending on the data type or class of the object.

In "pure" object-oriented languages, such as Java, polymorphism is generally inseparable from the inheritance of classes. That is, you must define a hierarchical relationship of classes, at the top of which is an abstract class, and the underlying is a variety of specific implementations. Abstract classes define methods that subclasses must implement or overwrite, and different subclasses override methods of abstract classes in different ways depending on their needs.

For example, the formula for calculating the circle area and the rectangular area is completely different, and according to the object-oriented design idea, we first define an abstract class Shape,sharp class has a Findarea () method, and all subclasses deriving from the shape class must implement the Findarea () method. Then we define a rectangle class that represents a rectangle, a circle class that represents a circle, all two classes that inherit from the shape class. The rectangle class and the Circle class respectively implement the Findarea () method, both of which calculate the area with different formulas. The ultimate goal: regardless of which subclass of the shape the object belongs to (rectangle or circle), the Findarea () method can be invoked in the same way, without having to do with what formula is used to calculate the area of the called Findarea (). To effectively hide implementation details.

JavaScript languages do not support class based inheritance, but still have the ability to support polymorphism. JavaScript inheritance is a prototype based (Prototype) inheritance. In fact, as the example in this article shows, this kind of inheritance simplifies the writing of polymorphic methods and, structurally, the resulting program is also very close to the pure object-oriented language.

Ii. preparatory work

The entire tree control consists of four parts: graphics, CSS style definitions, HTML frame code, JavaScript code. As you can see from figure one, a tree control requires three graphs, representing collapsed branches (closed.gif), expanded branches (open.gif), and leaf nodes (doc.gif).

The following is the CSS style definition to use for the tree control:

< style>
body{
font: 10pt 宋体,sans-serif; color: navy; }
.branch{
cursor: pointer;
cursor: hand;
display: block; }
.leaf{
display: none;
margin-left: 16px; }
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }
< /style>

CSS rules are simple: the body rule sets the font and foreground (text) color of the document. The purpose of the branch rule is that when the mouse passes over a node that has child nodes, the pointer becomes the shape of the hand. The reason for defining two cursor properties is that IE and Netscape use different property names. Set the Display property to none in the leaf rule to implement the collapse effect of the leaf node, which does not contain the final node of the child node. In the scripting code, we display a node by setting the display property to block, which is set to none of the hidden nodes.

Third, the script design

The tree control implemented in this article contains a subtree object that has a collection of branches child objects, and each branch (branch) object has a collection of child objects. The child object can be either a branch object or a leaf (leaf) object. All three objects implement a polymorphic write () method, and the Write () method of different objects performs different operations depending on the object, i.e. the write () method of the tree object differs from the write () method of the Branch object. The write () method of the Branch object differs from the write () method of the Leaf object. In addition, the tree and branch objects each have an add () method that is used to add child objects to each object to which they belong.

Add the following code to the section of the HTML document. The purpose of this code is to create two image objects that correspond to the folder graphics of the open and collapsed state of the branch. There are also several tool functions that open or collapse the child elements of any branch, and transform the folder graph accordingly, depending on the opening or collapsing state of the branch.

< script language="JavaScript">
var openImg = new ..Asset not found..;
openImg.src = "open.gif";
var closedImg = new ..Asset not found..;
closedImg.src = "closed.gif";
function showBranch (branch){
var objBranch = document.getElementById(branch).style;
if (objBranch.display=="block")
objBranch.display="none";
else
objBranch.display="block";
swapFolder('I' + branch);
}
function swapFolder(img){
objImg = document.getElementById(img);
if (objImg.src.indexOf('closed.gif')>-1)
objImg.src = openImg.src;
else
objImg.src = closedImg.src;
}
< /script>

The code is preloaded with graphics objects, which helps to increase the speed of the display later. The Showbranch () function first obtains the style of the branch provided by the parameter, and then determines and toggles the display properties of the current style (switching back and forth between Block and none) to form branching and folding effects. The principle of the swapimage () function is essentially the same as the Showbranch () function, which first determines the current branch's graphics (open or collapsed folder), and then toggles the graphic.