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.
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.
Tree Creation in the NonRecursiveTree View
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.
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:
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.
/** 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: