Creating a Web Dynpro Window for the Address Book

Use

To display an address book in a Web Dynpro window, you must define this in a view. To create the address book, you use the following procedure:

·         Create the Web Dynpro window

·         Create and embed the Web Dynpro view

·         Create the context for the address book

·         Design the layout of the AddressbookView

·         Implement the controller of the AddressbookView

 

Procedure

Creating a Web Dynpro Window

1.      In the Web Dynpro Explorer, expand the following nodes: Web Dynpro à Web Dynpro Components à PopupComp à Windows.        2.      Open the context menu of the Windows node and choose Create Window.        3.      In the Create wizard, give the window the name AddressbookWindow.        4.      Leave the default settings unchanged and choose Finish to confirm.        5.      Change the title of the AddressbookWindow in the Properties view by changing title to Addressbook.

Creating and Embedding a Web Dynpro View

...

       1.      Open the context menu of the Web Dynpro window AddressbookWindow and choose Embed View.

       2.      In the Create wizard, choose Embed new View and choose Next to confirm.

       3.      Enter the name AddressbookView, leave the default settings unchanged, and choose Finish to confirm.

Creating Context for the Address Book

You want the address book to display names and e-mail addresses. You want the selected e-mail address to be displayed in the AddressbookView and in the EmailView. Therefore, you must create context for the e-mail address in the component controller and map it to the context of both views:

...

       1.      Open the Component Controller of the PopupComp (Web Dynpro Components à PopupComp à Component Controller).

       2.      Choose the Context tab page and create the context node Addressbook and the context attribute Email:

 

Context Element	Type	Properties	Value
Addressbook	Value node	cardinality	0..n
Email	Value attribute	type	String

Once you have enhanced the context in the Component Controller, you can map it to the context of the AddressbookView and the EmailView:

       3.      To open the Data Modeler for the PopupComp, in the context menu of the PopupComp, choose Open Data Modeler.

The PopupComp overview opens in the Data Modeler:

       4.      Create a Data Link from the AddressbookView to the Component Controller and map the Addressbook context node and the Email context attribute from the Component Controller to the AddressbookView:

       5.      Use the same procedure as in step 4 to map the Addressbook context node and the Email context attribute of the Component Controller to the context of the EmailView.

Since you only want to display the name belonging to the e-mail in the AddressbookView, you only define it in the context of the AddressbookView.

       6.      Open the Context Editor of the AddressbookView and add the context attribute Name, which belongs to the Addressbook context node, to the context.

 

Context Element	Type	Properties	Value
Name	Value attribute	type	String

 

Designing the Layout of the AddressbookView

The layout of the AddressbookView consists of a table with two columns. The first column contains the e-mail address and the second column contains the corresponding name. The table also has a toolbar pushbutton Take this address, which you use to confirm the e-mail address selection.

       1.      Switch to the Layout tab page of the AddressbookView.

       2.      Create a table called Table.

       3.      In the context menu of the table Table, choose Create Binding.

       4.      In the Table binding wizard, choose the Addressbook context node with the value attributes Name and Email. Choose Finish to confirm.

 This creates the Email and Name table columns (see figure 6) automatically.

       5.      To create the toolbar in which you want the pushbutton to be displayed, in the context menu of the table Table, choose Insert ToolBar.

This creates a toolbar for the table automatically.

       6.      In the Toolbar context menu, choose Insert ToolBarItem. In the wizard that appears, create a ToolBarButton called ToolBarButton.

       7.      Change the properties of the ToolBarButton:

Properties	Value
ToolBarButton of type ToolBarButton
text	Take this address

 

Implementing the Controller of the AddressbookView

...

       1.      To fill the address book with example addresses, add the following program code to the method wdDoInit().

wdDoInit()

public void wdDoInit() {   //@@begin wdDoInit()         IAddressbookNode addressNode = wdContext.nodeAddressbook();   IPrivateAddressbookView.IAddressbookElement addressElement;     //Person 1   addressElement = addressNode.createAddressbookElement();   addressNode.addElement(addressElement);   addressElement.setName("Hans Mustermann");   addressElement.setEmail("hans.mustermann@sap.com");     //Person 2   addressElement = addressNode.createAddressbookElement();   addressNode.addElement(addressElement);   addressElement.setName("Gundula Glücklich");   addressElement.setEmail("gundula@glücklich.de");       //@@end }

 This writes the example addresses to the context when the AddressbookView is initialized.

Result

You have created a Web Dynpro window that embeds the AddressbookView, which displays an address book.

 Next step:

Interaction of the EmailWindow and the AddressbookWindow