Use JSP object-oriented Web programming technology to implement tree control 2003-06-02 09:07:29 Source: Tree control is a familiar user interface control, which is widely used to display layered data. The tree control has a unique extension and folding branch capability, which can display a large amount of information at a smaller space, and convey the hierarchical relationship between the data. Anyone who is familiar with the graphical user interface can use the tree control. Figure 1: The tree control HTML itself implemented with JavaScript does not support the tree control, but we can implement it through some JavaScript script code. In order to improve the reusability of the control, we have to make full use of JavaScript support for face-to-object programming technology. The tree controls of this article apply to IE 4 and Netscape 6.x, which already covers the current mainstream browser. I. JavaScript and object-oriented object-oriented programming have three most basic concepts: inheritance, packaging, polymorphism. Inheritance and packaging These two concepts are better understood, relatively, the concept of polymorphism is more difficult to master and apply. In general, polymorphism refers to the ability to perform in a variety of forms. In object-oriented programming techniques, polymorphism represents a different processing method with a different processing method according to the data type or class of the programming language. In the "pure" object-oriented language, such as Java, polymorphism is generally unacceptable to the inheritance of the class. That is, a class of hierarchical relationships must be defined, and the top is an abstract class, which is in the lower layer. Various specific implementations. Abstract classes define methods that must be implemented or overwritten, and different subclasses covers abstract classes in different ways according to their needs. For example, calculating the formula of the circular area and the rectangular area is completely different, according to the object-oriented design idea, we must first define an abstract class Shape, the Sharp class has a FindArea () method, all the subclasses derived from the Shape class must implement Findarea ()method. Then, we define a rectangle class representing a rectangular, a representative circular Circle class, which inherits from the Shape class. The Rectangle class and the Circle class implement the FindArea () method, both with different calculation formulas. Finally, this goal: regardless of which of the subclass of Shape (Rectangle or Circle), you can call the FindArea () method in the same way. Do not use the FindArea () that is called to calculate the area, thereby effective Hide implementation details. The JavaScript language does not support with class-based inheritance, but still has the ability to support polymorphism. JavaScript inheritance is a prototype inheritance. In fact, as shown in this paper, this inheritance mode simplifies the writing of polymorphisms, and from the perspective, the final resulting program is also close to the pure face to the object language. Second, the entire tree control is made of four parts: graphics, CSS style definition, HTML frame code, JavaScript code. As can be seen from the figure, the tree control requires three graphics, indicating a folded branch, an expanded branch (Open.gif) and a leaf node (Doc.gif).
Below is the CSS style definition to be used by the tree control:
