Using components with the same component interface

Dynamic Usage of different Components

Exercise 4: Using components with the same component interface

Exercise Objectives

After completing this exercise, you will be able to:

• Create component interfaces.

• Implement component interfaces.

• Use multiple components that have the same component interface.

Business Example

Depending on configuration or authorization, the user of your application should see different kinds of details for the marked flight (related bookings or complete flight data set). The functionality of reading and displaying details should be reusable, so two separate components providing the detail information have to be created. Both components should have the same component interface. This has to be accomplished by implementing a common component interface by both components. This component interface does not exist, so it has to be created first.

By adding the component interface to the list of used components, the main component can instantiate and access the usage of the correct detail component at runtime. The window defined in the common component interface has to be displayed as a modal dialog box.

Template Component: NET311_WINDOW_S Solution Main Component: NET311_COMP_S

Solution Sub Components: NET311_COMP_C1_S, NET311_COMP_C2_S Optional Parts:

Solution Main Component: NET311_COMP_OPT_S Solution Sub Components: NET311_COMP_C1_OPT_S, NET311_COMP_C2_OPT_S

Task 1:

If you have finished the previous exercise, you can skip this task. Then, all changes can be implemented in the component you have created in your last exercise.

If you have not finished your last exercise, you can start with a copy of the template component. In this case, copy the template component and name the copy ZNET311_COMP_##. Assign this component to your package ZNET311_##.

Create an application having the same name as your component and assign the application to your package, too.

Hint: The component you created in your last exercise (or the component you create in this task by copying the template component) will be referred to as your main component in this exercise.

1. Copy the template component.

2. Create an application to access your component.

Task 2:

Create a component interface (name: ZNET311_##_IF) in your package. This interface should consist of a method (name: DISPLAY_DETAILS( )) having an import parameter (name: IS_FLIGHT) of type SFLIGHT and an interface view (name: DETAILS_WINDOW). Activate the component interface.

1. Create a component interface (name: ZNET311_##_IF).

2. Create an interface view (name: DETAILS_WINDOW) for the component interface you have created before.

3. Create a method (name: DISPLAY_DETAILS( )) in the interface controller of the component interface. This method should have an import parameter (name: IS_FLIGHT) of type SFLIGHT.

4. Activate the component interface.

Continued on next page

Task 3:

Create two new components in your package (names: ZNET311_##_C1 and ZNET311_##_C2) each having a view (name: DETAILS_VIEW). Implement the component interface ZNET311_##_IF by both components. Embed the view DETAILS_VIEW in the window DETAILS_WINDOW defined in the component interface.

1. Create two new components in your package (names: ZNET311_##_C1 and ZNET311_##_C2).

Hint: When creating a component, you also have to create a window for this component. However, we do not need this window here.

Thus you may delete the windows after the creation process of the components is completed.

2. Implement the component interface ZNET311_##_IF by both components.

3. For each of the components create a view (name: DETAILS_VIEW). Embed this view in the window provided by the implemented component interface.

Task 4:

Implement the functionality of component ZNET311_##_C1:

For the key of a given flight, all related bookings should be read and displayed by the view DETAILS_VIEW.

1. Create a node (name: BOOKINGS, cardinality: (0:n), type: SBOOK) in the component controller context of component ZNET311_##_C1. This node should contain the fields BOOKID, CUSTOMID, CUSTTYPE, SMOKER, CLASS, FORCURAM, FORCURKEY, and ORDER_DATE.

2. Copy and map this node to the context of the view DETAILS_VIEW.

3. Display the content of the node BOOKINGS by a tableView UI element.

Display 10 lines in the table. Do not display a mark column.

4. In method DISPLAY_DETAILS( ) read the bookings for the flight key passed via the import parameter IS_FLIGHT. Use the static method READ_BOOKINGS( ) of class CL_NET310_FLIGHTMODEL. Save the bookings in the context node BOOKINGS.

Task 5:

Implement the functionality of component ZNET311_##_C2:

For the key of a given flight, the complete flight data set should be read and displayed in the view DETAILS_VIEW.

1. Create a node (name: FLIGHT, cardinality: (1:1), type: SFLIGHT) in the component controller of component ZNET311_##_C2. This node should contain all fields of the transparent table sflight.

2. Copy and map this node to the context of the view DETAILS_VIEW.

3. Display the content of the node FLIGHT by a form containing labels and read-only inputFields. Display all context attributes except the attribute CLIENT.

4. In method DISPLAY_DETAILS( ) read the complete flight data set for the flight key passed via the import parameter IS_FLIGHT. Use the static method READ_FLIGHTS( ) of class CL_NET310_FLIGHTMODEL. Save the flight in the context node FLIGHT.

Task 6:

At runtime, one of the components ZNET311_##_C1 or ZNET311_##_C2 has to be instantiated and accessed to display the details for the flight selected by the user in a modal dialog box. Only the component interface should be declared as a used component. The name of the sub component implementing this component interface should be provided by the value of a context attribute defined in the component controller of your main component.

1. Add the component interface to the list of used components for your main component. Choose DETAILS_COMP as the name of the component usage.

2. In the context of the component controller of your main component, add a context node (name: SUB_COMP_INFO) having an attribute (name:

NAME) of type STRING. Set the property Default Value of this context attribute to ZNET311_##_C1, where ## is your group number.

Caution: The name of the component has to be entered in upper case letters.

3. Add the interface controller of the used component DETAILS_COMP to the list of used controllers for the component controller of your main component.

4. Create a method (name: PROCESS_SUB_COMP( )) in the component controller of your main component. Implement the functionality of the method:

- Read the flight key from the context node FLIGHTS.

Continued on next page

- Read the name of the component that should be used to display the details from the context node SUB_COMP_INFO.

- Instantiate the component usage if necessary.

- Call the interface method DISPLAY_DETAILS( ) of the subcomponent and pass the connection key to this method.

5. Create a new action (name: DISP_DETAILS_SUBCOMP) in view MAIN_VIEW of your main component. Assign this action to the event onLeadSelect of the table displaying the flights.

Hint: Up to now, the action DISP_DETAILS has been assigned to the table event onLeadSelect. Thus selecting a line has lead to displaying the related bookings by a window also defined in the main component. Because we do not want to rewrite this coding, a new action will be used to display the details by a sub component.

6. Implement the action handler method for action DISP_DETAILS_SUBCOMP:

Call the component controller method PROCESS_SUB_COMP( ).

Then, create and open a modal dialog box for the interface view DETAILS_WINDOW of the sub component.

- Use the method CREATE_WINDOW_FOR_CMP_USAGE( ) of the interface IF_WD_WINDOW_MANAGER to create the dialog box.

- Store the reference to the popup in the attribute GR_WINDOW of the component controller.

- Set the parameter CLOSE_IN_ANY_CASE to ABAP_FALSE.

- Get the title displayed by the dialog box from the assistance class.

Task 7:

Test the functionality of your application.

1. To define which of the components is instantiated at runtime, the property Default Value of the component controller's context attribute SUB_COMP_INFO.NAME has to be changed.

Task 8:

OPTIONAL:

Add an OK button to the modal dialog box. In the controller of the view that is displayed in the modal dialog box, create an action. Assign this action to the event

“Pressing the OK button”. Finally, implement the action handler method: Close the modal dialog box, if the OK button is pressed.

Because the reference to the dialog box is used in several controllers of the sub component, it is advantageous to store this reference as a public attribute of the sub component's component controller. If the window DETAILS_WINDOW is send as a modal dialog box, this reference is automatically provided by the WD framework (interface parameter WINDOW_DESCR->WINDOW in method WDDOONOPEN( )).

These steps have to be implemented in both components that implement the component interface.

1. Create a public attribute (GR_WINDOW type ref to IF_WD_WINDOW) in the component controller of the sub component.

2. Add the component controller to the list of used controllers for the window DETAILS_WINDOW. This is necessary to access the public attribute GR_WINDOW defined in the component controller.

3. Check if the window DETAILS_WINDOW of the sub component is sent as a modal dialog box. If this is true, display an OK button in the dialog box.

Define this button as the default button and hide the close button of the popup (right upper corner).

4. Create a new action (name: OK_BUTTON_ACTION) for the view DETAILS_VIEW that is embedded in the window DETAILS_WINDOW.

5. Create the method REGISTER_BUTTONS( ) in the view DETAILS_VIEW.

6. Create a controller attribute (name: GR_VIEW_API) in the view

DETAILS_VIEW. At runtime, this attribute should contain the reference to the view controller API (interface IF_WD_VIEW CONTROLLER).

Set the value of the attribute GR_VIEW_API in the method WDDOINIT(

) of view DETAILS_VIEW.

7. If the window is send as a modal dialog box, call the method REGISTER_BUTTONS( ) from the method WDDOINIT( ) of view DETAILS_VIEW.

8. Implement the method REGISTER_BUTTONS( ):

Register the action OK_BUTTON_ACTION for the event “pressing the OK button”.

9. Implement the handler method of action OK_BUTTON_ACTION:

Continued on next page

Check the name of the user event by checking the value of the public attribute WDEVENT->NAME. Close the modal dialog box, if this value corresponds to the value expected for the OK button (value: ON_OK).

Solution 4: Using components with the same component interface

Task 1:

If you have finished the previous exercise, you can skip this task. Then, all changes can be implemented in the component you have created in your last exercise.

Create an application having the same name as your component and assign the application to your package, too.

Hint: The component you created in your last exercise (or the component you create in this task by copying the template component) will be referred to as your main component in this exercise.

1. Copy the template component.

a) Display the template component in the object tree. Clicking on the component with the right mouse button will open the component's context menu. Choose Copy.... Enter the name of the component to be created. Press Continue.

b) Adapt the description of the new component.

2. Create an application to access your component.

a) An application having the same name as the component can be created from the context menu of the component.

Choose MAIN_WINDOW as the interface view and DEFAULT as the name of the startup plug.

Continued on next page

Task 2:

1. Create a component interface (name: ZNET311_##_IF).

a) A component interface is created the same way as a component.

However, in the popup that appears while creating the component / component interface, you have to select the radio button with the label Web Dynpro Component interface.

b) Save. Assign your component interface to your package.

2. Create an interface view (name: DETAILS_WINDOW) for the component interface you have created before.

a) From the context menu of the component interface, you can create the interface view.

3. Create a method (name: DISPLAY_DETAILS( )) in the interface controller of the component interface. This method should have an import parameter (name: IS_FLIGHT) of type SFLIGHT.

a) In the object tree of the component interface, double-click on the item INTERFACECONTROLLER.

b) Select the Methods tab. Enter the name of the method in the Method column.

c) Enter the name of the parameter in the column Parameter. Choose Type = Importing and Associate Type = SFLIGHT.

d) Save.

4. Activate the component interface.

a) Proceed as described in exercises you have done before.

Task 3:

1. Create two new components in your package (names: ZNET311_##_C1 and ZNET311_##_C2).

Hint: When creating a component, you also have to create a window for this component. However, we do not need this window here.

Thus you may delete the windows after the creation process of the components is completed.

a) Proceed as described in exercises you have done before.

2. Implement the component interface ZNET311_##_IF by both components.

a) The following steps have to be performed for both components, ZNET311_##_C1 and ZNET311_##_C2.

b) In the object tree of your package, double-click on the name of the component. This will display the list of used components. Make sure that you are in the edit mode.

c) Select the tab Implemented Interfaces.

d) Enter the name of your component interface (ZNET311_##_IF) in the column Name.

e) Press the button with the label Reimplement that is displayed in the column containing the name of the component interface. The light in the column Implementation State will change from red to green.

f) Activate the component.

3. For each of the components create a view (name: DETAILS_VIEW). Embed this view in the window provided by the implemented component interface.

a) Proceed as described in exercises you have done before.

Continued on next page

Task 4:

Implement the functionality of component ZNET311_##_C1:

For the key of a given flight, all related bookings should be read and displayed by the view DETAILS_VIEW.

a) Proceed as described in exercises you have done before.

2. Copy and map this node to the context of the view DETAILS_VIEW.

a) Proceed as described in exercises you have done before.

3. Display the content of the node BOOKINGS by a tableView UI element.

Display 10 lines in the table. Do not display a mark column.

a) Proceed as described in exercises you have done before.

Use the Web Dynpro Code Wizard to create the table.

Hint: The number of visible rows can be set via the property visibleRowCount, the mark column can be hidden by setting the property selectionMode to none.

a) Source code see below.

Task 5:

Implement the functionality of component ZNET311_##_C2:

For the key of a given flight, the complete flight data set should be read and displayed in the view DETAILS_VIEW.

1. Create a node (name: FLIGHT, cardinality: (1:1), type: SFLIGHT) in the component controller of component ZNET311_##_C2. This node should contain all fields of the transparent table sflight.

a) Proceed as described in exercises you have done before.

3. Display the content of the node FLIGHT by a form containing labels and read-only inputFields. Display all context attributes except the attribute CLIENT.

a) Proceed as described in exercises you have done before.

Use the Web Dynpro Code Wizard to create the form. In the generated form, mark the check box related to the property readOnly for all inputFields.

a) Source code see below.

Task 6:

1. Add the component interface to the list of used components for your main component. Choose DETAILS_COMP as the name of the component usage.

a) Edit the list of used components for your main component. Select the tab Used Components. Enter the name of your component interface in the column Component and DETAILS_COMP in the column Component Use.

b) Save.

2. In the context of the component controller of your main component, add a context node (name: SUB_COMP_INFO) having an attribute (name:

NAME) of type STRING. Set the property Default Value of this context attribute to ZNET311_##_C1, where ## is your group number.

Caution: The name of the component has to be entered in upper case letters.

a) Proceed as described in exercises you have done before.

Continued on next page

3. Add the interface controller of the used component DETAILS_COMP to the list of used controllers for the component controller of your main component.

a) Edit the properties of the component controller of your main component.

b) Use the button having the quick info Create Controller Usage to add the interface controller of component usage DETAILS_COMP to the list of used controllers / components.

4. Create a method (name: PROCESS_SUB_COMP( )) in the component controller of your main component. Implement the functionality of the method:

- Read the flight key from the context node FLIGHTS.

- Read the name of the component that should be used to display the details from the context node SUB_COMP_INFO.

- Instantiate the component usage if necessary.

- Call the interface method DISPLAY_DETAILS( ) of the subcomponent and pass the connection key to this method.

a) In order to instantiate the component usage, the name of the sub component implementing the component interface ZNET311_##_IF has to be passed to the method CREATE_COMPONENT( ).

b) Source code see below.

5. Create a new action (name: DISP_DETAILS_SUBCOMP) in view MAIN_VIEW of your main component. Assign this action to the event onLeadSelect of the table displaying the flights.

a) Proceed as described in exercises you have done before.

Replace the action DISP_DETAILS actually assigned to the table event onLeadSelect by the new action DISP_DETAILS_SUBCOMP.

6. Implement the action handler method for action DISP_DETAILS_SUBCOMP:

In document NET311 Advanced ABAP Web Dynpro (Page 121-137)