WebDypro两个页面之间传值.docx

WebDypro两个页面之间传值.docx

《WebDypro两个页面之间传值.docx》由会员分享，可在线阅读，更多相关《WebDypro两个页面之间传值.docx（14页珍藏版）》请在冰豆网上搜索。

WebDypro两个页面之间传值

WebDypro两个页面之间传值

WebDynproforABAPTM

Scenario:

TocreateandrunasimpleWebDynproApplication.Wewouldacceptaninputvaluefromtheuseronfirstscreenanddisplaythevalueenteredonthesecondscreen.

Note:

PleaserefertotheSAP®helpfordetailedinformationofthecomponentsusedinthisdocument. 

Procedure:

1.     GototransactionSE80.PleasenotethatthereisnoseparatetransactionforcreationofWebDynproapplicationotherthanSE80. 

2.     Select“WebDynproComp./Intf”fromthelist（asshownbelow）

3.     CreateanewWebDynprocomponentbythenameZSAPTECHNICAL_DEMO. 

 Assignittothelocalobject. 

4.     RightclickontheWebDynprocomponent“ZSAPTECHNICAL_DEMO”andcreateaview.

Savetheapplication 

5.     Double-clickontheCOMPONENTCONTROLLER.

6.     Checkiftheapplicationisinchangemode. 

7.     Createanodeasshownbelow:

8.     Createanattributeforthenodeasshownbelow:

 Savetheapplication. 

9.     Double-clickontheview,FIRST_VIEW,createdearlier.

 Inthisstep,wewouldbedesigningthefirstscreenofourapplicationwiththefollowingelements:

∙       Labelfortheinputfield

∙       Inputfield

∙       Button（forSubmit） 

Draganddroptheelement“Label”ontothelayout. 

Afterdragginganddroppingontothelayout,changethetextofthe“Label”to“Username”intherightsidebottomofthewindow. 

Nowdraganddropthe“inputfield”ontothelayout.

NowclickontheLabelelementcreatedearlierandsetthepropertyof“LabelFor”to“INPUT_FIELD”.

Finally,draganddroptheelement“Button”ontothelayout.

InthepropertieswindowoftheButton,dothefollowing:

Changethetextto“Submit”

Clickon“Create”fortheproperty“OnAction”.

EntertheActionandtheOutboundPlugname.

Press“OK”forthecreationpromptofOutboundPlug. 

Clickon“Context”tab.DraganddroptheNodeontherightsidetothecontextontheleftside.

Clickon‘YES’forthepromptforthenodetocopiedandmapped.

 Savetheapplication. 

ClickonLayouttabnow.

Double-clickonthe“Input_field”andintheproperties:

a）     Fortheproperty“Value”,selecttheattribute“Name”byclickingonthebindingbutton.

Wearedonewithdesigningofthefirstscreen.

10. Inthisstep,wewoulddesignthesecondscreenofourapplication.

Right-ClickontheWebDynprocomponentandcreateanotherview,SECOND_VIEW. 

Createalabel,“EnteredName”asmentionedintheearlierstep.

Wewoulddisplaythevalueenteredonthefirstscreeninanelementcalled“textview”.

Draganddroptheelement“TextView”ontothelayout. 

Clickon“Context”tabandmapthenodesasinourearlierstep.

GotoTab“InboundPlugs”andcreateaninboundplugasshownbelow:

Gobacktothelayoutnow.

Nowdouble-clickontheelement“TextView”toopentheproperties.Fortheproperty“Text”,clickonthebindingbuttonandselect“Name” 

11. Inthisstep,wewouldembedtheabovecreatedviewsinthewindowcreatedinthefirststep.

a）     Double-clickonthewindow“MAIN_WINDOW”.

b）     Right-clickonthewindownameandselect“EMBEDVIEW”.

c）     Embedboththeviewscreatedearlier.Donotselecttheview“EMPTYVIEW”whichiscreatedbydefault.

d）     Expandthetree.

e）     Nowright-clickon“SUBMIT”andselect“CreateNavigation”.

f）       Select“SECOND_VIEW”forthedest.view.

g）     NowselecttheFIRST_VIEWandmakeitasdefault.

Saveandactivatetheapplication（Whenactivating,selectallthesixcomponentsrelatedtothiswebdynproapplication.Ifallsixcomponentsareactivated,onlythenyourapplicationexecutes）

Nowyourapplicationisreadytoexecute.Letslookatthemethodoftestingthisapplication.

TestingyourWebDynproComponent

1.     Right-clickontheWebDynproComponentandcreateWebDynproApplication.

2.     Withoutchanginganyvalues,pressSAVE.

3.     ExecuteyourWebDynproapplication.