Sunday, December 19, 2010

Reusability of components in Web Dynpro for ABAP

Summary:

Web dynpro Application to demonstrate the usage of custom component into other component. We will develop one webdynpro component (ZDEMO_FLIGHTS) and make the methods of this Component controller available for cross components. We develop another component (ZDEMO_SEARCH_FLIGHTS) and we reuse the methods of component (ZDEMO_FLIGHTS) in component (ZDEMO_SEARCH_FLIGHTS). This is a typical example of reusable components that are built to display a special set of data and can be used in several other components.

Development Objectives:

At the end of this tutorial, you will be able to understand “Using one Component’s methods in another component (Reusing the Components)”.

Application One: Development of Reusable Component

  1. Create a Webdynpro component using TCode SE80 with name ZDEMO_FLIGHTS.

Creating Component Controller Context and Methods:

2. Click on Component Controller in the Object tree.

Create the context node

Maintain the properties according to the screen shot below. Enter Node name FLIGHTS, Select SFLIGHT as Dictionary Structure and “0…n” for the Cardinality.

Select button Add Attribute from Structure and select all components of structure SFLIGHT.

Now go to Methods tab in the Component Controller, add the method to get Fights details and check the interface checkbox in order to access this method in other components.

Add the Importing parameters and implement the Method to get the Flight details from Table SFLIGHT.

Creating a View:

Click on the Web Dynpro component ZDEMO_FLIGHTS in the object tree and open the context menu to create a new view.

Create view FLIGHTS.

Defining the View Context Mapping

Open view FLIGHTS and switch to tab Context. Map context node FLIGHTS to the view context of FLIGHTS using Drag and Drop.

Adding UI Elements to the View:

Add table Element to Layout.



Bind the View Context node FLIGHTS to the Table Flights using create binding option in Context Menu.

Click on Context (1) of pop up and then select node Flights (2)

Make sure that the binding for all required context attributes is enabled (all checkboxes are activated) and press Confirm Entry (Enter).

The result should look like this.

Now open window ZDEMO_FLIGHTS by clicking on Windows and double-clicking on ZDEMO_FLIGHTS. Switch to change mode. Open the view structure and move the view FLIGHTS inside the window structure on the right hand side by Drag and Drop.

Activation, Creation of a Web Dynpro Application and Execution:

1. Activate all objects of Web Dynpro component ZDEMO_FLIGHTS.

2. Click on the Web Dynpro component ZDEMO_FLIGHTS in the object tree and open the context menu to create a new application.

A dialog will appear. Enter the values as seen here and hit enter. After the application has been created, then click save.

To start the application, right click on your Web Dynpro application entry and select context menu entry Test.

A browser will be started to run the Web Dynpro application. The result page should look like this:

Component Two:

In this Web dynpro component we will use above component to show flight details, if the search details are entered by user in this component.

Creating a Web Dynpro Component:

Create Webdynpro component using Tcode SE80 with name ZDEMO_SEARCH_FLIGHTS.

Declaration of Flights Component with in ZDEMO_SEARCH_FLIGHTS for Component Usage:

Double click the component in the Object tree and choose the tab Used Components. Create a new component use flights using the component ZDEMO_FLIGHTS by adding the entries in used component list.



Creating a View:

Click on the Web Dynpro component ZDEMO_SEARCH_FLIGHTS in the object tree and open the context menu to create a new view.

Create View SEARCH.

Create a Context for SEARCH:

Open the view editor for view SEARCH and switch to tab Context. Create a context node SEARCH_NODE in the view controller by opening corresponding menu.

Enter node name SEARCH_NODE, structure is SFLIGHT and cardinality should be 1…1, then click on Add Attribute from Structure to select required fields.

Designing View:

Design the layout with two Input fields with labels, one button with action to search for Flight details and View Container UI Element to display the table from the component ZDEMO_FLIGHTS to Layout by Right click on Route Element Container or Drag and drop from Layout Container.

Create an Action for the button SEARCH.

The Resulted view will be like

Switch to the Window of the component in the object list tree (the window’s name may be different depending of the template used), open the node SEARCH at the right hand side and select Embed View by right clicking on the node ViewContainerUIelement_1.

Select the Input help of the input field View to be embedded from the popup.

Choose the Interface view ZDEMO_FLIGHTS of component usage FLIGHTS.

The resulted window will be like


Declare and Configure View Controller and Interface Controller:

Before you can call the Interface Controller method of the used component you have to declare that the view controller can use the Interface Controller of the used component. By default only the component controller can access used components directly, view controllers have to specify this explicitly. Therefore go to the tab Properties of the SEARCH, click the button Create Controller Use and select the INTERFACECONTROLLER of the FLIGHTS component use.

Now go to methods tab of SEARCH view and implement the method ONACTIONSEARCH.

To get the flights information based on input information we will write below code.

First we need Carrier Id and Connection Id then we will pass these values to Method GET_FLIGHT_DETAILS of used component ZDEMO_FLIGHTS to retrieve the flights details. To get the value of the Context node SEARCH use code wizard of Application tool bar.

Select Read Context Node/Attribute and click the input help (1). Select SEARCH (2) node in the appearing context viewer.

The wizard will generate the necessary coding to get the carrier id and connection id from the input fields and stores it in a structure STRU_SEARCH.

Position the cursor at the end of the generated code and call the code wizard again to generate the coding to call the Interface Controller method. Choose Method Call in Used Controller (1) Select the INTERFACECONTROLLER of the used component (2) Select the input help of the Method input field (3) and choose the GET_FLIGHT_DETAILS method (4)

The wizard will generate the coding for calling the Interface Controller’s GET_FLIGHT_DETAILS method and pass the parameters to the method.

Activation, Creation of a Web Dynpro Application and Execution:

1. Activate all objects of Web Dynpro component ZDEMO_SEARCH_FLIGHTS.

2. Click on the Web Dynpro component ZDEMO_SEARCH_FLIGHTS in the object tree and open the context menu to create a new application.

3. Test the Application.

Result:

The result of the application is like:





No comments:

Tutorials on SAP-ABAP

Adobe Interactive Forms Tutorials

Business Server Pages (BSP)

Userexits/BADIs

Web Dynpro for ABAP (Step by step procedure for web dynpro,Tutorials on Web Dynpro,)

ALV Tutorials

Blog Archive

goodsites