wd component usage

8/12/2019 WD Component Usage

1/13

Web Dynpro for ABAP

Exercise Unit: Component Usage Estimated Time: 45 minutes

NOTES:

If you wish to find out more about any field, first select that field and then hit F1.

Logon to the !" system and start !#!" $or%bench &E'(). Logon data is *ro+ided by your

instructor. a+e all your obects as local obects &*ac%age name -T").

PURPOSE:

!t the end of this Tutorial you will be able to

/nderstand how larger $eb 0yn*ro *roects can be structured with se+eral $eb 0yn*rocom*onents

#e able to include a reusable $eb 0yn*ro com*onent into another $eb 0yn*ro com*onent

now how methods of an used $eb 0yn*ro2s Interface 3ontroller is called

PREREQUISITES:

Logon to the !" system and start !#!" $or%bench &E'(). Logon data is *ro+ided by your instructor.

DEVELOPMENT OBJECTIVES:

3reate a $eb 0yn*ro com*onent ((36"/!7E with a com*onent interface that can be used

another com*onent

Enhance an e8isting com*onent with a +iew container to show the interface +iew of another

com*onent.

0efine the data binding between the outer com*onent and the used com*onent

PROCEDURE:

1. 3o*y the $eb 0yn*ro com*onent ((#66I97 to ((36"/!7E.

. 0eclare a com*onent usage of the 3/T6E;0!T! com*onent in your ((36"/!7Ecom*onent.

TLIT=IE$.

Page 1 juin 20, 2014


2/13

Web Dynpro for ABAP

4. witch to the window of the main com*onent and embed the +iew I=3/T6E;0!T! of the usedcom*onent 3/T6E;0!T! into the =iew3ontainer/IElement.

5. 0eclare that the +iew controller of the +iew FLI7>TLIT=IE$ can use the interface controller of theused com*onent 3/T6E;0!T!.

?. For the e8isting /I element TABLE_2 create a new e+ent SHOW_CUSTOMER onLeadelect.

@. Im*lement the coding of the method ONACTIONSHOW_CUSTOMER.

a. In order to dis*lay the corres*onding customer data you first need to find out the customer I0of the selected boo%ing.

b. 3all the interface controller method >6$3/T6E; and *ass on the customer I0.

'. 3reate a $eb 0yn*ro a**lication. ;un the $eb 0yn*ro a**lication com*onent and select different

customer records.

1. Create the Web Dynpro Component ZZ_00_COMPU!"E

STEPS:

1. 3o*y the $eb 0yn*ro com*onent ((#66I97 to ((36"/!7E

Page # juin 20, 2014


3/13

Web Dynpro for ABAP

#. Dec$aration o% CU&OME'_D!&! Component (ithin ZZ_00_COMPU!"E

%or Component Usage

STEPS:

1. 0ouble clic% the com*onent in the obect tree and choose the tab Used Components. 3reate a new3om*onent /se 3/T6E;0!T! using the com*onent 3/T6E;0!T! by adding theentries directly in the Used Components List.

Page ) juin 20, 2014


4/13


5/13

Web Dynpro for ABAP

elect the In*ut hel* of the in*ut field View to #e Em#edded of the a**earing *o*u*.

3hoose the interface +iew IV_CUSTOMER_$ATA of the used com*onent CUSTOMER_$ATA.

Page / juin 20, 2014


6/13

Web Dynpro for ABAP

The window structure should now dis*lay the interface +iew IV_CUSTOMER_$ATA within the=iew3ontainer/Ielement in the FLI7>TLIT=IE$

Page juin 20, 2014


7/13

Web Dynpro for ABAP

. Dec$are an* con%ig-re ,ie( contro$$er an* +nter%ace contro$$er

STEPS:

1. #efore you can call the Interface 3ontroller method of the used com*onent you ha+e to declare that the+iew controller can use the Interface 3ontroller of the used com*onent. #y default only the com*onentcontroller can access used com*onents directly, +iew controllers ha+e to s*ecify this e8*licitly.Therefore go to the tab %opeties of the FLI7>TLIT=IE$, clic% the button Ceate Conto!!e Use andselect the INTER&ACECONTROLLERof the CUSTOMER_$ATA com*onent use.

Page juin 20, 2014


8/13

Web Dynpro for ABAP

/. Create a ne( e2ent %or an existing U+ e$ement &!34E_#

STEPS:

1. witch to the Layout of the +iew FLI7>TLIT=IE$ again, select the boo%ings table TABLE_2 in thehierarchy at the to* right and scroll to the E+ents in the *ro*erties of the T!#LE and create a newaction for the onLeadSe!e't e+ent by clic%ing the create button at the right hand side.



9/13

Web Dynpro for ABAP

9ame the new action SHOW_CUSTOMER and confirm.

7o to the e+ents of the *ro*erties table of TABLE_2 and double clic% the newlycreated

action SHOW_CUSTOMER to switch to the source code of the corres*onding method.

This leads you to the source code editor of the method ONACTIONSHOW_CUSTOMER, which istriggered by the action SHOW_CUSTOMER whene+er the lead selection of the boo%ings table ischanged.

To dis*lay the corres*onding customer data in the used com*onent, the customer I0 of the currentlyselected boo%ing should be *assed to the used com*onent by calling its interface methodSHOWCUSTOMER.



10/13

Web Dynpro for ABAP

. +mp$ement the metho* %or the e2ent

STEPS:

1. $e im*lement the coding of the method ONACTIONSHOW_CUSTOMER

First you need the customer I0 of the selected boo%ing, which is stored in the corres*ondingconte8t node. To get the +alue of the conte8t node *lace the cursor in the method and use the

code wiAard by clic%ing.

elect Read Conte(t Node)Atti#*te and clic% the in*ut hel* &1). E8*and the #66I97 node inthe a**earing conte8t +iewer and select the attribute CUSTOMI$ &) and confirm.

The wiAard will generate the necessary coding to get the customer I0 of the selected boo%ing and stores itin a +ariable Item_C*stomid at the end of the generated code.

Page 10 juin 20, 2014


11/13


12/13

Web Dynpro for ABAP

The wiAard will generate the coding for calling the Interface 3ontroller2s >6$3/T6E; method. !ddthe Item_C*stomid *arameter to the call:

Page 1# juin 20, 2014


13/13

Web Dynpro for ABAP

RESULT :

Test the $eb 0yn*ro a**lication with different customer records

a+e, acti+ate and generate e+erything and test the corres*onding $eb 0yn*ro a**lication. elect differentboo%ings and chec% that the corres*onding customer records. Bou should now be able tocreate and use a 3onfiguration 3ontroller,steer a**lication beha+iour de*ending from the configuration attribute settings use the !**lication and3om*onent 3onfigurators to set the +alues for configuration attributes

wihto

Page 1) juin 20, 2014

wd component usage

Documents