Designing a Web Dynpro Component

Abstract The present chapter is dedicated to the constitutive elements of a Web Dynpro ABAP component. Moreover, we show how to use the ABAP Debugger to execute, by line or by section, a Web Dynpro application, and how to use the new tool offered by ABAP Debugger to reach the context attributes values.

In order to develop a Web Dynpro ABAP component, we have to open the ABAP Workbench of the Application Server ABAP.To work with ABAP Workbench, we need an authorization as a developer or developer key, and for the SAP NetWeaver ABAP trial version we can use BCUSER, automatically registered as a developer.Web Dynpro is available with release SAP NetWeaver 2004s and later. After logging into AS ABAP, we can use the transaction SE80 to call the object navigator.

Object navigator

All the repository objects we develop with the ABAP Workbench tool we build by using the Object Navigator. Here, we develop not only Web Dynpro applications,but also other development objects (e.g.reports,database tables, data elements,classes, function modules, etc).

The development objects we create as customer have the first letter “y” or “z”. Therefore, we created a Web Dynpro component with the name y_wd_component.

We have to assign all the development objects created with ABAP Workbench to a package. We can use the default package “$TMP” to create test programs without transporting, or we can create our own packages. We choose to create our own package, named Y_WEBDYNPRO.

Creating the package Y_WEBDYNPRO

We have chosen the package type “Not a Main Package”, because this package holds development object and not other packages.

After creating the package, we create a Web Dynpro component, as follows:
right-click on the package name and, from the context menu, we select Create -> Web Dynpro -> Web Dynpro component. We have to enter the component name, a short description, the type we want to create, the view name and the window name

Creating a Web Dynpro component

After saving our component, we have to assign it to our package

Assigning the component to a package

As a result, in Object Navigator we can see the Package Y_WEBDYNPRO and our first created Web Dynpro Component.

The content of our package

The name of the development objects marked in blue are not active. After creating the Web Dynpro component, we have to activate it.

WD component activation

View

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

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

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

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

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

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 user interacts 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 proper UI 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

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

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

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

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

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

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

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

Componentcontroller

By default, every Web Dynpro component has a component controller that acts as the central controller instance within the entire component

Component controller

Data required across different views can be stored in his context. Besides the Context tab, each COMPONENTCONTROLLER disposes of tabs: Properties, Attributes, Events and Methods. Hereunder, in our examples, we will see how we can cross-component access the methods and the attributes defined here.

Window

A Window is an entity into which we embed all the views that will be used to construct the screen for the end user. When the user interacts with a view, theirinteraction will cause a request to the server. In response, one or more views that build the current screen will require to be replaced with other views. This is possiblethrough navigation links among the various views in the window.

Each Web Dynpro component can have several Windows. We have created only one Window, named W_default.

A view or several Views are generally embedded in a Window. The first view created at the WD component creation is directly embedded into the Window. To embed other views in a Window, we can use dragging & dropping or right-clicking on the window name to choose between embedding an empty view or the View we have created. The Empty View is a special type of View, presented in the View- ContainerUIElement example.

In every window, at least one view is marked as default. A default view is the first view displayed when the window is called. The first embedded view is marked as default, but we can change it. To mark as default, after right-clicking on the view we choose Set as default from the contextual menu.

Embed View

By using Inbound plugs and Outbound plugs, we define the navigation between views or windows. For a Window, these plugs can be of Standard, Startup or Resume type. As we can see, the Framework generates for each window an inbound plug of Startup type and an event handler method .By using this event handler method, we can read, for example, the URL parameters from a Web Dynpro application.

Default inbound plug for a window

For a View, we don’t have the possibility to define a specific plug type.

Application

After developing a Web Dynpro component, we need to provide the users with access to its functionality. To do this, we have to create a Web Dynpro Application.

Creating an application

For each application, the Framework generates an URL. We find this URL in the Properties tab.

Application URL

In the same time, we can specify here how the Messages are handled:

• l Show Message Component on demand – the Message Component is displayed only when we have a message.
• Always Display Message Component – the Message Component is always displayed on the screen, even when we don’t have any messages.

By using the Parameters tab, we can define our own parameters for the application or we can choose from the parameters offered by the Web Dynpro Framework.

Application parameters list

To run the application, we can use the Execute button or we can copy and past the URL into the browser.

Running the application

When the user interacts with the screen, specific adapter techniques are used to convert data and events, as part of the request response cycle, into the browser format as HTML, JavaScript or XML. In Fig., we can see the generated source code for our WD component.

Generated source file

ABAP Debugger

If any errors occur in our Web Dynpro components, we can use the ABAP Debugger to execute our WD component, by line or by section.

To work with the debugger, we can create Breakpoints at the point where the program should pause

Setting a Breakpoint

We run the application and, in the moment when the program flow reached the defined breakpoint, the ABAP Debugger is open

ABAP Debugger

As we can see in the Process Information, the main component of the ABAP Debugger, we debug an HTTP application. The “Exclusive” represents the fact that the application we debug occupies a work process of the application server.

By using the Buttons from the Control Area, we can control the program flow. For Example,We can choose to execute the program line by line-single step or to execute the program up to the next Breakpoint.Continue.

We can use the ABAP Debugger tools to have information about the variable

Tool Component of the ABAP Debugger

By using the New Tool Button,We can open a selection window that offers the possibility to access additional functionalities. In the Special Tools section, we can find the created tool, to be used for a better debugging of the Web Dynpro components.

ABAP Debugger – New tool selection window

As we can see in, we are offered the possibility to have access to all the individual elements of the Web Dynpro component; we can see the view attributes, the view layout, the UI elements and data binding, the context structure and its attributes, etc.

The ABAP debugger – web Dynpro ABAP tool

We are able to see not only the context structure, but also to display the runtime object, by choosing from the contextual menu Display Runtime Object.

Displaying the runtime object

These are only some of the ABAP Debugger capabilities that can be used along with other performance tools (for example, the transactions WD_TRACE_TOOLS, S_MEMORY_INSPECTOR), to help us to develop Web Dynpro applications.

Web Dynpro Logon Page Configuration

As we have seen, a logon page appears when running our application, where we have to provide some values, as follows: Logon Language, Client, User Password, etc.

Example of a webDynpro application log on page

We can change the modality this logon page looks like and the modality we realize the user authentication, by using the SICF transaction (HTTP Service Hierarchy Maintenance). In the webdynpro ! sap hierarchy, each Web Dynpro application disposes of one corresponding entry.

By using this transaction, we search for all the entries that begin with Y_WD_* and are created by our test user Gellert.

Searching for a service with the SICF transaction

We find the entry that corresponds to our created Web Dynpro component.

Entry corresponding to our Web Dynpro component

With double-click, we are allowed to view or/and to change this service. In the lower part of the Error Page tab, we can find the Configuration button for the system logon. Here, we can define our own settings by choosing from the lists, or we can use the global settings.

System logon configuration

As a result of our changes, in the logon page we have to provide only the User and the Password, through a popup window, and we are able to change our logon password.

Logon page