Lecture14 abap on line

Lecture 14Web Dynpro for ABAP(WD4A)

BCO5647 Applications Programming Techniques (ABAP)

2BCO5647

Readings & Objectives

Readings

http://help.sap.com/saphelp_nw04s/helpdata/en/77/3545415ea6f523e10000000a155106/frameset.htm

Objectives

This lecture will

Introduce Web Dynpro for ABAP

Describe the advantages of WD4A over other Web development options

Examine the Web Dynpro Component & its parts

Explain how to build a Web Dynpro application by example

Review the concepts of Data Binding, Mapping and Navigation

3BCO5647

Introduction

Up to now user interfaces developed in ABAP were based on “classical” dynpros which were components of ABAP programs and processed by the ABAP runtime environment (dialog programs). The use of these classical dynpros assumed that the SAP GUI had been installed on the computer of every user.

ABAP developers have long sought the ability to write professional, Web-based applications without having to learn HTML or JavaScript. At the same time SAP has longed for a solution to bridge the divide between SAP applications written in ABAP and those written specifically for the Web.

Because most computers today are equipped with a HTTP-compatible browser, support for this protocol was made as the first step in developing real web capability. SAP provided an initial model for this with the introduction of Business Server Pages (BSP). In the context of BSP, HTML-based interfaces can be created, which can be improved by ABAP coding.

Until now ABAP developers wanting to develop Web-based applications were required to learn unfamiliar technology, such as BSPs or Java, and SAP grew to rely on a gateway, such as SAP Internet Transaction Server (ITS), to dynamically covert SAP Dynpro screens to HTML.

WD4A finally provides a viable solution to create SAP Web-based Applications. SAP is in the process of migrating its entire product portfolio to Web Dynpro. The first completely Web Dynpro ABAP-based release was SAP’s Supplier Relationship Management (SRM) module.

4BCO5647

Why is WD4A superior to SAP’s existing Web development options such as BSPs

WD4A is based on a Metamodel Concept

Web Dynpro for ABAP is based on a metamodel concept. When a Web Dynpro application is developed, the data is stored in tables as metadata.

Depending on the rendering technique used by the client, the source code, which is executed at runtime, is generated from the data residing in the metadata tables. With this approach, the application developer doesn't need to consider during design time which client will run the application. The WD4A framework provides adapter modules that generate the client-specific rendering.

Providing the availability of such adapters, Web Dynpro ABAP applications are able to run on the Web, mobile devices, smart clients, and so forth.

5BCO5647


Web Dynpro for ABAP applications can be written by ABAP developers Over the years, SAP customers have trained and educated large

numbers of developers and business process analysts in the specifics ABAP. Their huge investment is preserved by letting these experts now write applications based on ABAP that can be run on the Web.

Web Dynpro for ABAP applications provide easy access to comprehensive ABAP functionality With Web Dynpro for ABAP, functionalities such as the FI and F4

help systems and T100 messaging are available to be integrated into Web Dynpro for ABAP applications via a few mouse clicks.

6BCO5647


Web Dynpro for ABAP separates business logic from presentation logic

Web Dynpro for ABAP implements the Model-View-Controller paradigm (MVC). The MVC approach breaks programs into 3 areas:

The Model area represents the application data, which will be accessed during the running application.

The Controller area includes the processing of the data at runtime. Here is where all classes and methods are implemented with which the data will be processed

The View area provides the visible part of the application. In this area, the layout of a browser window is implemented and all necessary elements, like images, buttons, or data display elements are attached.

The MVC approach is claimed to allow a better understanding of the design and development process, and to lower project cost and future maintenance costs.

With WD4A you initially develop applications using a declarative programming approach – you create the layout including the screen elements and the containers providing the data to the screen elements using tools such as the View Editor and Controller Editor.

7BCO5647

Web Dynpro Component and its parts

A Web Dynpro component is the core of a Web Dynpro application.

A component can be seen as a modular unit representing a sets of tasks.

A component cannot be executed on its own. To run a component, it must be assigned to an Web Dynpro application. A Web Dynpro Application is an entry point into a Web Dynpro component (like a transaction code is to a dialog program) and is the only Web Dynpro entity that can be addressed via a URL.

A component can be embedded and used in other components. For example, for repeating subtasks of a business application, such as the creation of an order Or the maintenance of an address, you can create a generic component, which can be embedded into specific application components as a reusable building block.

8BCO5647


Controller – Controllers handle data flow and binding. They store the processing logic of the application. The logic is implemented in methods of ABAP Objects on the Application Server.

Every view has a dedicated view controller. Every window has a window controller (not shown above). Every component has a component controller.

Component Controller Is automatically generated when a new component is created. It is like a global repository where all methods, which are to be visible and accessible to the whole component, are

implemented. For example, selection of data from a DB table or the storage of data after user editing.

View Controller Performs event handling based on actions invoked in the view. E.g. may contain methods that read current values from input fields and pass them on to processing logic.

Controllers perform event handling implemented in event handler methods. Controllers may perform other activities implemented in hook methods, such as WDDOINIT or

WDDOMODIFYVIEW

9BCO5647


View – a view is a visible area of the UI. A view contains controls, called view elements. View elements are the smallest parts of a view; they

contain a graphical, visible area in the client, e.g. buttons, input fields, check boxes etc. Actions are properties of view elements used to trigger events resulting from user operations

(pressing a button). An event is always connected to an a handler method, where user input is processed. You can add navigation plugs to a view for navigation between views

Window – is a container for all views. In order to use a view in a browser it must first be embedded in a Web Dynpro window. A window, unlike a view, has an interface through which it can be called from outside of a

component. You can arrange views in complex screen layouts using a window. The window defines navigation links between views. When you create a Web Dynpro component, a window is created with it.

10BCO5647

Context and Data Transport

Context All data processing in a Web Dynpro application is done via contexts. Each controller has a context. A context is a buffer where processed data is stored and can be prepared for the methods of a controller. A context is always structured in nested nodes and individual attributes. Attributes can represent data elements while nodes are used to group attributes together.

A View Controller’s context keeps the data to be presented in the view elements e.g. input fields, tables etc and a binding exists between the view elements properties and the context elements.

A Component Controller’s context keeps data required in the component and shared among multiple views of that component.

Data transport between controllers is set up by “mapping” across contexts. Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller.

Data Binding is the means by which data is automatically transported from a view controller's context to a UI element in the view layout.

11BCO5647

Navigation between Views

To define navigation between views, you need to create exit and entry points for each view using outbound and inbound plugs.

Once this has been done you can specify the navigation flow using navigation links.

12BCO5647

Steps in creating a Web Dynpro Application

Suppose, you need to create a web application which asks user about his personal data and then saves it into a database. Here are major steps to create a working Web Dynpro application:

Create WD component (transaction SE80) Create a view Embed the view into a window (which is created by default). Place required UI controls (input fields, labels, buttons) on the view. Create attributes in the view's controller and bind input fields to those

attributes. Create an action for the button in the view controller. In an event handler method for that action (created automatically for each

action) write code which reads context attributes (which contain values from input fields) and writes data into database.

Create a Web Dynpro Application for this component.

Almost all of these steps above are fulfilled with one mouse click and several key strokes, the designer takes care of default values for standard tasks. Some typical coding tasks are also assisted by a code Wizard.

13BCO5647

Practical Example Background

The user interface for this Web Dynpro-based application will consist of only two views and will allow you to switch between them. The context of the component controller and the contexts of the two view controllers are used to accept an input value from the first view, to pass it to the second view and to display it there. The aim of this exercise is to import a short text (such as a name) into the input field of the first view and to display it again in the second view. The exercise avoids the graphical design of the views involved and only uses those UI elements that are required for the logic.

1. Creating and Editing a Component.

1. Create Web Dynpro component ZMYCOMPONENT_xxx with a main window MAIN_WINDOW.

The newly created component was automatically equipped with a few elements, for example the component controller was created as well as an initial window.

2. Double-click on the Component Controller object of your new component. The Context tab page of the controller is automatically displayed, and you now have the option of defining a context. Make sure that the Workbench is in change mode.

14BCO5647

Practical Example

3. Open the context menu of the CONTEXT root node and choose Create Node.

4. Enter a name for the new node (such as “NODE1“) and confirm the dialog without worrying about the other criteria.The new node automatically appears below the root node, and you can now create an attribute for this node.

5. Open the context menu of the new Context node and choose Create Attribute.

6. Enter a name for the attribute (such as “MYNAME”) and in the same window, specify the type of the attribute with STRING.

7. Confirm the dialog again without worrying about the other criteria. Save your work.

8. Open the context menu of your component and choose Create View.

9. Give the first view a name (such as “STARTVIEW”) and confirm the window.As soon as you have saved your work, the Views node is inserted in the hierarchy of the object list below the component, and the STARTVIEW you have just created is stored there.

10. Open the context menu of the Views node and choose Create to add a second view.

11. Enter a name for the second view (such as “RESULTVIEW”) and confirm the creation process again. Then choose Save again. The component you have created has a component controller, in whose context the MYNAME attribute was stored. This attribute is visible for each view of this component and can be changed by all controllers of the component. The component now also contains two views.

15BCO5647

Practical Example

2. Designing the First View The layout of the first view will be created in this step and a simple action implemented. By clicking a button on the

STARTVIEW, the user should be able to trigger navigation to the RESULTVIEW. To achieve this, the view requires an outbound plug. A suitable element must then be added to the layout of the view and connected to the outbound plug using a method call. An additional inbound plug ensures that navigation can be set up from the second to the first view. The layout of the view also needs a field so that it can accept user input.

1. Double-click on the name of your first view in the view node of the object list. This takes you automatically to the Layout tab page of your view. Make sure that the Workbench is in change mode.

2. Open the context menu of the ROOTUIELEMENTECONTAINER and choose Insert Element....

3. Enter a suitable name for the element (such as "LABEL_1") and choose Label from the input help for the type line. Confirm the dialog box.

4. Open the context menu of the ROOTUIELEMENTECONTAINER again and choose Insert Element....

5. Enter a suitable name for the input field (such as "INPUT") and choose InputField from the list of element types. Confirm the dialog box.

6. Select the element of the type Label (LABEL_1) in the element list below the ROOTUIELEMENTECONTAINER. The properties table for this element contains the line labelFor.

7. Select the drop down list for this line and choose the element of the type InputField (INPUT), which you have just created. The element LABEL_1 is now bound to the input field.

8. Open the context menu of the ROOTUIELEMENTECONTAINER a third time, create a button with a suitable name (such as "BUTTON") in the same way, and save your work.

16BCO5647

Practical Example

The required layout elements of the first view are now available; next you create the two plugs that are required.

9. Switch to the Outbound Plugs tab page and enter the name of the new plug (such as "OUT1") in the table. Save your changes.

10. Now switch to the Inbound Plugs tab page and enter the name of the new plug (such as "IN1") in the table. Save your work again.

Now that both the layout elements and the required plugs have been created, all that is missing is the link between the BUTTON button with the OUT1 outbound plug.

11. Switch back to the Layout tab page and select the BUTTON entry in the element hierarchy below the ROOTUIELEMENTECONTAINER. In the table below the hierarchy you have the option of maintaining the properties and linking the selected element.

12. Choose the text property and enter a suitable text (such as "Go!") in the Value row. This text will be displayed on the button later.

13. In the Property table, below the Events header, choose the OnAction row.

You must now create an action for this event, which calls the outbound plug of the view when you the BUTTON button is chosen.

14. Press the button on the far right-hand side of this row to start a create dialog for such an action. Enter a name for the new action (such as "GOTOOUT1") and then select the outbound plug via which the view should be exited when you press the BUTTON button. As you have created only a dingle outbound plug for the view, only this one view is available for selection. Save your changes.

This automatically creates an ONACTIONGOTOOUT1 method for your new action, which is later called when the BUTTON button is pressed.

15. Double-click the action you created in the Property table to be taken to an editor.

The development environment has already generated the call of the outbound plug in the corresponding method, so you do not have to program it yourself here.

16. Save your changes.

In this step, on the one hand you have assembled the simple layout of the first view of your application, and on the other hand you have ensured the navigability of the view by creating plugs. Furthermore, you have linked both of these to each other by linking the BUTTON interface element to a navigation call to an outbound plug of the view.

WD_THIS is an instance of the current, local controller interface. It is specified by the Web Dynpro framework and does not have to be declared.

17BCO5647

Practical Example

3. Context Mapping of the First View In step 1 you created the NODE1 node with the MYNAME attribute in the context of the component controller. In

this step, this context should first be made accessible to the first view.

1. While staying in the first view, switch to the Context tab page.

The context of the STARTVIEW that is still empty is displayed on the left-hand side of the page. The context of the component controller that you have just edited to define mapping is available on the right-hand side.

2. Open the context menu of the root node of the view context (left side of screen) and create a new node.

3. Enter a name for this node (such as "VIEW1"), confirm the window and save your work.

4. Now open the context menu of the new VIEW1 node and choose Define Mapping.

A new window now lists all nodes of the component controller context that are available; in the example, this is only the NODE1 node.

18BCO5647

Practical Example

5. Select the NODE1 node by double-clicking on it. Confirm the dialog box that follows once you have read it.

If you now open the VIEW1 node of the view context and the NODE1 node of the context of the component controller, you can see that the MYNAME attribute is now available in both hierarchies. The two contexts are now linked to each other.

As soon as the value of the MYNAME attribute changes in the view context, for example because of user input, the new value of the attribute will also be available in the context of the component controller. The same applies conversely: if the value changes in the context of the component controller (for example, if a mapping was defined by an entry in a different view for its context nodes), the attribute is also assigned a new value immediately also in the context of the current view.

The MYNAME attribute must now be linked to the input field in the layout of the view.

19BCO5647

Practical Example

4. Binding the Attribute Once the context of the view has been mapped to the context of the component controller, an interface element

of the first view can now be bound to attribute MYNAME.

1. While staying in the first view, switch to the Layout tab page and ensure that the Workbench is in change mode.

2. Select the INPUT element in the hierarchy below the ROOTUIELEMENTECONTAINER.

3. Find the value entry in the properties table and click on the corresponding button in the Binding column on the right-hand side of the table.

The context hierarchy of the view is now displayed in a separate window.

4. Double-click on the MYNAME attribute (in this case, the only attribute) to select it.

The Value column of the table now contains the MYNAME attribute.


The UI element INPUT is now bound to the attribute MYNAME of the view context. The attribute can now be assigned a value by user input. Since mapping was defined between the context of the view and the context of the component controller, the value of the attribute is changed accordingly. It can be made accessible from here to a second view by defining mapping similarly between its view context and the context of the component controller. You now need to structure the second view accordingly.

20BCO5647

Practical Example

5. Designing the Second View The second view is structured in a similar way to the first view. Only the INPUT element is replaced by an

element of type TextView. The procedure below explains the individual steps again.

1. Double-click on the name of your second view in the view node of the object list.

The Layout tab page of your view is displayed automatically again. Make sure that the Workbench is in change mode.

2. Open the context menu of the ROOTUIELEMENTCONTAINER and choose Insert Element....

3. Enter a suitable name (such as "TEXTOUTPUT") and choose TextView from the list of element types Confirm the dialog box.

4. Open the context menu of the ROOTUIELEMENTECONTAINER again and create a button with a suitable name (such as “BUTTON2”) in the same way.

The required layout elements of the second view are now available; next you create the two plugs that are required.

5. Switch to the Outbound Plugs tab page and enter the name of the new plug (such as “OUT2”) in the table.

6. Switch to the Inbound Plugs tab page and enter the name of the new plug (such as “IN2”) in the table. Save your changes.

Now that both the layout elements and the required plugs have been created, all that is missing is the link between the BUTTON2 button and the OUT2 outbound plug.

21BCO5647

Practical Example

7. Switch back to the Layout tab page and select the BUTTON2 entry in the element hierarchy below the ROOTUIELEMENTECONTAINER.

In the table below the hierarchy you have the option of maintaining the properties and linking the selected element.

8. First choose the text property and enter a suitable text (in this case “Back!”, for example) in the Value row.

9. Below the Events header, choose the OnAction row.

You have to create another action for the OnAction event here, which calls the outbound plug of the view when the BUTTON2 button is clicked.

10. Enter a name for the action in the dialog box (for example, GOTOOUT2), select the only available outbound plug, and confirm your entries.


In this step, you have created the layout of the second view of your application, and you have ensured the navigability of the view by creating plugs. Furthermore, you have linked both of these to each other by linking the BUTTON2 interface element to a navigation call to the outbound plug OUT2 of the view.

You now have to maintain a context for the second view as well.

22BCO5647

Practical Example

6. Maintaining the Context of the Second View Just like in step 3, the context of the component controller is now made accessible to the context of the

second view. A new node is created again in the view context and mapping is defined between this new node and the NODE1 node of the component controller context. The attribute of the view context is then bound to the TEXTOUTPUT layout element, just like in step 4.

1. While staying in your second view, switch to the Context tab page and ensure that the Workbench is in change mode.

2. Open the context menu of the root node of the view context and create a new node.

3. Enter a name for this node (such as “VIEW2”), confirm the dialog and save your work.

4. Now open the context menu of the new VIEW2 node and choose Define Mapping.

5. From the context of the component controller, select the NODE1 node by double-clicking on it.

In this way, the MYNAME attribute is ready in the context of the second view to be bound to a layout element.

23BCO5647

Practical Example

6. Switch to the Layout tab page.

7. Select the TEXTOUTPUT element in the hierarchy below the ROOTUIELEMENTECONTAINER.

8. Find the text entry in the properties table and click again on the corresponding button in the Binding column on the right-hand side of the table.

9. Select the MYNAME attribute again by double-clicking on it.


Your component now contains two views, whose contexts are bound to each other using the context of the component controller. As a result, the work on the layout or the contexts of your component is finished.

24BCO5647

Practical Example

7. Embedding the Views in a Window Each view is a self-contained unit and does not contain any information about navigation to other views. To be able to define

such navigation, and to make the views accessible for users, they have to be embedded in a window.

1. Open the Windows node in the object list hierarchy on the left-hand side of the Workbench.

2. Double-click on the MAIN_WINDOW window.

The structure of your window is now displayed in the Editor on the right-hand side. It is still empty since you have not yet embedded any views.

3. In the structure of the window, open the context menu for the MAIN_WINDOW node and choose Embed View. Make sure that the Workbench is in change mode.

In the following window, specify the name of the view that should be embedded. The input help for the corresponding field displays all views for the current component.

4. Select the STARTVIEW by double-clicking on it and confirm the window.

5. Repeat the process to embed the second view in the window.

6. In the structure of the window, open the context menu for the STARTVIEW node and choose Set as Default.


The MAIN_WINDOW window now contains the two views, which are bound to each other. The STARTVIEW was set as the default view, which means that it is always called first when the window is called.

25BCO5647

Practical Example

8. Defining the Navigation When you designed the two views, you created an inbound and an outbound plug for your views. You

have already bound the button actions to the relevant outbound plug. You must now determine to which inbound plug an outbound plug binds itself when it is called. This navigation is declared in the view hierarchy of the respective window.

1. While remaining in the structure view of the MAIN_WINDOW window, open the STARTVIEW node in the structure of your window.Below this node you will find two additional nodes, one for each plug in this view.

2. Open the context menu of the OUT1 outbound plug and choose Create Navigation Link.

In the following window, specify the required target view (you can use the input help for all the views that are available in this window).

3. Select the RESULTVIEW by double-clicking on it and confirm the dialog.

After you have selected the target view, the only inbound plug IN2 that is available for this view was automatically selected for the navigation. If a view has several inbound plugs, you will have to make another decision again here.


5. Now open the RESULTVIEW node and repeat the whole operation to create a navigation link from the OUT2 outbound plug of the second view to the IN1 inbound plug of the first view.

26BCO5647

Practical Example

9. Creating and Testing a Web Dynpro Application In this last step you have to create a Web Dynpro application so that the window can be called using a URL.

A Web Dynpro application is linked uniquely to a URL with which it can be started in the browser. The Web Dynpro application does not contain any information about the inner structure of the window behind it. For every window of a component, a uniquely assigned interface with the same name is generated when it is created: the interface view. The window is linked with the Web Dynpro application using this interface view.

1. Open the context menu for your Web Dynpro component in the object list hierarchy and choose Create Web Dynpro Application.

2. Accept the default name or give your application an alternative name and confirm the dialog.

A list of the properties of your new application is displayed on the right-hand side.


4. Activate all parts of your component by choosing the corresponding entry in the context menu of the ZMYCOMPONENT component.

5. Open the context menu of the Web Dynpro application you have just created and choose Test.

The Workbench ensures that a browser is started and that the URL that was generated for your application is called. You may need to log on to your system again using the browser.

An interface element is displayed in the top-left corner of your browser, and there is a button to the right of it. Once you have entered a text and clicked on the button, you will be taken to your second view. The text that you entered appears there together with the button for backwards navigation.

The simple Web Dynpro application with the equally simple context example is complete

Date post:	14-Jan-2015
Category:	Technology
Upload:	mkpatil
View:	1,278 times
Download:	4 times

Lecture14 abap on line

Technology