WebDynpro for ABAP_2

8/2/2019 WebDynpro for ABAP_2

1/30

Web Dynpro ABAPTutorial 1

The First Application with WebDynpro ABAP

2008.12.19


2/30

22

The First Application with Web DynproABAP Flow

Context

ComponentController

Label

Input Field(MyName)

Button

Start View

TextView

(MyName)

Result View

Button

Outbound

Navigation

Inbound

Outbound

Inbound

View

Context

View

Context


3/30

33

The First Application with Web DynproABAP 1. Create Web Dynpro ABAP Component

SE80 -> Web Dynpro Comp./ Intf

Component (ZMycomponent1)

Description

Window


4/30

44

The First Application with Web DynproABAP 2. ComponentController Context

Component Controller -> context tab

Context -> Create-> Node

Node Name : Node1


5/30

55

The First Application with Web DynproABAP 3. Attribute

NODE1 context menu -> Create -> Attribute

Attribute name : MYNAME

Type : String


6/30

66

The First Application with Web DynproABAP 4. Create View

Component context menu -> Create -> View


7/3077

The First Application with Web DynproABAP 5. View Name

View : STARTVIEW

Description : Start view

Enter


8/3088

The First Application with Web DynproABAP 6. Layout : UI Element

Tabstrip-> Layout -> ROOTUIELEMENTCONTAINER context menu -> Insert Element

Name : Label

Typ : Label

InputField, Button

InputField ( Typ : InputField)

Button (Typ : Button)


9/3099

The First Application with Web DynproABAP 7. Label Property

Label

Property Text : Input Your Name

Label for : INPUTFIELD(possible entry , UI Element Inputfield)


10/301010

The First Application with Web DynproABAP 8. STARTVIEW Context

STARTVIEW -> Context

context ComponetController node1 context STARTVIEWdrag.

mapping window Yes

Drag


11/301111

The First Application with Web DynproABAP 9. Data Mapping

Context STARTVIEW -> NODE1

Mapping Path .


12/301212

The First Application with Web DynproABAP 10. InputField Data Bounding

STARTVIEW -> INPUTFIELD

Property -> Value ->

Context Startview -> MYNAME


13/301313

The First Application with Web DynproABAP 11. INPUTFIELD Property

Data Binding InputField data STARTVIEW ContextMYNAME

Data Mapping STARTVIEW Context MYNAME Component ContextMYNAME


14/301414

The First Application with Web DynproABAP 12. Inbound Plug

STARTVIEW -> Inbound Plug

Plug Name : IN1

Description : From Result View

Event Handler .(Method tab )


15/301515

The First Application with Web DynproABAP 13. Outbound Plug

STARTVIEW -> Outbound Plug

Plug Name : OUT1

Description : To Result View


16/301616

The First Application with Web DynproABAP 14. Action

STARTVIEW -> Layout -> Button

Property -> onAction ->

Action : GotoOut1

Description : GOACTION

Outbound Plug : OUT1


17/30

1717

The First Application with Web DynproABAP 15. BUTTON Property

Action tab action(GOTOOUT1) Method tabMethod ONACTIONGOTOOUT1 .


18/30

1818

The First Application with Web DynproABAP 16. RESULT View

STARTVIEW RESULT VIEW . UI Element .

TEXTVIEW( Type TextView)

BUTTON2( Type Button)


19/30

1919

The First Application with Web DynproABAP 17. Plug

InBound Plug : IN2(From StartView) OutBound Plug : Out2(To StartView)


20/30

2020

The First Application with Web DynproABAP 18. Context

RESULT view -> Context Context ComponentController Node1 Conext RESULTVIEW context

drag

Property Mapping Path


21/30

2121

The First Application with Web DynproABAP 19. Button2 Property

Text : Back OnAction -> Create

Action -> GotoOut2

Descripton : GotoOut2

OutboundPlug : OUT2


22/30

2222

The First Application with Web DynproABAP 20. TextView Property

TextView . Text -> Binding

Context ResultView -> MYNAME


23/30

2323

The First Application with Web DynproABAP 21. Embedding the View in a Window

Windows-> ZMYCOMPONENT1 Window tab -> ZMYCOMPONENT1 context menu -> Embed View

View to be Embedded : STARTVIEW(possible entry )

RESULTVIEW


24/30

2424

The First Application with Web DynproABAP 22. Embedded view in Window

View Plug .


25/30

2525

The First Application with Web DynproABAP 23. Define the Navigation

Window -> STARTVIEW -> Out1 context menu -> Create Navigation Link Dest.View : RESULTVIEW (possible entry )

Window -> RESULTVIEW -> Out2 context menu -> Create Navigation Link

Dest.View : STARTVIEW (possible entry )


26/30

2626

The First Application with Web DynproABAP 24. Window Navigation


27/30

2727

The First Application with Web DynproABAP 25. Create Web Dynpro Application

Web Dynpro Comp. context -> Create -> Web Dynopro Application Component Name : ZMYCOMPONENT1

Description : ZMYCOMPONENT1


28/30

2828

The First Application with Web DynproABAP 26. Web Dynpro Application


29/30

2929

The First Application with Web DynproABAP 27. Web Dynpro Application Active

Web Dynpro Comp. context -> Activate


30/30

The First Application with Web DynproABAP Test

Go

Documents

WebDynpro for ABAP_2