[Eclipse] GEF entry series (11. An implementation of the tree)

Two days ago, GEF released version 3.1m7, but it was found that there was no difference with the M6 version. Is it mainly intended to be compatible with the eclipse version? We hope that the official version 3.1 will be released soon and a lot of new content will be added. The previous post introduced how to implement table functions. during the development process, another frequently used function is the tree. Although SWT provides standard tree controls, however, it is not intuitive and convenient to use an organizational structure chart. Although the current version of GEF (3.1m7) does not directly support tree implementation, the example provided by draw2dProgramBut there is something we can use.Code(Org. Eclipse. draw2d. Examples. Tree. treeexample, see the running interface), which can save a lot of work.

Figure 1 treeexample in the draw2d example

I remember that I used swing to edit an organizational structure chart several years ago. At that time, I used xylayout for the canvas to calculate and refresh the location of each tree node as appropriate,AlgorithmThe idea is to give priority to deep search. The position of a non-leaf node is determined by the number and position of its subnodes. I think this should be a relatively intuitive method, but this time I read the implementation in the draw2d example and thought it was quite reasonable. In this example, the tree node graph is called treebranch. It contains a pagenode (represented by a rectangle with a fold) and a transparent container contentspane (a layer used to place subnodes ). In general, treebranch uses the layout manager named normallayout to place pagenode on the top of the subnode, while contentspane uses the layout manager named treelayout to calculate the location of each subnode. Therefore, we can see that the entire tree is actually composed of many layers of sub-trees. The size of the image corresponding to any non-leaf node is equal to the size of the area occupied by the sub-tree with it as the root node.

In this example, you can use the horizontal or vertical organization tree (see figure 2) to compress the gaps between nodes, and each node can arrange the subnodes horizontally or vertically, you can also expand or collect sub-nodes, which provides a good foundation for implementing a convenient and easy-to-use tree Editor (the work of the view is greatly simplified ).

Figure 2 vertical tree

I have not carefully studied the specific content of these classes provided in the draw2d example, they are used as part of the draw2d API (including treeroot, treebranch, treelayout, branchlayout, normallayout, hanginglayout, and pagenode, copy the code to your project), because according to the GEF 3.1 Schedule, they are likely to appear in the official version of GEF 3.1 in some form. The following describes how to convert them to the view section of the GEF application to implement the tree editor.

Start with the model section. Because a tree is composed of nodes, the most important node class in the model (called treenode) corresponds to the treebranch graph in the example, it should contain at least the nodes (subnode list) and text (display text) attributes. In this example, a treeroot is a subclass of treebranch, used to represent the root node, some attributes are added to treeroot, such as horizontal and majorspacing, to control the appearance of the entire tree. Therefore, the model should also have a subclass that inherits the treenode, in fact, this class should be the contents of the editor, which corresponds to the image treeroot, which is the canvas in the general GEF application. Think about it clearly. At the same time, although it looks like a wired connection between nodes, we do not need a connection object here. These lines are drawn by the layout manager. After all, we do not need to manually change the line direction. Therefore, the model is so simple. Of course, don't forget to implement the notification mechanism. Let's take a look at all the editparts.

In contrast to the model, we have treenodepart and treerootpart. The latter and the former are also inherited. In the getcontentpane () method, return the contentspane part of the treebranch graph. In the getmodelchildren () method, return the nodes attribute of treenode. In the createfigure () method, treenodepart should return the treebranch instance, and the treerootpart should overwrite this method and return the treeroot instance. In addition, note that the current attributes of the model must be correctly reflected in the graph in the refreshsponals () method, for example, if the treenode contains a Boolean variable expanded that reflects whether the node is expanding, the current value of this attribute must be assigned to the graph in the refreshvisuals () method. Part of the Code for treenodepart is as follows:

Public Ifigure getcontentpane () {
Return(Treebranch) getfigure (). getcontentspane ();
}

Protected List getmodelchildren () {
Return(Treenode) GetModel (). getnodes ();
}

Protected Ifigure createfigure () {
Return NewTreebranch ();
}

Protected   Void Createeditpolicies () {
Installeditpolicy (editpolicy. component_role,NewTreenodeeditpolicy ());
Installeditpolicy (editpolicy. layout_role,NewTreenodelayouteditpolicy ());
Installeditpolicy (editpolicy. selection_feedback_role,NewContainerhighlighteditpolicy ());
}

Several editpolicies are used in the code above. Here we will talk about their respective purposes. In fact, it can be seen from the role that the treenodeeditpolicy is used to delete nodes, and there is nothing special. The treenodelayouteditpolicy is more complicated. I implement it as a subclass of constrainedlayouteditpolicy, the createaddcommand () and getcreatecommand () methods are implemented to return the commands for changing the parent node of the node and creating the node respectively. In addition, I asked the createchildeditpolicy () method to return the nonresizableeditpolicy instance, the createselectionhandles () method is as follows, so that you can use a control point to indicate the selected state when you select a node. The default border is not used because the border will wrap the entire subtree, not beautiful enough, and the interface is messy when multiple options are selected.

Protected List createselectionhandles () {
List list=NewArraylist ();
List. Add (NewResizehandle (graphicaleditpart) gethost (), positionconstants. North ));
ReturnList;
}

The result of the selected node is as follows: I changed the display of the Tree node as needed (modify the pagenode class ):

Figure 3 select three nodes at the same time (node2, node3, and node8)

The last containerhighlighteditpolicy only serves to highlight the latter when you drag the node to another node area, so that you can easily choose whether to let go of the mouse. It is a subclass of graphicaleditpolicy. Some code is as follows. If you have read the logic example, it is not difficult to find that this class is obtained from it and modified.

Protected   Void Showhighlight () {
(Treebranch) getcontainerfigure (). setselected (True);
}

Public   Void Erasetargetfeedback (request) {
(Treebranch) getcontainerfigure (). setselected (False);
}

Now the tree editor is ready to work. To make it easier for users, you can expand/collect subnodes, horizontally/vertically arrange subnodes, and other functions. The draw2d example code in the view section has built in these functions, all you need to do is add appropriate attributes to the model. Here is one of the following examples. node1 is in the collapsed State, and node6 vertically arranges subnodes (to save horizontal space ).

Figure 4 run the tree Editor

This editor took me a day to complete. However, if we didn't use the draw2d example, we believe it would take at least four to six days, and there would be many defects and functionality would not be so complete. I feel that it is best to find out whether there are any available resources before implementing functions in GEF. For example, it is good to find several examples provided by GEF, of course, you must understand them before you can use them.