View SAP ABAP Web Dynpro

Each Web Dynpro application has at least one view. Each View has a view Layout, where we can add different UI (User Interface) elements that can be nested one in the other one, to create the screen. The positioning of the UI elements in a view is realized by using the layout and data layout.

Each View has a view controller that is automatically created for this view and each View has several tabs (Properties, Layout, Outbound Plug, Inbound Plug, Attributes, Context, Actions and Methods). This indicates that a View consist of many parts.

View Layout.

The screen content of a view is designed in the Layout tab. The View Layout is divided in three areas:

  • UI element library
  • View designer
  • Context menus, UI elements properties and UI element hierarchy.

View Layout

View Layout
the UI Elements are grouped in a library to be accessed via the View Layout. We have several ways to add an UI element into the view layout. For example:

  • By right-clicking on the ROOTUIELEMENTCONTAINER
  • By dragging & dropping

Adding UI elements into the view

Adding UI elements into the view

All the UI Elements we enter into a screen are children of the node ROOTUIELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELEMENTCONTAINER is the top of this hierarchy. With “Swap Root Element” we have the possibility to transform ROOTUIELEMENETCONTAINER from a Transparent Container into another UI element (Table, FlashIsland, Group, etc.).

In this way, we can use, for example, the FlashIsland UI element to integrate Adobe Flex into our web Dynpro component. This transformation is possible only if the ROOTUIELEMENTCONTAINER doesn’t have any child UI elements.

Adding UI elements into the view

Adding UI elements into the view

In our ROOTUIELEMENTCONTAINER, we insert one Group UI element, one InputField UI element, one Label UI element, one TextView UI element and one Button UI element

View Layout

View Layout

If we select individual UI elements in the layout of a view, their properties are displayed in the Properties area. In this way, we can change the properties of each element. For example, we have changed the property design of the button UI element and the property state of the InputField UI element.

As a result of changing the property state of the InputField UI element from the Normal item to the required one, the label associated to this UI element becomes a red star and the end user knows that this value is mandatory.

For a property, we can create fixed character strings, we can choose from a list, or we can bind properties to context nodes or attributes by using the Binding button. For the text property of an UI element Button, we have created a fixed character string “Save”. For the design property, we have chosen from the list one of the supported designs.

UI element properties

UI element properties

We need to bind the value property of the InputField UI element and the text property of the TextView UI element. To be able to do this, we will create two context attributes

By using “Context Menus” we have the possibility to create, for an application, our own context menus displayed in the Browser when the user presses right click on an UI element. In standard mode, the web Dynpro Framework offers the default context menus with certain functionalities, e.g. hiding an UI element displayed into the Browser. After running the application, we can test this standard mode by rightclicking on the inputField UI element.

Context View

The data are stored in the context and the UI Elements are the only objects the userinteracts with.Every View has a Context View where we can create context nodes and attributes. Via data binding, the context of a view controller provides a view with all the required data. For our application, we create two context attributes named NAME and GREETING, of STRING type.

To put the data on the screen and to read data from user, we connect the properUI Elements properties with attributes or nodes.

In our case, we connect the property value of the InputField UI element with the NAME attribute. To create a greeting for the user and to show it after the user presses the Save button, we connect the property text of the TextView UI element with the GREETING attribute. These connections are known as data binding.

Creating an attribute in context view

Creating an attribute in context view

Data binding

Data binding

The effect of the binding is that, at runtime, any data changes are transported in both directions and these changes affect all the properties bound to this element.

Actions

Some of the UI Elements have special events that are linked with the user actions. The UI element Button is one of these UI elements and that’s why we have to create an action that reacts to the user interaction. To do this, we use the Action tab.

Creating an action

Creating an action

As we can see, each action has a corresponding event handler method, automatically generated by the Framework. An event handler method is a special method of a view controller that has the ONACTION prefix followed by the action name. For the SAVE action, the Framework generates the ONACTION event handler.After creating an action, we can assign it to an UI element that has attached an event.

Assigning an action to an UI element

Assigning an action to an UI element

After generation, this method is empty, but we can fill it with source code by using the Methods tab.

Methods

In the Methods tab of a View, we can find some types of methods (e.g. event handler methods, Hook methods, user-defined instance methods).

In our case, in the Methods tab we can find the Hook methods, automatically generated by the Framework, and our event handler method ONACTIONSAVE

Methods tab

Methods tab

With double-click on the method name, we open the ABAP editor.In this way, we can insert the source code.

ABAP editor

ABAP editor

The user enters his name that we use to show a greeting message with the help of textView UI element. To create a greeting for the end user, we concatenate his name with the string “WELCOME” and we pass this string value in the GREETING attribute. After this, we reset the inputField UI element. To do this, we pass an empty string into the NAME attribute bound to the corresponding UI element

On action save event handler method

METHOD onactionsave .
DATA: lv_name TYPE string,
lv_greeting TYPE string.
wd_context->get_attribute(
EXPORTING
name = `NAME`
IMPORTING
value = lv_name).
CONCATENATE ‘Welcome’
lv_name INTO lv_greeting SEPARATED BY space.
wd_context->set_attribute(name = 'GREETING'
value = lv_greeting).
CLEAR lv_name.
wd_context->set_attribute(name = 'NAME'
value = lv_name).
ENDMETHOD.

Properties

In the Properties tab, we can create a description text for our view, we have information about the view and about the person who created and changed this view. In this tab, we can set the view lifetime:

  • Framework controlled – controlled by Framework
  • When visible – lifetime limited to its visibility. A view controller is always deleted as soon as the corresponding view is no longer displayed on the user interface. It is used when a view is displayed only once and not repeatedly.

Additionally, Property tab offers the possibility to define the usages .

Properties view

Properties view

We can define a usage to be able to access the methods of another internal controller or of an interface controller, if the usage has been defined for an external component. To create a new usage in the Used Controller/Components table, we have to choose the Button Create Controller Usage. The table Used Controller/ Components includes a list with all the global controllers of our own component and, in case we define usages, this list includes the external component and its interface controller.

In our case, we don’t use any external components. In the list we have only the global controller COMPONENTCONTROLLER. We have to specify that, for each view controller, the usage of the corresponding component controller is automatically created.

Attributes

Each View controller contains some attributes automatically generated by the Framework

Attributes tab

Attributes tab

The attribute WD_COMP_CONTROLLER is a reference variable of IG_ COMPONENTCONTROLLER type that we can use to access all the publicly accessible methods of the component global generated interface of the corresponding component controller.

The attribute WD_THIS is a self-reference to local controller interface. This self-reference works similarly with the self-reference me found in the ABAP Objects. We can use it, for example, to call a user-defined method.

The attribute WD_CONTEXT is a reference to the controller context. The IF_WD_CONTEXT_NODE interface provides several methods that enable us to obtain read and write access to a context node.

Additionally, we can create our own attributes. These attributes are used to store application data that are not relevant for the UI elements and we don’t store in the context. To access these attributes, we use the self-reference: wd_this -> attribute_name


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

SAP ABAP Web Dynpro Topics