ABAP Web Dynpro: Properties and Programming Model

With SAP NetWeaver 7.0, SAP introduced ABAP Web Dynpro - a new programming model that is independent of the implemented clients (for operating Web Dynpro applications) and the respective protocol. This independence is achieved through the use of metadata.

ABAP Web Dynpro will become the standard UI technology used by SAP for the development of Web applications in the ABAP environment.

In addition to having its own runtime environment, ABAP Web Dynpro - in particular - has a graphic development environment (Web Dynpro Explorer), whose tools are fully integrated into the ABAP development environment (Object Navigator). You use the SAPGUI to develop a Web Dynpro application in the SAP System. It is called through the respective URL or the Internet browser, or from the SAP Portal.

Maintenance and further development of ABAP Web Dynpro applications is simplified through the reusability of components and the strict separation of layout, program flow, and business logic. In addition, Web Dynpro applications can be made usable for visually impaired users since Web Dynpro supports Accessibility Standard 508 through keyboard input and screen reading functions.

ABAP Web Dynpro supports the use of web services, which enable you to access the business functions of various systems from any application, in a standardized, easy-to-use way.

ABAP Web Dynpro applications are structured according to the Model View Controller programming model (MVC programming model).

While the model in the business interaction layer is responsible for display-independent data access to the back-end system, the view takes care of the display of data (layout), irrespective of the source, in the user interaction layer. The controller in the binding layer is between the view and the model. It formats the model data that is to be displayed in the view, processes the user entries, and returns them to the model. In addition, it controls the flow of the program.

In ABAP Web Dynpro, the model can consist of application classes that encapsulate the data accesses. However, existing BAPIs, function modules, or web services can be used as well.

The view and the controller are implemented using graphic tools.

Elements of the ABAP Web Dynpro

The layout of a view consists of a set of UI elements (screen elements such as input fields, tables, and pushbuttons) that are grouped together using a graphic tool. At runtime, views are displayed one after the other, not parallel, on the screen. Therefore, they correspond to classic screens, without flow logic.

As with the classic ABAP Dynpro, input checks and input helps (F4) do not have to be implemented manually, but can be used as UI services by referring to the ABAP Dictionary

You can integrate views into other views using the container technology. This enables modularization.

Each view has its own assigned view controller. Technically speaking, the view controller is an ABAP class. The source code for the view controller is only partially implemented directly by the developer. A large part is automatically generated in accordance with the developer's design specifications. The context of the view controller serves as a data container and contains the data to be displayed in the view (corresponds to the TABLES structure in the classic dynpro).

Windows are used to bundle several views and to define the navigation options between them (view sequences). A component contains one or several windows and has its own controller with context, where data that is to be displayed in several component views is stored.

A Web Dynpro application points to a window with a default view (start view), which is displayed when the application is called.

A component with appropriate windows is usable as a self-contained unit in differentWeb Dynpro applications. This reduces implementation and maintenance work to a minimum.

The context of each view controller contains data that is to be displayed in the view (data container). The data transport between the view context and the UI elements of the view takes place when the appropriate assignment is made (data binding).

A component, too, has a context. Here, data is stored that is to be displayed in the different views of the component. In such cases, references to component data are implemented mostly in the corresponding view contexts (context mapping).

In the following sections, an ABAP Web Dynpro application will be developed in several steps that will enable you to display the data for individual flight connections.

The program comprises a Web Dynpro component with two views. In the first view, the user chooses a flight connection. In the second view, the details for this connection are displayed.

Both views are embedded in a Web Dynpro window for the component and connected by navigation links in such a way that the user can navigate between the views using the pushbuttons.

The screen sequence defined in the window is started by way of the Web Dynpro application.

Web Dynpro, Pushbuttons and Navigation

At the first level of our example, we want to create a Web Dynpro component with two views. Each of the views should have one pushbutton. The program should be implemented in such a way that when you click on a pushbutton, you navigate to the other view. To start the view sequence, you need to create a Web Dynpro application.

This section deals with the following:

• Creating a Web Dynpro Component
• Creating Web Dynpro Views
• Embedding Views in Web Dynpro Windows
• Setting up the Navigation
• Creating Pushbuttons and Evaluating User Actions
• Creating Web Dynpro Applications

Creating a Web Dynpro Component

You create a Web Dynpro component in a similar manner to the way you create a new ABAP program, from the context menu in the Navigation Area of the Object Navigator.

A Web Dynpro window is automatically created with each new Web Dynpro component. At a later stage, you can create additional windows in the component.

CreatingWeb Dynpro Views and Embedding them in theWindow

To create a Web Dynpro view you also use the context menu in the Navigation Area of the Object Navigator. Assign a name to the view as well as a description.

To embed a Web Dynpro view in a window, open the window in the Object Navigator and display the window structure. There are two options you can use to embed the views:

The context menu
In the window structure, the entry Embed View appears in the context menu for the name of the window (see above graphic). In the entry screen that follows, select the view to be embedded using the input help (F4).

Drag and drop from the Navigation Area
In the Navigation Area, if you open the Views node, you can drag the view to be embedded directly into the window structure and onto the window by drag and drop.

Setting up Navigation Between Web Dynpro Views

To navigate within a window from one view to another, you have to create a navigation link between the views. A navigation link always leads from an outbound plug in one view to an inbound plug in the other.

The outbound plugs and inbound plugs of a view determine the possible "entrances" and "exits". A view can have more than one inbound and outbound plug. The navigation link in the above graphic enables you to navigate to the OUTPUT_VIEW when you exit the INPUT_VIEW using its outbound plug OUTPLUG1. The OUTPUT_VIEW is then started by way of its inbound plug INPLUG1.

When you create the navigation links, this determines the view sequence within the respective window. This occurs on the basis of the existing plugs and independently of the implementation of the views.

You create the plugs very simply by processing the corresponding view and entering a name and a description for the plug on the Inbound Plugs or Outbound Plugs tab pages. You can also apply parameters to the outbound plugs for advanced applications.

After you have created the plugs, you can see them in the structure of a window next to the embedded views. You can create navigation links between these plugs quite simply using drag and drop.

Creating Pushbuttons and Triggering Navigation

In our example program, navigation should in each instance be triggered by pressing a pushbutton. The process flow is as follows:

• When the user presses a pushbutton, an action code is transferred from the browser to the application server. This action code was defined by the developer for the respective view and assigned to the pushbutton.
• There is a special method in the view controller (action handler method) for each action code that is now executed in reaction to the action.
• In our case, only navigation to the next view should be triggered. For this to occur, the view is exited using the corresponding outbound plug. The expression used is that the outbound plug is "fired".

Create a pushbutton in the layout view for the view. There are several options for this:

The context menu in the element hierarchy
In the element hierarchy, open the context menu for the ROOTUIELEMENTCONTAINER node at top right and choose Insert Element. Enter the name and type of the UI element.

The toolbar
From the toolbar, choose the Button tool on the left and position the pushbutton in the middle of the layout preview.

In the attribute window in the lower right corner the attributes are displayed for a specific element of the layout. You can enter a text for a pushbutton or assign an icon to it here too.

To assign an action to the pushbutton, go to the onAction attribute and click on the create icon in the third column (see above graphic). Assign an action to the pushbutton in the following dialog. If the action has not already been defined for the view (Actions tab page), you can create it here again directly.

In the Outbound Plug field, you also have to specify the outbound plug that is fired as a reaction to this action. The action handler method is then not created empty, but automatically contains the source code for firing the outbound plug.

Creating a Web Dynpro Application

The entry point in a Web Dynpro view sequence, in other words, a Web Dynpro window, is always a Web Dynpro application. It points to the window or the interface view of the same name and the inbound plug DEFAULT that was automatically created for it.

You create a Web Dynpro application from the context menu of the Object Navigator (see above graphic). It is connected to the component, the interface view and the standard plug in the following dialog.

You can test a Web Dynpro directly from the development environment by way of a corresponding pushbutton. Alternatively, you can enter the assigned URL (Internet address) directly in the address bar of a browser.

Web Dynpro, Layout and Data Transport

At the second level of our example, the Web Dynpro views should be extended with the input/output fields, and data acquisition and transport should be implemented. In the first view, the user should select a flight connection using the airline ID and the flight number. Once the pushbutton has been pressed, this information should be further processed in the program and the detailed information on the airline read from the database. When the user navigates to the second view, the detailed information should be displayed there.

To correspond to the MVC programming model, each data retrieval of a Web Dynpro component should be encapsulated centrally in a component controller method. In our case, this service call should contain a function module call. The data required by the function module is taken from the context of the component controller. Accordingly, after the function module is called, the result is stored again in the context.

Data is transported between the central component controller and the individual view controllers using context mapping. This references from one context to another, so the data transport functions automatically in both directions.

Data is transported between the input/output fields of a view and the context for this view by data binding.

This section deals with the following:

• Creating a Web Dynpro service call
• Creating the controller context
• Setting up context mapping
• Creating input/output fields
• Setting up data binding
• Calling the service method for data retrieval

Creating a Web Dynpro Service Call and Generating the Controller Context

The ABAP Workbench provides aWeb Dynpro Wizard for creating service calls, which you can address in the Navigation Area of the Object Navigator using the context menu in the usual way. After you have started the wizard, you first have to select the controller in which you want to create the service call. In our case, this is the existing component controller. You have the option is creating an additional controller here too, though.

After this, the wizard still needs to know which function module is to be called, the name of the service method, and which function module parameters it needs to supply with actual parameters when the function module is called.

The wizard generates the following components in the selected controller:

• A service method (name begins with "EXECUTE_")
• Context nodes for all function module parameters that have to be supplied during the call
• The function module call in the service method
• The source code for reading the data from the context
• The source code for filling the context with the result of the function module call

Setting up Context Mapping

To make the data from the component controller context available in the views too, you have to copy the corresponding nodes in the view controller context and map them to the component controller nodes. Context mapping is also necessary to make user entries available on a view in the component controller.

You can copy the nodes at the same time as you set up context mapping. To do this, open the corresponding view in change mode and go to the Context tab page. On the left, you will see the view controller context (still empty, apart from a root node named CONTEXT) and on the right the generated component controller context. You copy a node by dragging it from the right and dropping it on the root node for the view controller context on the left. In the following dialog, you confirm that the node should be both copied and mapped.

Creating Input/Output Fields and Setting up Data Binding

The ABAP Workbench also provides a wizard for creating input/output fields and setting up data binding. The prerequisite for this is that the node to be bound already exists in the view controller context. If this is the case, it is then very easy to create a layout form for this node.

Open the view in change mode and go to the Layout tab page. Select the entry ROOTUIELEMENTCONTAINER in the element hierarchy (top right). Start the Web Dynpro Wizard using the corresponding pushbutton (see above graphic) and select the Form template. Clicking the Context pushbutton takes you to a dialog in which you can select the node for which you want to create the form directly. If the node has several fields, you can then select or exclude these fields individually.

Calling the Service Method for Data Retrieval

To enable the flight connection details to be displayed on the second view, the service method has to be called before you navigate to the view. In our example, this call is made in the action handler method (ONACTION... method) of the input view.

You can also generate method calls with the Web Dynpro Wizard. To do this, open the source code for the action handler method, position the cursor in front of the source code to fire the outbound plug and click on the pushbutton to launch the wizard (see above graphic).

On the following screen, choose Method Call in Used Controller and use the input help to enter the component controller as the used controller. Then use the input help again to choose the method you want to call.

To conclude the activity, the wizard generates the source code to call the method.