Code Example for Creation of a Tree UI Element (SAP Library - Developing User Interfaces with Web Dynpro for Java)

Code Example for Creation of a Tree UI Element

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.
This graphic is explained in the accompanying text
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:

sss

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 This graphic is explained in the accompanying text 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 //@@begin wdDoInit() 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

3. }

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:

This graphic is explained in the accompanying text

Result

The resulting tree displays three customers (No: 0 to 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)