Show TOC Start of Content Area

Procedure documentation Code Example of the Use of a Recursive Node  Locate the document in its SAP Library structure

Use

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.

Creating a tree UI element: Creating the tree UI element in the “RecursiveTree” view.

Creating the corresponding context:
Structure of the appropriate context that provides the data and supports creating the tree UI element.

This graphic is explained in the accompanying text

This graphic is explained in the accompanying text

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.

Note

You can also create the context structure before the creation of 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.

sss

       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 This graphic is explained in the accompanying text in the Properties window. The This graphic is explained in the accompanying text button appears. It enables you to access the Context Viewer dialog box.

       3.      Select the desired context node.

       4.      Confirm by choosing 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 → value node TreeNode

RecursiveTree.TreeNode

TreeNodeType

Node

dataSource property → value node TreeNode

RecursiveTree.TreeNode

Filling Context with Data

The wdDoInit method in the controller implementation enables you to fill the context of a view with data. The wdDoInit 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. The implementation of the controller is generated directly afterwards.

       2.      The source code that is to be called when initializing the controller can be inserted into the user coding area that starts with the character string //@@beginwdDoInit() 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 call the Web application, you must build the Web Dynpro project and install the Web application on the SAP J2EE Engine.

You can call the Web application using a Web address in the browser. The screen captures below show how the resulting tree is displayed in the browser:

Tree example in the browser in collapsed state

Tree example in the browser in expanded state

This graphic is explained in the accompanying text

This graphic is explained in the accompanying text

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 item IDs (0:1:0 to 0:1:4)

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

  

 

End of Content Area