Show TOC

 Code Example for Creation of a Tree UI ElementLocate this document in the navigation structure

Use

The following example shows the data binding of a Tree UI element to a context structure for which a determined number of levels is specified at design time.

Prerequisites

You created a Web Dynpro application and within a Web Dynpro component you created the view "NonRecursiveTree", in which you can add a tree UI element and its sub-elements TreeNodeType or TreeItemType.

Procedure

Tree Creation in the NonRecursiveTree View

  1. You edit the view by double-clicking the NonRecursiveTree view or by choosing Edit in the context menu of the view.
  2. At the left bottom edge of the SAP NetWeaver Developer Studio appears the outline window with the default container "RootUIElementContainer". This container can be filled with UI elements.
  3. Right-click the Insert Child menu item. A new window appears. Select a UI element of the type Tree from the dropdown list box and specify a name (ID) for the selected UI element. You can use this ID to call the UI element. You can also create a UI element in the View Designer using little icons, which you can drag and drop directly into the View Designer.
  4. Choose Finish.
  5. After inserting the UI element into the view you can edit the properties of the individual UI elements in the properties window. If you have already defined the context structure for this view, you can assign context nodes and context attributes to these UI elements in the properties window. To create a complete Tree UI element, use the procedure described above: You add the required subelements of the type TreeNodeType and/or TreeltemType to the Tree UI element, which then represent the complete tree. See the graphic below on the left:

 

Refer to item 5 under Tree Creation in the NonRecursiveTree View Creation of the Tree_0 UI element in the NonRecursiveTree view.

Refer to item 4 under Context Creation Structure of the context that provides the data and must support the creation of the tree UI element.

Context Creation

Each view contains a corresponding context that provides the data.

  1. Choose the Context tab in the right editor area.
  2. Right-click Context. A context menu appears in which you can create the value nodes and value attributes to create the context structure.
  3. Choose New → Value Node. For example, enter the name "Customer" for this context node and specify the context properties of the node in the properties window. Use the values listed in the graphic below.Confirm by choosing Finish
  4. Repeat this procedure until the context structure looks like the one in the graphic.
    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 or context attributes. This requires the following steps:

  1. Select the Layout tab and edit the properties of the UI element Tree_0 and its subelements.
  2. Navigate to a property and choose the graphic  in the properties window. The  button appears. It enables you to access the Context Viewer dialog box.
  3. Select a context node or the context attribute in the dialog box.
  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 Tree_0. In the same way, the individual associated subelements TreeNodeType and TreeItemType are bound to the corresponding context nodes and context attributes.
    Objekt Objekt- ID Datenbindung Pfad innerhalb der Context-Struktur

    Tree

    Tree_0

    dataSource property → value node customer

    NonRecursiveTree.Customer

    TreeNodeType

    Customer

    dataSource property → value node customer

    NonRecursiveTree.Customer

    TreeNodeType

    Customer

    text property → value attribute id

    NonRecursiveTree.Customer.id

    TreeItemType

    PurchaseItem

    dataSource property → value node purchaseItem

    NonRecursiveTree.Customer

    PurchaseOrder.purchaseItem

    TreeItemType

    PurchaseItem

    text property → value attribute text

    NonRecursiveTree.Customer

    PurchaseOrder.purchaseItem.text

    TreeNodeType

    PurchaseOrder

    dataSource property → value node PurchaseOrder

    NonRecursiveTree.Customer

    PurchaseOrder

    TreeNodeType

    PurchaseOrder

    text property → value attribute text

    NonRecursiveTree.Customer.PurchaseOrder.text

    TreeNodeType

    Order

    dataSource property → value node Order

    NonRecursiveTree.Customer.Order

    TreeNodeType

    Order

    text property → value attribute id

    NonRecursiveTree.Customer.Order.id

     

    TreeItemType

    Item

    dataSource property → value node Item

    NonRecursiveTree.Customer.Order.Item

    TreeItemType

    Item

    text property → value attribute id

    NonRecursiveTree.Customer.Order.Item.id

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. Select the Implementation  tab. 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:
    /** Hook method called to initialize controller. */
      public void wdDoInit()
      {
        //@@begin wdDoInit()
    
        IPrivateNonRecursiveTree.IContextElement el =     wdContext.currentContextElement();
        el.setSelectedCustomerIdx(-1);
        el.setSelectedOrderIdx(-1);
        el.setSelectedItemIdx(-1);
        el.setSelectedPurchaseOrderIdx(-1);
        el.setSelectedPurchaseItemIdx(-1);
        el.setIdx(0);
      
    
        IPrivateNonRecursiveTree.ICustomerNode customerNode =     wdContext.nodeCustomer();
        for (int i = 0; i < 3; i++) {
    
           IPrivateNonRecursiveTree.ICustomerElement customer =        customerNode.createCustomerElement();
           customer.setId("Customer No:" + i);
           customerNode.addElement(customer);
          
           IPrivateNonRecursiveTree.IOrderNode orderNode = customer.nodeOrder();
           for (int j = 0; j < 3; j++) {
    
              IPrivateNonRecursiveTree.IOrderElement order =           orderNode.createOrderElement();
              order.setId("Order Id:" + i + ":" + j);
              order.setText("Order Text:" + i + ":" + j);
              orderNode.addElement(order);
          
              IPrivateNonRecursiveTree.IItemNode itemNode = order.nodeItem();
              for (int k = 0; k < 5; k++) {
    
                 IPrivateNonRecursiveTree.IItemElement item =               itemNode.createItemElement();
                 item.setId("Item Id:" + i + ":" + j + ":" +k);
                 item.setText("Item Id:"+ i + ":" + j + ":" +k);
                 itemNode.addElement(item);
              } 
           } 
          
    
           IPrivateNonRecursiveTree.IPurchaseOrderNode purchaseOrderNode =        customer.nodePurchaseOrder();
           for (int j = 0; j < 3; j++) {
    
              IPrivateNonRecursiveTree.IPurchaseOrderElement purchaseOrder =           purchaseOrderNode.createPurchaseOrderElement();
              purchaseOrder.setText("Purchase Order:" + i + ":" + j);
              purchaseOrderNode.addElement(purchaseOrder);
          
    
              IPrivateNonRecursiveTree.IPurchaseItemNode purchaseItemNode =           purchaseOrder.nodePurchaseItem();
              for (int k = 0; k < 5; k++) {
    
                 IPrivateNonRecursiveTree.IPurchaseItemElement purchaseItem =              purchaseItemNode.createPurchaseItemElement();
                 purchaseItem.setText("Purchase Item Id:"+ i + ":" + j + ":" +k);
                 purchaseItemNode.addElement(purchaseItem);
              } 
           } 
        }
     
        //@@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. Build and deploy the application and call it by choosing Run.

You can call the Web application using a Web address in the browser. The following graphic shows the resulting tree in the browser:

Result

The resulting tree displays three customers (No: 0 to No: 2), each of them containing: