Tree and Tree Node Components - Threadinar7

Question

Hi All,
This is the seventh in the "Threadinar" series , please see Threadinar6 at
http://forum.sun.com/jive/thread.jspa?threadID=100601 for details
In this Threadinar we will focus on the
"Tree" and "Tree Node" Components
Let us begin our discussion with the Tree Component.
Tree Component
You can drag the Tree component from the Palette's Basic category to the Visual Designer to create a hierarchical tree structure with nodes that can be expanded and collapsed, like the nodes in the Outline window. When the user clicks a node, the row will be highlighted. A tree is often used as a navigation mechanism.
A tree contains Tree Node components, which act like hyperlinks. You can use a Tree Node to navigate to another page by setting its url property. You can also use a Tree Node to submit the current page. If the the Tree Node's action property is bound to an action event handler, selecting the node automatically submits the page. If the Tree Node's actionListener property is bound to an action listener, opening or closing the node automatically submits the page. You set Tree Node properties in the Tree Node Component Properties window.
* If you use this component to navigate between pages of a portlet, do not use the url property to link to a page. Instead, use the Navigation editor to set up your links to pages.
* Events related to tree node selection do not work correctly in portlets because the component uses cookies to pass the selected node id back and forth, and cookies are not correctly handled by the portlet container. You cannot handle tree node selection events in portlet projects.
Initially when you drop a tree on a page, it has one root node labeled Tree and one subnode labeled Tree Node 1. You can add more nodes by dragging them to the tree and dropping them either on the root node to create top level nodes or on existing nodes to create subnodes of those nodes. You can also right-click the Tree or any Tree Node and choose Add Tree Node to add a subnode to the node.
Additionally, you can work with the component in the Outline window, where the component and its child components are available as nodes. You can move a node from level to level easily in the Outline window, so you might want to work there if you are rearranging nodes. You can also add and delete tree nodes in the Outline window, just as in the Visual Designer.
The Tree component has properties that, among other things, enable you change the root node's displayed text, change the appearance of the text, specify if expanding or collapsing a node requires a trip to the server, and specify whether node selection should automatically open or close the tree. To set the Tree's properties, select the Tree component in your page and use the Tree Component Properties window.
The following Tutorial ("Using Tree Component") is very useful to learn using Tree components
http://developers.sun.com/prodtech/javatools/jscreator/learning/tutorials/2/sitemaptree.html
See Also the Technical Article - "Working with the Tree Component and Tree Node Actions"
http://developers.sun.com/prodtech/javatools/jscreator/reference/techart/2/tree_component.html
Tree Node Component
You can drag the Tree Node component from the Palette's Basic category to a Tree component or another tree node in the Visual Designer to create a node in a hierarchical tree structure, similar to the tree you see in the Outline window.
The tree node is created as a subnode of the node on which you drop it. If you drop the node on the tree component itself, a new node is created as a child of the root node. You can see the hierarchical structure clearly in the Outline window, where you can also easily move nodes around and reparent them.
You can also add a tree node either to a Tree component or to a Tree Node component by right-clicking the component and choosing Add Tree Node.
A Tree Node component by default is a container for an image and can be used to navigate to another page, submit the current page, or simply open or close the node if the node has child nodes.
* If you select the Tree Node component's node Tree Node icon in the Outline window, you can edit its properties in the Tree Node Properties window. You can set things like whether or not the Tree Node is expanded by default, the tooltip for the Tree Node, the label for the tree node, and the Tree Node's identifier in your web application.
* You can use a Tree Node to navigate to another page by setting its url property. You can also use a Tree Node to submit the current page. If the the Tree Node's action property is bound to an action event handler, selecting the node automatically submits the page. If the Tree Node's actionListener property is bound to an action listener, opening or closing the node automatically submits the page.
- Note: If you use this component to navigate between pages of a portlet, do not use the url property to link to a page. Instead, use the Navigation editor to set up your links to pages. In addition, events related to tree node selection do not work correctly in portlets because the component uses cookies to pass the selected node id back and forth, and cookies are not correctly handled by the portlet container. You cannot handle tree node selection events in portlet projects.
* If you select the image in the Tree Node, you can see that its icon property is set to TREE_DOCUMENT. If you right-click the image on the page and choose Set Image, you can either change the icon to another one or choose your own image in the Image Customizer dialog box. For more information on working with an image in a tree node, see Image component.
- Note: The image used in a tree node works best if it is 16x16 or smaller. Larger images can work, but might appear overlapped in the Visual Designer. You can right-click the component and choose Preview in Browser feature to check the appearance of the images.
Please share your comments, experiences, additional information, questions, feedback, etc. on these components.
------------------------------------------------------------------------------- --------------------

Answer 1

One challenge I had experience was to make the tree
always expanded on all pages (I placed my tree menu
in a page fragment so I can just import it in my
pages).Did you solve this problem. It would be interesting to know what you did.
To expand a node you call setExpanded on the node. Here is some code from a tutorial that a coworker of mine is working on.
In the prerender method:
       Integer expandedPersonId = getRequestBean1().getPersonId();
         // If expandedPersonId is null, then we are not coming back
        // from the Trip page. In that case we do not want any trip
        // nodes to be pre-selected (highlighted) due to browser cookies.
        if (expandedPersonId==null) {
            try {
                HttpServletRequest req =(HttpServletRequest)
                getExternalContext().getRequest();
                Cookie[] cookies = req.getCookies();
                //Check if cookies are set
                if (cookies != null) {
                    for (int loop =0; loop < cookies.length; loop++) {
                        if (cookies[loop].getName().equals
                                ("form1:displayTree-hi")) {
                            cookies[loop].setMaxAge(0);
                            HttpServletResponse response =(HttpServletResponse)
                            getExternalContext().getResponse();
                            response.addCookie(cookies[loop]);
            } catch (Exception e) {
                error("Failure trying to clear highlighting of selected node:" +
                        e.getMessage());
        }                  ... (in a loop for tree nodes)...
                  personNode.setExpanded(newPersonId.equals
                                (expandedPersonId));In the action method for the nodes:
       // Get the client id of the currently selected tree node
        String clientId = displayTree.getCookieSelectedTreeNode();
        // Extract component id from the client id
        String nodeId = clientId.substring(clientId.lastIndexOf(":")+1);
        // Find the tree node component with the given id
        TreeNode selectedNode =
                (TreeNode) this.getForm1().findComponentById(nodeId);
        try {
            // Node's id property is composed of "trip" plus the trip id
            // Extract the trip id and save it for the next page
            Integer tripId = Integer.valueOf(selectedNode.getId().substring(4));
            getRequestBean1().setTripId(tripId);
        } catch (Exception e) {
            error("Can't convert node id to Integer: " +
                    selectedNode.getId().substring(4));
            return null;
It would also be great if I can set the tree
readonly where the user cannot toggle the expand
property of the tree (hope this can be added to the
tree functionality).