Web Dynpr o ABAP

Tutorial 1 The First Application with Web Dynpro ABAP

2008.12.19

The First Application with Web Dynpro ABAP

Flow
Start View Label Input Field (MyName) Context Button Component Controller Outbound Inbound
2

Result View View Context View Context TextView (MyName)

Button

Outbound Navigation Inbound

The First Application with Web Dynpro ABAP

1. Create Web Dynpro ABAP Component

SE80 -> Web Dynpro Comp./ Intf Component (ZMycomponent1) Description Window

The First Application with Web Dynpro ABAP

2. ComponentController Context

Component Controller -> context tab Context -> Create-> Node Node Name : Node1

The First Application with Web Dynpro ABAP

3. Attribute

NODE1 context menu -> Create -> Attribute Attribute name : MYNAME Type : String

The First Application with Web Dynpro ABAP

4. Create View

Component context menu -> Create -> View

The First Application with Web Dynpro ABAP

5. View Name

View : STARTVIEW Description : Start view Enter

The First Application with Web Dynpro ABAP

6. Layout : UI Element

Tabstrip-> Layout -> ROOTUIELEMENTCONTAINER context menu -> Insert Element Name : Label Typ : Label InputField, Button InputField ( Typ : InputField) Button (Typ : Button)

The First Application with Web Dynpro ABAP

7. Label Property

Label Property
Text : Input Your Name Label for : INPUTFIELD(possible entry , UI Element Inputfield)

The First Application with Web Dynpro ABAP

8. STARTVIEW Context

STARTVIEW -> Context context ComponetController node1 context STARTVIEW drag. mapping window Yes

Drag

10

The First Application with Web Dynpro ABAP

9. Data Mapping

Context STARTVIEW -> NODE1 Mapping Path .

11

The First Application with Web Dynpro ABAP

10. InputField Data Bounding

STARTVIEW -> INPUTFIELD Property -> Value -> Context Startview -> MYNAME

12

The First Application with Web Dynpro ABAP

11. INPUTFIELD Property

Data Binding InputField data STARTVIEW Context MYNAME Data Mapping STARTVIEW Context MYNAME Component Context MYNAME

13

The First Application with Web Dynpro ABAP

12. Inbound Plug

STARTVIEW -> Inbound Plug Plug Name : IN1 Description : From Result View Event Handler .(Method tab )

14

The First Application with Web Dynpro ABAP

13. Outbound Plug

STARTVIEW -> Outbound Plug Plug Name : OUT1 Description : To Result View

15

The First Application with Web Dynpro ABAP

14. Action

STARTVIEW -> Layout -> Button Property -> onAction -> Action : GotoOut1 Description : GOACTION Outbound Plug : OUT1

16

The First Application with Web Dynpro ABAP

15. BUTTON Property

Action tab action(GOTOOUT1) Method tab Method ONACTIONGOTOOUT1 .

17

The First Application with Web Dynpro ABAP

16. RESULT View

STARTVIEW RESULT VIEW . UI Element .
TEXTVIEW( Type TextView) BUTTON2( Type Button)

18

The First Application with Web Dynpro ABAP

17. Plug

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

19

The First Application with Web Dynpro ABAP

18. Context

RESULT view -> Context Context ComponentController Node1 Conext RESULTVIEW context drag Property Mapping Path

20

The First Application with Web Dynpro ABAP

19. Button2 Property

Text : Back OnAction -> Create Action -> GotoOut2 Descripton : GotoOut2 OutboundPlug : OUT2

21

The First Application with Web Dynpro ABAP

20. TextView Property

TextView . Text -> Binding Context ResultView -> MYNAME

22

The First Application with Web Dynpro ABAP

21. Embedding the View in a Window

Windows-> ZMYCOMPONENT1 Window tab -> ZMYCOMPONENT1 context menu -> Embed View View to be Embedded : STARTVIEW(possible entry ) RESULTVIEW

23

The First Application with Web Dynpro ABAP

22. Embedded view in Window

View Plug .

24

The First Application with Web Dynpro ABAP

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 )

25

The First Application with Web Dynpro ABAP

24. Window Navigation

26

The First Application with Web Dynpro ABAP

25. Create Web Dynpro Application

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

27

The First Application with Web Dynpro ABAP

26. Web Dynpro Application

28

The First Application with Web Dynpro ABAP

27. Web Dynpro Application Active

Web Dynpro Comp. context -> Activate

29

The First Application with Web Dynpro ABAP

Test

Go

30