WDJ - Using Web Dynpro Component Interface Definition

WDJ - Using Web Dynpro Component Interface Definition

Applies to:
SAP WAS SP 16

Summary
This document provides detailed instructions on how to use Web Dynpro Component Interfaces in a Web Dynpro Java Application. It contains step-by-step instructions for creating the component interface definition and implementing this interface definition in the Web Dynpro component.

Author(s): Mahesh K. Company: LARSEN & TOUBRO INFOTECH Ltd. Created on: 28 March 2007

Author Bio
Mahesh K. is a SAP NetWeaver (Web Application Development Focus JAVA) certified Technical Consultant working with L&T Infotech, Mumbai, India. His SAP experience of over 2 years spans various technologies such as ABAP, Web Dynpro for Java and Enterprise Portal.

SAP DEVELOPER NETWORK | sdn.sap.com 2007 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 1

WDJ - Using Web Dynpro Component Interface Definition

Table of Contents
Using Web Dynpro Component Interface Definition........................................................................ 1 Applies to: ........................................................................................................................................ 1 Summary.......................................................................................................................................... 1 Author Bio ........................................................................................................................................ 1 Table of Contents ............................................................................................................................ 2 Introduction ...................................................................................................................................... 3 Project Structure .............................................................................................................................. 4 Creating the Component Interface Definition .................................................................................. 5 Implementing the Component Interface Definition .......................................................................... 7 Making Use of Component Interface Definition ............................................................................. 10 Result............................................................................................................................................. 15 Related Content............................................................................................................................. 16 Disclaimer and Liability Notice....................................................................................................... 16

SAP DEVELOPER NETWORK | sdn.sap.com 2007 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 2

WDJ - Using Web Dynpro Component Interface Definition

Introduction
Consider a scenario wherein there is a main component and two child components. We have to decide at runtime which component instance has to be displayed in the main component. Developing two monolithic components would mean that one has to reference both the child component instances in the main component. As an alternative we can make use of Component Interface Definition. Component Interface Definition gives an abstract definition of the UI component interfaces (component interface controller and component interface views). Process involves creating a root component interface with an interface view and then implementing this interface definition in both child components. In main component we need to reference the component instance of the root component interface only. Context variables, methods and events can also be reused in different components by defining it in the interface definition. The following example will illustrate the use of these interface definition and the reuse of methods and the interface views in different components. It will also show how to create component instance at runtime using IWDComponentUsage.

SAP DEVELOPER NETWORK | sdn.sap.com 2007 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 3

WDJ - Using Web Dynpro Component Interface Definition

Project Structure
The project DP_TutWDInterfaces consist of 3 components of the following name: TutWDUInterfacesComp (Main component) ChldDC1Comp ChildDC2Comp

Name Component View Window <Component Name>Comp <Component Name>CompView <Component Name>CompWin

Package Assignment com.sap.wd.<Component Name>comp com.sap.wd.< Component Name >compview com.sap.wd.< Component Name >compwin

After creating the components delete the default window for the following components ChldDC1Comp ChildDC2Comp

as shown below

SAP DEVELOPER NETWORK | sdn.sap.com 2007 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 4

WDJ - Using Web Dynpro Component Interface Definition

Creating the Component Interface Definition

Right click on the Web Dynpro Component Interfaces and create the component interface definition as shown below

Name WDCompInterf

Package com.sap.wd.wdcompinterf

Click on the methods tab and create a method passInfo

Method Name passInfo Parameter Name p_Msg

Return type void Return type string

Click on the context tab and create a context variable Msg

SAP DEVELOPER NETWORK | sdn.sap.com 2007 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 5

WDJ - Using Web Dynpro Component Interface Definition

Right click on Interface View Definitions and create an Interface View as shown below

Name ChildDCCompWin

Package com.sap.wd.wdcompinterf

SAP DEVELOPER NETWORK | sdn.sap.com 2007 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 6

WDJ - Using Web Dynpro Component Interface Definition

Implementing the Component Interface Definition

Components ChldDC1Comp and ChildDC2Comp will be implementing the component interface wdCompInterf. Go to the Implement Interfaces part of ChildDC2Comp and right click on it to implement the interface definition as shown below

SAP DEVELOPER NETWORK | sdn.sap.com 2007 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 7

WDJ - Using Web Dynpro Component Interface Definition

It will create a window with the same name as that of the interface view created in the Interface definition as shown below

Embed the existing view of the component in this window. Double click on the component interface controller of the component. You can see the method passInfo implemented in it.

Go to the implementation tab and inside the method passInfo, write the following code //@@begin javadoc:passInfo() /** Declared method. */ //@@end public void passInfo( java.lang.String p_Msg ) { //@@begin passInfo() // Set the context variable with the text passed through p_Msg wdContext.currentContextElement().setMsg(p_Msg); //@@end }

Open the ChildDC2CompView and click on the properties tab. Add the component interface controller under the required controllers

SAP DEVELOPER NETWORK | sdn.sap.com 2007 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 8

WDJ - Using Web Dynpro Component Interface Definition

Map the context variable Msg from the component Interface Controller to the View.

Go to the layout of the view and insert a TextView element and bind it to the context variable Msg

Repeat the same process for the component ChldDC1Comp.

SAP DEVELOPER NETWORK | sdn.sap.com 2007 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 9

WDJ - Using Web Dynpro Component Interface Definition

Making Use of Component Interface Definition

TutWDInertacesComp is the main component through which we display both the child components. So add the component interface definition under the used components of TutWDInterfacesComp

Open the layout of TutWDInterfacesCompView and add UI elements as shown below.

SAP DEVELOPER NETWORK | sdn.sap.com 2007 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 10

WDJ - Using Web Dynpro Component Interface Definition

Create actions for the buttons btn_DC1 ( Create Child DC 1 ) btn_DC2 ( Create Child DC 2 )

Button ID btn_DC1

Action createDC1

Event Handler onActioncreateDC1

btn_DC2

createDC2

onActioncreateDC2

Open the Navigation Modeler of the component and right click on the ViewContainerUIElement to embed the interface view of the component interface definition.

Select the option Embed Interface View of a Component Instance since we are using the interface view of the component interface definition added under the used components.

SAP DEVELOPER NETWORK | sdn.sap.com 2007 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 11

WDJ - Using Web Dynpro Component Interface Definition

Select the required interface view from the list as shown below.

After adding the interface view the window will be as shown below.

Go to the properties tab of TutWDInterfacesCompView and add WDCompInterfInst (Web Dynpro component usage) under required controller(s) of the view.

SAP DEVELOPER NETWORK | sdn.sap.com 2007 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 12

WDJ - Using Web Dynpro Component Interface Definition

Then click the implementation tab of the view and add the following code /* * The following code section can be used for any Java code that is * not to be visible to other controllers/views or that contains constructs * currently not supported directly by Web Dynpro (such as inner classes or * member variables etc.). </p> * * Note: The content of this section is in no way managed/controlled * by the Web Dynpro Designtime or the Web Dynpro Runtime. */ //@@begin others IWDComponentUsage g_Usage = null; //@@end

//@@begin javadoc:wdDoInit() /** Hook method called to initialize controller. */ //@@end public void wdDoInit() { //@@begin wdDoInit() g_Usage = wdThis.wdGetWDCompInterfInstComponentUsage(); //@@end }

//@@begin javadoc:onActioncreateDC1(ServerEvent) /** Declared validating event handler. */ //@@end public void onActioncreateDC1(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent ) { //@@begin onActioncreateDC1(ServerEvent) // Check if there is a active component of WDCompInterfInst if (g_Usage.hasActiveComponent() == true) { // Delete the active component g_Usage.deleteComponent(); } // Check if there is a active component of WDCompInterfInst if (!g_Usage.hasActiveComponent()) { // If no active component is there, then create the component g_Usage.createComponent("com.sap.wd.childdc1comp.ChldDC1Comp"); wdThis.wdGetWDCompInterfInstInterface().passInfo( "Created Child DC 1"); } //@@end }

SAP DEVELOPER NETWORK | sdn.sap.com 2007 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 13

WDJ - Using Web Dynpro Component Interface Definition

//@@begin javadoc:onActioncreateDC2(ServerEvent) /** Declared validating event handler. */ //@@end public void onActioncreateDC2(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent ) { //@@begin onActioncreateDC2(ServerEvent) // Check if there is a active component of WDCompInterfInst if (g_Usage.hasActiveComponent() == true) { // Delete the active component g_Usage.deleteComponent(); } // Check if there is a active component of WDCompInterfInst if (!g_Usage.hasActiveComponent()) { // If no active component is there, then create the component g_Usage.createComponent("com.sap.wd.childdc2comp.ChildDC2Comp"); wdThis.wdGetWDCompInterfInstInterface().passInfo( "Created Child DC 2"); } //@@end }

Then deploy and run the application.

SAP DEVELOPER NETWORK | sdn.sap.com 2007 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 14

WDJ - Using Web Dynpro Component Interface Definition

Result
When we the run the application the following window opens up in the internet browser

When we click on button Create Child DC1, the child component DC1 is created and a message displayed as shown below

When we click on button Create Child DC2, the child component DC2 is created and a message displayed as shown below

SAP DEVELOPER NETWORK | sdn.sap.com 2007 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 15

WDJ - Using Web Dynpro Component Interface Definition

Related Content
Web Dynpro Component Interface Definitions in Practice The Structural Concepts of Web Dynpro Components

Disclaimer and Liability Notice

This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade. SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document, and anyone using these methods does so at his/her own risk. SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document.

SAP DEVELOPER NETWORK | sdn.sap.com 2007 SAP AG

BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 16