Add a dynamic tree

To add a dynamic tree:

  1. Create a dynamic tree definition XML file that defines the dynamic tree, based on DynamicTree.dtd. This XML file is used to convert your data bean data into JavaScript. Thus, it must specify your data bean. Other features and configurations are listed in Dynamic tree definition.

    The following is a example Dynamic Tree XML file: 

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE DynamicTree SYSTEM "dynamicTree.dtd">
 
<tree databean="com.ibm.commerce.tools.test.DynamicTreeTestBean2" 
   initDataURLParam="preLoad=2&uid=Item 1" 
   targetFrame="content" 
   expandInContextMenu="true"
   folderIcon="true" 
   contextMenu="true" 
   expandLevel="0"
   treeSearchFailedResourceBundle="common.uiNLS">
 
</tree>

  2. Create a frameset definition file, if necessary. If your frameset definition file does not already exist, create one. Typically, a dynamic tree is displayed in a frameset where the dynamic tree is on the left and the content frame is on the right. This is a typical use, and variations require a custom implementation. The following is an example frameset definition file: 
    <html>
   <frameset framespacing="0" border="0" frameborder="0" cols="60%,*">
      <frame src="/webapp/wcs/tools/servlet/DynamicTreeView?XMLFile=samples.testTree" name="tree">
      <frame src="/webapp/wcs/tools/samples/dtreebuttons.html" name="content">
   </frameset>
</html>

  3. Write a data bean Java class, implementing the following interface: 
    public interface DynamicTreeUserDataBean extends com.ibm.commerce.beans.SmartDataBean {
    public Vector getNodeInfo() throws ECSystemException;
    public Vector getIconInfo() throws ECSystemException;
    public Vector getMenuInfo() throws ECSystemException;
}

    Notice that DynamicTreeUserDataBean inherits from SmartDataBean, which means implement all the regular SmartDataBean methods, plus the getNodeInfo(), getIconInfo(), and getMenuInfo() methods. Information about these methods and other topics about DynamicTreeNode follow. For more information see WebSphere Commerce enterprise beans.

    getNodeInfo()

    The getNodeInfo() method returns a vector of com.ibm.commerce.tools.common.ui.DynamicTreeNode objects, which describe each node on the tree individually. This vector is populated in the populate() method of your data bean. Below is a sample implementation of a getNodeInfo() method:

    public java.util.Vector getNodeInfo() throws com.ibm.commerce.exception.ECSystemException {
   return nodeInfo; // populate nodeInfo before this method is called 
}

    getIconInfo()

    The getIconInfo() method returns a vector of DynamicTreeIconType objects, which define a number of icons belonging to specific node types. This vector can be populated in the populate() method of your data bean. If you are not using icon types, this method may return null. Following is a sample implementation of a getIconInfo() method:

    public java.util.Vector getIconInfo() 
   throws com.ibm.commerce.exception.ECSystemException {
   return iconInfo; 
   }

    getMenuInfo()

    The getMenuInfo() method returns a Vector of DynamicTreeMenuType objects, which define a number of menus belonging to specific node types. This Vector is populated in the populate() method of your data bean. If you are not using menu grouping, this method may return null. Following is a sample implementation of a getMenuInfo() method:

    public java.util.Vector getMenuInfo() 
   throws com.ibm.commerce.exception.ECSystemException {
   return menuInfo;  
   }

    setRequestProperties()

    Use the setRequestProperties() method, which is required by the SmartDataBean interface, to set and retrieve request properties. Ensure that you capture the gotoNode parameter. If gotoNode is specified (which is a path separated by '/'), your data bean should return a Vector of DynamicTreeNodes, with children ending at that node. The following is an example of how to capture the gotoNode parameter from the setRequestProperties() method:

    public void setRequestProperties(com.ibm.commerce.datatype.TypedProperty param) 
   throws Exception {
      requestProperties = param;     // get URL parameters from here... below is just an example
      try {
         gotoNode = requestProperties.getString("gotoNode");  
      } catch (ParameterNotFoundException e) { }
}

    populate()

    Use the populate() method to populate the nodeInfo, menuInfo, and iconInfo vectors that your bean must supply to the Dynamic Tree Web page. This method is called when your SmartDataBean, (implementation of DynamicTreeUserDataBean), is activated, after the setRequestProperties() and setCommandContext() methods are called.

    In the populate() method, you create either the children nodes, the leaves under the node that the user clicks on, the root nodes, or the leaves if the tree is loading for the first time. In our samples, we use a vector called nodeInfo to hold DynamicTreeNode objects. See the following section for details about the DynamicTreeNode class.

    You can also choose to preload grandchildren, or any other deeper level. The DynamicTreeNode class has a property called children that is a vector. This children vector can contain children of the current node. This nesting feature is useful when you want to preload the nodes for several levels at startup time. You can define the initial URL parameters in the XML file. Ensure that your data bean recognizes a special (your choice) URL parameter indicating when to preload. The Tools framework suggests you use the initDataURLParam parameter from your XML file to include a preLoad name-value pair, to indicate the depth of tree nodes that need to be preloaded.

    Refer to the Example: populate() function.

    Each DynamicTreeNode object, stored in the nodeInfo vector, holds the properties of a tree node or leaf. Refer to DynamicTreeNode object properties.

    There are many constructors for the DynamicTreeNode class, but if the one you need is not there, use the setter methods to set individual properties. IconType objects have the following values:

    Property Description
    protected String iconType This value specifies the name of this icon type.
    protected String[] icons This value specifies the icon graphic files included for this icon type. The image path is relative from \commerce\web\images\tools\. For example: 
    {"Arrow", "list/arrow.gif"}

    MenuType objects have the following properties:

    Property Description
    protected String menuType This value specifies the name of this menu type.
    protected String[][] menu This value is an array of string arrays which hold the name-value pairs for the context menu. The first item in the array is the locale sensitive menu title. The second item in the array is the URL which launches the node's action. For example: 
    {{"Open", "/webapp/wcs/tools/servlet/DialogView?XMLFile=csr.shopperSearch"},
  {"",""}}

    A blank name-value pair yields a divider line in the context menu.

  4. Write any required JavaScript and JSP files to perform actions on the tree. These files may add additional processing on selected tree nodes.

Related concepts

Related tasks

Related reference