Designing the View Layout SAP BASIS

Now is the time to define the layout for our user interfaces (UI). We are going to add UI elements in the two views created, according to the result we have defined at the start of this exercise. We will first define the layout for the StartView and then the same process with the ResultView.

StartView Layout

As the starting point, we must have active the design view for the StartView. Selecting the Layout tabstrip, we can see the output text that the system will generate by default with the name of the view. Simultaneously, we can see in the Outline view (under the Web Dynpro Explorer view) the list of UI elements included, lined up under the root node and with a tree representation. If we select an element in this view, or in the Layout tabstrip of the design view, the system shows the element properties in a new view, known as the properties view.

We can see that all the active views within the screen have their role when developing Web Dynpro applications. From the Outline view, we select the root element Root UI Element Container and set the following properties:

Property Value
Layout GridLayout
cellPadding 5
colCount 3

Note While we have not selected the layout type, some properties do not show on the property view. Some properties can only accept certain values. When this happens, in the column of values there is a button that will show up the list of possible values. We can select the value with keyboard arrow keys or with the mouse . The default value for the properties with an asterisk to the right of the field.

Selecting a value using keyboard arrow keys or using the mouse

Selecting a value using keyboard arrow keys or using the mouse

Next, let's modify the element DefaultTextView, which was automatically generated, using the following values:

Property Value
Design header2
Text Welcome to the WEB DYNPRO World ...
ColSpan 3

In the Outline view, let's select the root element, RootUIElementContainer, open the Context menu, and select Insert Child.

The root element is selected in the Outline view

The root element is selected in the Outline view

As Element ID enter Label and select also Label in the Type field. Next, press the Finish button.

Update the properties as follows:

Property Value
Text Enter your name
labelFor DefaultTextView
paddingTop Large

Using the same procedure, let's create two new graphic elements using the following properties:

First element: ID: "Name," Type: InputField

Property Value
Tooltip Your name
Value

For the moment, we will leave blank (no value) within the "value" property. We will see a way to fill it up in the following step of the procedure.

Second Element: ID: "go," Type: Button.

Property Value
Text Next
Tooltip Go to the next view
event | onAction Go

In the design view Layout tabstrip, we can see the result of these actions.

First Web Dynpro application

First Web Dynpro application

Save your work by clicking on the Save All Metadata button. We should not worry at this stage in case you see some information or warning messages in the task list.

ResultView Layout

Open the view ResultView from the design view.

In the Outline view, select the root element RootUIElementContainer and modify the following properties:

Property Value
Layout GridLayout
cellPadding 5
colCount 2

Select the element DefaultTextView that was automatically generated and update the following properties:

Property Value
design header 2
text
colSpan 2

Leave the "text" property with a blank value. We will later see the way to fill out this field automatically. In the Outline view, select the root element RootUIElementContainer, open its Context menu, and select insert Child. Enter the name "message," of the type TextView, and click the Finish button. Let's do the same procedure to create a new element of type Button with the ID "back." Let's assign the following properties to the fields we have just created:

First element: ID: "message", Type: TextView

Property Value
Text The application works fine ...
paddingTop Large
Second element: ID: "back," Type: Button.
Property Value
Text Back
Tooltip Back to the first screen
Event | onAction Back

In the design view Layout tabstrip, you can see the output.

Output of procedure to create a new element

Output of procedure to create a new element

Save your work. Although using wizards, we have already developed the basic parts of our application. Now, we only need that the value entered in the first view should be processed and displayed in the second view. To do that, it is not required to implement an explicit data transfer. The Web Dynpro applications allow us to implement this requirement in a very simple way, making a data link on a "context."

Data Binding Definition in UI Elements

For implementing data transfer between the views of a Web Dynpro application, the method to use is called data binding. This can only be done with UI elements that have properties that can accept this type of binding. If this is the case, as a value of the property there will be a reference to a corresponding context element. Refer to the definition of context given previously.

The following procedure has several parts:

  • First, we will create a global storage space that will be used for the component context.
  • Next, we will create the necessary view contexts.
  • Then, we will map the elements of the view with the context elements created in the previous steps.
  • Finally, we will bind the context elements of the view to the UI elements, using the properties of these elements.

Creating a Component Context

From the Web Dynpro Explorer, expand the node Web Dynpro | Web Dynpro Components | WelcomeComponent and double-click on the node Component Controller.

Creating a Component Context

In the displayed editor, select the Context tabstrip.

Context tabstrip

Open the Context menu of the root node Context and select the option New | Value Attribute.

Creating-a-Component-Context

Now we can create a new attribute from the wizard that is displayed. Enter the name "Username" and press the Finish button. An attribute node is added to the root node of the context.

Creating-a-Component-Context

We will use this context definition in the following points to implement the data binding in the local view contexts.

Auditing and Additing Dependencies to the Views

Open the design view of StartView, select the Property tabstrip, and under the label Required Controllers, press the Add button. In the new screen, select WelcomeComponent - com.offilog.examples.welcome and confirm it by pressing the OK button.

Auditing and Additing Dependencies to the Views

Repeat the last steps, but in this case with the view ResultView. With these actions we have created the appropriate dependencies for each view in our project "Welcome."

Creating the View Contexts

Let's open again the StartView in design mode and select the Context tabstrip. In the Context menu of the root node, select the option New | Value Attribute.

Creating the View Contexts

Enter the value "Name" and press the Finish button. from the Context menu of the Name attribute just created, select Edit Context Mapping.

Creating-the-View-Contexts

From the component context, select the element Username and click the Finish button. After this action, we can see that the icon that shows up next to the Context attribute has changed, so that we can easily see that the attribute has been mapped with an element of the component context.

Creating-the-View-Contexts

Now, we have to repeat the last steps to do the same procedure in the view ResultView. The attribute to create we can name it Header Text and on this occasion we will not map the attribute with any element of the component context.

Assigning UI Elements to Contexts

Open again the StartView in design mode, and select the Layout tabstrip. Select as input field "name." In the "value" property in the properties window, assign the appropriate context attribute by selecting the possible entries from a list box. In the dialog box that is displayed, select the context attribute "Name" and click the OK button. Let's go know to the ResultView. In the design view, select the view ResultView and click the Layout tabstrip. Select the text element DefaultTextView and, in the properties window, update the value of the "text" property with the corresponding context element HeaderText.

Now, in the design window, we can see the layout shown.

Assigning UI Elements to Contexts

With these last actions we have defined the "data binding" between the UI elements and their corresponding context attributes.

Dynamic Generation of a Text Line Using Data Binding

Select the view ResultView in design mode and click the Implementation tabstrip. Now, we enter some coding (the first one in the whole exercise) on the method of the event handler onPlugFromStartView().

The event handler of the entry point onPlugFromStartView is launched when the view ResultView is processed. We can use this event, as in this case, to generate text dynamically. The dynamic value is saved in the contexts of the local views and it can be available for all the associated context elements. Remember that to enter code we can use the code wizard, which is automatically activated when we enter a period sign (.) after the name of an object.

Dynamic-Generation-of-a-Text-Line-Using-Data-Binding

Save your work up to now by clicking on the Save All Metadata button. As a result of the previous actions, we have established data transfer between the UI elements of different views. Now, the remaining work is to create the Web Dynpro application, to deploy it, and ... to test it!

Creating the Web Dynpro Application

Before launching the compilation of the complete project and its distribution to the J2EE engine, we first need an object that can be identified as a deployable entity and that includes the whole project. This is the object that we are going to create at this point, the Web Dynpro application. To open the corresponding wizard, from the Web Dynpro Explorer node, select Applications, open its Context menu, and select the Create Application option.

Dynamic-Generation-of-a-Text-Line-Using-Data-Binding

Enter the name for the application, for example, "WelcomeApplication," and specify a package, for instance, "com. offilog. examples.welcome," for the Java class that will be generated. Then, continue by pressing the Next button. In the following dialog screen, select the default value Use Existing Component and continue by clicking on the Next button.

Dynamic-Generation-of-a-Text-Line-Using-Data-Binding

In the following dialog box, leave the three values proposed by the system and click on the Finish button.

Dynamic-Generation-of-a-Text-Line-Using-Data-Binding

In the Web Dynpro Explorer you can see the new created object.

Web Dynpro Explorer

The generated Web Dynpro application object is what completes the structure of our project. Now, we are in good shape to launch the distribution of our application. The Welcome Application object allows us to refer to the Web application as a whole set, and therefore it will be used in the next step for the deployment.

Building the Application

Before deploying and distributing the application, we need a final step of building it. Save your work up to now by clicking on the Save button. This will make all the objects to be saved before building the application. From the Web Dynpro Explorer window, select the Welcome node, open the Context menu, and select the option Rebuild Project.

Building the Application

Make sure that there are no error or warning messages in the tasks window for the "Welcome" project. We are referencing the "Welcome" project because it is possible to have more than one project opened.

Deploying the Application

In the window Web Dynpro Explorer, select the object Welcome Application, activate its Context menu, and select Deploy New Archive and Run.

Deploying the Application

After the deployment, which can take some time, the SAP NetWeaver Developer Studio will launch the associated browser and run the application.

Running the Application

In the browser we can interact with the application by pressing the appropriate buttons. Enter a name in the input field and click on the Next button.

Running the Application

In the second page, press the Back button to return to the first screen.

Running the Application

With this simple example we have seen how to

  • Create a project for a Web Dynpro application and its associated development objects
  • Create views and navigation options for the application
  • Create actions for the views and implementing simple event handlers
  • Design layouts for simple views
  • Define data binding for the UI elements using context attributes
  • Deploy and run a Web Dynpro application

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

SAP BASIS Topics