Tree recursive node

Hi Marco,

Code Example for Using a Recursive Node

The example below shows the Data Binding of a Tree UI Element to a context structure whose hierarchical structure is not known at design time and for which, therefore, a fixed number of levels cannot be determined at design time. The context provides a special node for this case, the recursive node.

Prerequisites

You created a Web Dypro application and you created the view ?RecursiveTree? within a Web Dynpro Component, which you can include into a Tree UI Element and its subelement TreeNodeType.

Procedure

Create a tree in the ?RecursiveTree? view as follows:

       1. Add the tree UI element with the ID Tree.

       2. Add the node element of type TreeNodeType with the ID Node.

Context Creation:

The context that provides the data is created as follows:

       1. Creating the singleton node TreeNode with cardinality 0..n.

       2. Creating the context attribute text.

       3. Creating the recursive node Child.

You can also create the context structure before creating the view. In this case, you can already bind the bindable properties of the UI element to the context nodes and context attributes while inserting the UI elements.

Data Binding

To display the data in a UI element, the appropriate properties of the UI element must be bound to the context nodes.

       1. To do this, select the Layout tab page and edit the properties of the UI element Tree with the ID Tree and its subelement Node.

       2. Navigate to the dataSource property and choose in the Properties window. The button appears. It enables you to access the Context Viewer dialog box.

       3. Select the desired context node.

       4. Choose OK.

       5. The UI element property is now bound to a context element. The following table lists the main data binding relationships of the Tree example. The associated TreeNodeType subelement Node is bound to the corresponding context node in the same way.

Object                   Object ID Data Binding Path Within the Context Structure

Tree                       Tree dataSource property ® RecursiveTree.TreeNode

                                                  value node TreeNode

TreeNodeType        Node dataSource property ® RecursiveTree.TreeNode

                                                  value node TreeNode

Filling the Context with Data

The wdDoInit method in the controller implementation provides a means of filling the context of a view with data. The method is a Hook method, whose source code is executed when the view controller is initialized.

       1. To do this, go to the Implementation tab page. This selection generates the controller implementation.

       2. The source code that is called when initializing the controller can be inserted into the user coding area that starts with the character string //@@begin wdDoInit() and ends with the character string //@@end. The source code in the wdDoInit method for this example is:

-

-

public void wdDoInit()

  {

    //@@begin wdDoInit()

    IPrivateRecursiveTree.ITreeNodeElement level1element;

    for (int i = 0; i < 2; i++) {

      level1element = wdContext.createTreeNodeElement();

      level1element.setText("Node " + i);

      wdContext.nodeTreeNode().addElement(level1element);

      for (int j = 0; j < 4; j++) {

         IPrivateRecursiveTree.ITreeNodeElement level2element = level1element.nodeChild().createTreeNodeElement();

            level2element.setText("SubNode " + i + "." + j);

            level1element.nodeChild().addElement(level2element);

          for (int k = 0; k < 6; k++) {

             IPrivateRecursiveTree.ITreeNodeElement level3element = level2element.nodeChild().createTreeNodeElement();

                level3element.setText("SubNode " + i + "." + j + "." + k);

                level2element.nodeChild().addElement(level3element);

              for (int l = 0; l < 8; l++) {

                 IPrivateRecursiveTree.ITreeNodeElement level4element = level3element.nodeChild().createTreeNodeElement();

                    level4element.setText("SubNode " + i + "." + j + "." + k + "." + l);

                    level3element.nodeChild().addElement(level4element);

               }

        }

      }

    }

    //@@end

  }

-

-

Calling the Web Application

Before you can call the Web application, you must build the corresponding Web Dynpro project and install the Web application on the SAPJ2EE Engine. You use a Web address to call the Web application in the browser.

Result

The resulting tree displays three customers, customer no:0 to customer no:2, each of them containing:

·        Three purchase orders (0:0 to 0:2) with five purchase items (IDs 0:1:0 to 0:1:4)

·        Three orders (0:0 to 0:2) with five items (IDs 0:1:0 to 0:1:4)

Hope that helps!

Best regards, Karin