Code Example for Using a Recursive Node 

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.

For information on how to create a tree whose context structure is known at design time, refer to Coding Example for Creating a Tree UI Element.

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.

 

For a detailed description of how to create UI elements in the SAP NetWeaver Developer Studio, see Coding Example for Creating a Tree UI Element.

 

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.

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.

For a detailed description of how to create context structures in the SAP NetWeaver Developer Studio, see Coding Example for Creating a Tree UI Element.

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  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 ® value node TreeNode	RecursiveTree.TreeNode
TreeNodeType	Node	dataSource property ® value node TreeNode	RecursiveTree.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. For detailed instructions for building and deploying a project, refer to Building, Deploying and Running the Project.

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

Tree example in the browser in compressed state.	Tree example in the browser in expanded state.

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)