Introduction to Java Trees
JTree is a Swing part with which we can show various leveled information. JTree is a serious complex segment. A JTree has a 'root node' which is the top-most parent for all nodes in the tree. A node is a thing/item in a tree. A node can have numerous sub nodes. These child nodes themselves can have further sub nodes. In the event that a node doesn't have any child node, it is known as a leaf node.
The leaf node is shown with an alternate visual pointer. The nodes with sub nodes are shown with an alternate visual pointer alongside a visual 'handle' which can be utilized to grow or collapse that node. Expanding a node shows the child nodes and collapsing hides them.
The tree components can be utilized to show hierarchical data. The tree components renders its view utilizing a javax.swing.tree.DefaultTreeModel Object as a model. Client side Swing developers who know about the DefaultTreeModel and the DefaultMutableTreeNode class will find a simple relocation path to the ice:tree segment. The accompanying screen shot is of the ice:tree part utilizing the CSS XP topic.
The tree shows its data vertically where each node of the tree is represented by a DefaultMutableTreeNode. A node can either be a leaf or branch depending on the off chance that it has at least zero child nodes. A user can click on the branch expand/contract symbol to toggle the visibility of child nodes. The root tree node visibility can be togged by setting the tree hideRootNode ascribe to false. Each DefaultMutableTreeNode wraps an IceUserObject which contains instance variable for common tree node properties,such as icon paths,tool tips , display text and expanded state.
Creating a Tree
Creating a tree component is an entirely standard procedure including two parts. The initial components consist of building a support bean which will contain the DefaultTreeModel. The second part is to add the tree segment to your ICEfaces application. Here is an image of a rendered tree which will be made.
The following code, is taken from TreeBean.java which builds a basic DefaultTreeModel, one root node with three child nodes. The TreeBean must uncover the DefaultTreeModel instance variable as it must be connected to the tree component value attributes.
The Treebean must be initialized in the faces-config.xml so that we can use it in our JSF application. Here is the JSF code that is needed to render the defaultTreeModel defined in the treebean:
Notice how the tree components has a treeNode child component. This child component is sub-node further with a facet named content. The facet name is self descriptive and takes into account any sort of JSF component to be added to them. There is also an icon facet which ought to be utilized to hold segments identified with a tree hub symbol. The substance aspect ought to be utilized to hold components related with a tree node text label. The tree label is iterative and will apply its child components hierarachy to all of the DefaultMutableTreeNode found in the DefaultTreeModel.
To summarise the tree component can be made with a simple binding to a backing bean which contains a DefaultTreeModel. You don't have to write any code to make the tree node to extend and contract.
Customising the IceUserObject
The IceUserObject object was designed to have a bare minimum of instance variables needed to display a basic tree node. In this next example the IceUserObject will be extended so that it can store a String representing a URL. The following code is taken from UrlNodeUserObject.java. private String url;
Now that every node can have a unique URL we need to update the JSF code in the linkTree.jspx file. The following code shows how to add a commandLink to an treeNode which takes advantage of our new UrlNodeUserObject object.
Customising the IceUserObject is quite simple and when it is combined with the iterative nature of the tree component, it can be quite a powerful tool. The next section will show how to respond to node selection.
Responding to Node selection
Right now the IceUserObject will be broadened with the goal that it can respond to node selection and change the selected panel in a panelStack component. The tree component doesn't have a selected node event listener,instead the commandLink component will be used to respind to a user mouse click. The following code shows how the PanelSelectUserObject default constructor has been modified to get a reference to the PanelStackBean responsible for selecting the PanelStack component selected panel:
The PanelSelectUserObject needsto be able to respond to a user click and update the internal state of the backing beans. The clicks clicks are taken care of by restricting a strategy to the tree node action listener. Here is the code expected to respond to a user click.
The PanelStackBean object is introduced in this code block which is responsible for maintaining the state of selected panel stack in the panelStack component. The full source for this simple class is available with the tree-selection demo source code.
Setting up a tree component for user interaction is a relatively simple process which utilizes action listener mechanisms in the JSF framework. Each tree node's backing bean is responsible for setting a selected panel in the panelStack component. The component nature of JSF allows for easy encapsulation of application logic which makes application quick to build and debug. The follow is a screen shot of the tree-selection demo.
Customizing a Tree Display
In the preceeding segment we have seen how the tree components iterates over a DefaultTreeModel binding and applies a layout to every node in the model. The format in past models utilized commandLinks yet the layout could have utilized any of the ICEfaces components. Right now will apply the full Xp topic to a tree with numerous child nodes.
The ICEfaces system comes preconfigured with two distinct CSS based theme for all components. The style shhet for these two segments, Xp and Royale, are available in the resource folder of the ICEfaces bundle. All together apply the Xp topic the accompanying include is required in your jspx page:
<link href="./xmlhttp/css/xp/xp.css" rel="stylesheet" type="text/css"/>
For most ICEfaces components included the above CSS record incorporate is all that is required. The tree components requires slightly more configuration to completely apply the segment. In the first place, the tree components requires that an imageDir property is set which points to an area where the expand and contract control images can be found. Lastly, the node state icons must be set for each IceUserObject; branch contracted icon, branch expanded icon lastly a leaf icon. This may appear as though a ton of work yet it takes into account a tree that can have various varieties of branch and leaf icons . Coming up next is a refreshed tree component revelation which is completely styled:
In summary, the ICEfaces components can easily styled using CSS and in some cases by specifying image directories like the tree component is necessary. In the next example we are going to dynamically change an tree's DefaultTreeModel which will automatically reflected in the view.
Dynamically changing a Tree
In this next example we are going to dynamically remove and add nodes from the tree. When a user selects a tree node they will optionally have a choice to copy the selected node or remove it from the tree model. The following is a screen capture of this application.
This demo will start with the same tree that we used in the tree style demo. We must first add an action listener to the the treeNode commandLink component to listen for user clicks. Next we add a panel which will display the selected node and have add/remove controls when a node is selected. This JSF code for dynamically changing a tree node is as follows:
The ActionListeners for the add and remove node controls can be added to the TreeBean class. When a node in the tree is clicked an instance variable in TreeBean references the source of the click. The reference to the selected node can them be used to copy or remove the selected node from the DefaultTreeModel when one of the corresponding commandButtons is pressed. Note that the root node is treated as a special case, if it is removed no more nodes can be added to the tree.
Also see other posts: