Tree View

treeNode

Defines the items in the tree. The level of the tree is defined by the nesting depth. A treeNode with sub nodes has an indicator. The indicator is a triangle that shows if the node is expanded or collapsed .

• encode

  A boolean value that defines how the text is interpreted. HTML text formatting commands (for example, <h1>, <i> etc.) can be used to change the display of the text. If there are no formatting commands in the text string, the encode attribute has no effect.

  For example: text="<h1><i>Important</i></h1>"

  If encode="false" , the browser output is the text string rendered by interpreting the formatting commands.

  If encode="true" , the browser output is <h1><i>Important</i></h1> , because the formatting commands are displayed but not interpreted.

• hoverMenuId

  Defines which hover menu is displayed for this tree node. You can define different trigger methods to display the hover menu. For more details, see hover menu.

• id

  Identification name of the tree.

• onNodeClick

  Defines the event handling method that will be processed when the user clicks on the text of the node.

• onNodeClose

  Defines the event handling method that will be processed when the user clicks on the node symbol. The node has to be initially defined in expanded mode (isOpen=true) in order to create the event. The event will than always occur when the user clicks on the symbol to expand the node. No event occurs when the tree node expands.

  When the onNodeClose attribute is set, the tree node does not collapse on the web client. The event is sent to the server and the application has to take care about the further processing (for example, define the sub nodes of the tree node and set the tree node collapsed (isOpen=false).

• onNodeExpand

  Defines the event handling method that will be processed when the user clicks on the node symbol. The node has to be collapsed initially (isOpen=false) in order to create the event. The event will than always occur when the user clicks on the symbol to expand the node. No event occurs when the tree node collapses.

  When the onNodeExpand attribute is set, the tree node does not expand on the web client. The event is sent to the server and the application has to take care about the further processing (for example, define the sub nodes of the tree node and set the tree node expanded (isOpen=true).

  Note

  The attributes onNodeExpand and onNodeClose are useful for trees with a lot of entries (transmission problems possible since the page could become pretty big) or if you want to have full control over the tree nodes and build the sub nodes dynamically. The server application has to take care about the modes of the node itself. If you have set an onNodeExpand attribute initially, you have to take care about following steps yourself when the event is fired:

  • Create the sub nodes.

  • Set the node status (isOpen=true).

  • Set the onNodeClose event to receive an event when the user closes the tree node again.

  This works vice versa if you have set an onNodeClose attribute initially.

• open

  A Boolean value that indicates if the node is expanded or collapsed. This attribute only has an effect when the node has at least one sub node. If a node is expanded all sub nodes of the node are displayed. Symbols to indicate the node status:

  

  

• text

  Defines the string of text displayed for the treeNode. HTML commands for text formatting (for example, <b> for bold characters) can be used..

• tooltip

  Defines the hint of the treeNode which is displayed as the mouse cursor passes over the treeNode, or as the mouse button is pressed but not released.

Result

Programming Tip

Usually the root node is visible and all sub nodes are displayed on the second level. If you make the root node invisible all sub nodes are displayed on first level.

Example

using the taglib

   <hbj:tree
           id="S_Tree"
           title="e-enviroment"
           tooltip="enviroment of my computer"
           >
           <% S_Tree.setRootNodeIsVisible(false); %>

           <hbj:treeNode
                    id="e_root"
                    text="Desk"
                    isOpen="true"
                    tooltip="My desk"
           >
               <hbj:treeNode
                        id="e_comp"
                        text="Computer"
                        isOpen="true"
               >
                    <hbj:treeNode
                             id="e_comp_fl"
                             text="Floppy"
                    />
                    <hbj:treeNode
                             id="e_comp_hd"
                             text="Harddisk"
                    />
                    <hbj:treeNode
                             id="e_comp_dvd"
                             text="DVD"
                    />
                </hbj:treeNode>

                <hbj:treeNode
                         id="e_net"
                         text="Network"
                         isOpen="true"
                         tooltip="Company network"
                >
                    <hbj:treeNode
                             id="n_lan"
                             text="LAN"
                             tooltip="Local Area Network"
                    />
                    <hbj:treeNode
                             id="n_wan"
                             text="WAN"
                             tooltip="Wide Area Network"
                    />
                    <hbj:treeNode
                             id="n_infra"
                             text="Infrared"
                             tooltip="Infrared connection"
                    />
                </hbj:treeNode>

           </hbj:treeNode>
   </hbj:tree>

            

Result