Displaying the Current Date Using Data Binding 

Use

To display programmatically specified data (for example, the current time) in a view, you can use data binding between the properties of UI elements and a structured storage place, which is known as context.

This simple example only uses the view context, which is contained in every view.

In the following exercises you use the static text Welcome to Your first Web-Dynpro-Application, which is displayed in the WelcomeText UI element of your view. You will add the programmatically specified information of the time and date to the static text.

Procedure

You declaratively define a value attribute for the Web Dynpro context WelcomeText and programmatically assign a value to the value attribute in a predefined handling routine of the view controller. Finally, you bind the WelcomeText property of the TextView control to this context attribute (declaratively).

Declaring a Value Attribute for the Web Dynpro Context

       1.      Open your WelcomeView view in the View Designer and select the Context tab.

       2.      Choose New ® Value Attribute in the context menu of the Context node. Enter the name WelcomeText for this value attribute and choose Finish.

The properties that belong to a value attribute are displayed in the Properties tab in the lower section of the View Designer. By default, the underlying data type of a value attribute for the Web Dynpro context is declared as string.

       3.      Select the Implementation tab. You can modify the implementation source code of the view controller in the corresponding user-specific program sections. This source code is generated by the system.

Changing the State of the View Context Using the Program

       4.      Add the following code to the wdDoInit()method, which is automatically executed when the view controller is initialized by the Web Dynpro runtime environment.

/** Hook method called to initialize controller. */   public void wdDoInit()   {     //@@begin wdDoInit()     String welcomeText = "Welcome to Web Dynpro, it’s ";     welcomeText += Calendar.getInstance().getTime().toString();     welcomeText += "!";     wdContext.currentContextElement().setWelcomeText(welcomeText);     //@@end   }

 

After defining the new value attribute for the view context and regenerating several classes and interfaces, you can access the root node of the view context using wdContext.currentContextElement() and assign a new value to the value attribute WelcomeText using the setWelcomeText(String text) method.

In this example, the text to be displayed is part of the source text. You should not use this procedure if you want to internationalize your application.

       5.      Insert the following text at the beginning of the source text to access the static methods of the java.util.Calendar class:

//@@begin imports import com.sap.tc.webdynpro.tutorials.introduction.basics.wdp.IPrivateWelcomeView; import java.util.*;        6.      //@@end

 

You can also insert the missing source code using the Quick Fix function of the SAP NetWeaver Developer Studio. Place the cursor on the wavy underlined character string Calendar. Select CTRL + 1 and double-click Import 'java.util.Calendar'. The import line is inserted automatically.

Data Binding

For the data binding between your TextView UI element and the value attribute of the view context, proceed as follows:

       7.      Select the Layout tab in the View Designer and highlight your TextView UI element WelcomeText in the outline area.

       8.      In the lower section of the View Designer, on the Properties tab of the text property, choose the  button at the right of the value field.

       9.      Select the WelcomeText value attribute in the Context Viewer and choose OK.

You can recognize the data binding of a UI element property to a value attribute of the view context by the address WelcomeView.WelcomeText, which is the property value. The general naming convention for this address is as follows: <view name>.<value attribute name>.

Redeploying and Starting the Application

For detailed information, refer to Deploying a Web Dynpro Project.

   10.      Save the metadata.

   11.      Start the generation.

   12.      Start the deployment and the execution of the application in the context menu of the application.

.

...

Result

You have successfully created your first Web Dynpro application. You used data binding between a UI element property in the view layout and a value attribute in the view context to programmatically define a text and display it.