Defining Data Binding for UI Elements 

To implement data transports across several views, you use data binding. You can do this only if the UI elements involved have properties that can be bound. If so, the reference to the appropriate context element is assigned to this kind of property as a value. You use this assignment to bind the UI element to the context of the associated view controller. This fulfills the prerequisites for transporting data to or from this UI element.

You may want to know why you need to do this (as well as what to do). If so, the following information may be helpful.

A short digression on context theory You use the term context to refer to a structured repository for saving controller data. Every view always possesses a controller, which saves its local data in a context, known as the view context. A UI element can be bound to this context only if it belongs to the same view. In general, however, the lifetime of a view context is too short, and its visibility too restricted for it to be suitable for saving data used across several views. This is where the standard context of the Web Dynpro application comes into play. This standard context belongs to the controller of the Web Dynpro component. Its lifetime is determined by the lifetime of the whole component. Moreover, this context can be made visible to some of the view controllers and not others. So that you do not have to copy data explicitly between two contexts, you can map the relevant elements of the two contexts to each other. This is known as context mapping. Whenever an element of a view context is mapped to the corresponding element of the component context, the data is stored in the (global) component context, not in the (local) view context.

 

Prerequisites

The structure of your Welcome project is currently displayed in the Web Dynpro Explorer.

 

Procedure

The following procedure is split into several parts. You start by creating a global data storage space using the component context; you create the necessary view contexts; you then map elements to elements of the component context that you have created. Finally you ensure that the view context elements are bound to suitable UI elements using the properties.

Creating a component context

...

       1.      In the project structure, expand the node Web Dynpro → Web Dynpro Components → WelcomeComponent.

       2.      Double-click the   Component Controller node.

       3.      In the editor that appears, choose the Context tab.

       4.      Open the context menu for the root node Context and choose the option New → Value Attribute.

You can create a new value attribute in the wizard that appears.

       5.      Enter the name Username and choose Finish.   

The value attribute is added to the root node of the context.

 

You will use the context definition for the Web Dynpro component later, to implement a data transfer beyond the local view context.

Mapping the context for the StartView to the component context

...

       1.      Open the Data Modeler for the WelcomeComponent. In the project structure, choose the WelcomeComponent node, and choose  Open Data Modeler from the context menu.

       2.      In the left toolbar, choose Create a data link.

       3.      Starting above the StartView rectangle, press the left mouse button, and keep it pressed.

       4.      Draw a line to the Component Controller rectangle and release the left mouse button.

In the wizard that appears you can map the new view context element to the component context element.

       5.      Drag the UserName node in the context of the component controller to the root node of the view controller context, and drop it.

       6.      In the new wizard window that appears, check the new created element UserName (left pane) and edit Name as a new name for the view context element (right pane).

       7.      Confirm with OK.

       8.      Choose Finish.

You have now created the a new element for the view context and mapped it to the corresponding component context element.

Creating a context for the ResultView

...

       1.      If you have not already done so, open the Data Modeler for the WelcomeComponent.

       2.      In the left toolbar, choose Create a data link.

       3.      Starting above the ResultView rectangle, press the left mouse button, and keep it pressed.

       4.      Draw a line to the Component Controller rectangle and release the left mouse button.

       5.      In the wizard that appears open the context menu for the root node Context and choose the option New → Value Attribute.

       6.      Enter a name HeaderText for the new context attribute and choose Finish. 

In this case, however, do not map to the context.

 

...

The Data Modeler looks now as follows:

 

Binding UI elements to a context

...

       1.      Open the View Designer for the StartView again.

       2.      Choose the Layout tab.

       3.      Select the input field name.

       4.      In the Properties window, assign the value property to the appropriate context attribute by choosing the Value properties and then clicking  (on the right).

In the dialog box that appears, choose the context attribute Name and confirm by choosing OK.

       5.      Do the same for ResultView, this time assigning the appropriate context element, HeaderText, to the text property for the DefaultTextView.

The View Designer displays the following layout for the ResultView:

 

You have now created a data binding between UI elements and the corresponding context value attributes.

 

Generating a line of text dynamically using data binding

...

       1.      Open the View Designer for the ResultView again.

       2.      Choose the Implementation tab.

       3.      Add the following lines to the event handler method onPlugFromStartView():

public void onPlugFromStartView (com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent) {   //@@begin onPlugFromStartView(ServerEvent)   String headerText = "Congratulations ";   headerText +=   wdThis.wdGetWelcomeComponentController().wdGetContext().currentContextElement().getUsername();   headerText += "!";   wdContext.currentContextElement().setHeaderText(headerText);   //@@end }

The event handler for the inbound plug, onPlugFromStartView(), is called when the program enters the ResultView. You use this method to generate a text content dynamically. The dynamic value is saved across local view contexts, and made available by means of the associated context element.

To enter the source code, you can avail of the Code Assist functions provided by the Developer Studio:

 

       4.      Save the new metadata by choosing the icon  (Save All Metadata) from the toolbar.

Result

You have now established that a data transport can take place between UI elements that are part of different views.

Next step:

Creating a Web Dynpro Application