designing a web dynpro component

7/30/2019 Designing a Web Dynpro Component

1/18

http://e-university.wisdomjobs.com/sap-abap-web-dynpro

Designing a Web Dynpro ComponentAbstract 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


2/18

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


3/18

The names 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 usingthe 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


4/18

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 doesnt 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


5/18

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 Browse r 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


6/18

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 thats why we have to create an action that reacts to the user interaction. To do this, we use the Action tab.

Creating an action


7/18

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 f ill 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


8/18

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


9/18

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 dont 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 dont 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


10/18

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


11/18

For a View, we dont 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


12/18

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 dont 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


13/18

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


14/18

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 lineby 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


15/18

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


16/18

We are able to see not only the context structure, but also to display the runtime object, by choosing from the contextual menu DisplayRuntime 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


17/18

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 theConfiguration 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


18/18

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

designing a web dynpro component

Documents