1. WebDynpro for ABAP
Short introduction

2. Definition
Web Dynpro for ABAP (WD4A, WDA) is the SAP standard UI technology for developing Web applications in the ABAP environment.
The concept of Web Dynpro ABAP is identical with Web Dynpro Java and offers more or less the same functions. 

3. Advantages Web Dynpro is based on a metamodel concept
The use of declarative and graphical tools significantly reduces the implementation effort
Web Dynpro supports a structured design process
Strict separation between layout and business data (MVC)
Reuse and better maintainability by using components
The layout and navigation is easily changed using the Web Dynpro tools
Automatic data transport using data binding
Automatic input check
User interface accessibility is supported
Full integration in the reliable ABAP development environment

4. Web Dynpro development environment

5. Model View Controller
Clear separation of business logic and display logic
Uniform metamodel for all types of user interfaces
Execution on a number of client platforms
Extensive platform independence of interfaces

6. Web Dynpro Component
A Web Dynpro component is a reusable entity. It summarizes all elements that are required as part of this programming unit for an executable Web Dynpro application.
The Web Dynpro component concept offers a number of advantages:
Structuring the programming
Creation of easily manageable application blocks
Reusability of whole components
Decoupling of software projects in both time and space
The Web Dynpro component contains any number of windows and views and their corresponding controllers.
Additional Web Dynpro components can also be referenced.

7. Web Dynpro Component

8. Component usage

9. View
A view describes the layout and behavior of a rectangular area of a user interface.

10. Plugs and Navigation Links
Navigation between different views is enabled by plugs. These can be divided into inbound and outbound plugs. 
To navigate from one view to another, each outbound plug from the first view must be linked with an inbound plug of the second view with the help of a navigation link.

11. Web Dynpro Window
A window is used to combine several Views

12. Controller
Controllers are the active parts of a Web Dynpro application.
They determine how the user can interact with the Web Dynpro application.
The data that a controller can access is defined in the corresponding context.
Different instances of controllers and contexts exist within a Web Dynpro application.
Local controllers - View and Window controllers - control the behavior of an individual view or window
Global controllers that offer more general services for all the views of a component.

13. Controllers

14. View Controller
Each view has exactly one View Controller, which processes the actions performed by the user in the view.
A view also has exactly one view context, which contains the data required for the view.

15. Global Controllers Component controller Custom cotrollers
Interface controller – part of component controller visible outside the component

16. Interface Controller of a Component
Programming part of component visible outside the component 
Methods
Events
Context nodes

17. Interface View
Each window has a uniquely assigned interface view. This interface view represents the outward view of the window.
The interface view is linked with a Web Dynpro application so that the window can be called using a URL.

18. Interface View
The interface view enables windows to be reused by multiple components

19. Web Dynpro component structure

20. Context Context – place in controller to store the data for display
The data is managed in a hierarchical structure.
Each context has a root node, underneath which the individual data fields (attributes) are stored in a tree structure.
The tree structure is created according to the structure of your application.

21. Context NODE - a data structure within the context.
ATTRIBUTE - a single data field under a node
ELEMENT - an instance of a node at runtime (there may be many, e.g. for a table of data)

22. Context - cardinality Cardinality Meaning 1:1
The node contains only one element instance, which is instantiated automatically.
0:1
The node contains only one element instance, which must not be instantiated.
1:n
The node can contain multiple element instances, of which at least one must always be instantiated (and is instantiated automatically).
0:n
The node can contain multiple element instances, of which none have to be instantiated.

23. Things to note about the context
Any data that you want to see in a view, must be in the context of the view controller
You can use context attributes to control UI elements dynamically
You should not treat the context as a repository for all of your data
The context could be compared to a screen structure in dynpro applications

24. Data Binding and Mapping
Defining Mapping Between Two Contexts

25. Data Binding and Mapping
Binding a UI Element to a Context Attribute

26. Web Dynpro Application
An independent program unit connecting a URL that can be accessed by the user with a window in the Web Dynpro component.
Holds parameters and configuration
Plays the role of transaction for classic program.

27. Example application First scenario:
Create an component to display the data of standard document, e.g. Purchase Order

28. First step
SE80

29. Rename window
Use convention W_ and V_

30. Assistance class
An instance of the class is created automatically for you at runtime. You can then access that instance from your methods using attribute WD_ASSIST, which is provided automatically.
With an instance class in place, you are able to use text symbols in your webdynpro, which are stored in the text pool of the assistance class.

31. Service call
You can use a wizard to create service calls to web services, function modules and class methods.

32. Context wizard A) B)

33. View - Form

34. Form

35. Control UI properties

36. Method to get PO data

37. Method to get PO data
Make the method a part of interface in order to reuse

38. Read/Set Context

39. Window method

40. WebDynpro Application

41. Application parameter

42. Test
URL

43. Example application Second scenario:
Reuse component in another component

44. Component use

45. Steps
Context
Layout
Action
Outbound plug

46. Event handler method: read context and start navigation
Result view – placeholder for view embedding: VIEW_CONTAINER_UIELEMENT

47. Define controller usage in view Result
Implement method for inbound plug

48. Embed Result view in window
Create navigation link
Embed view from component use in Result view

49. Create application and test

50. Debugging
You can dubugg by setting externall break-point

51. Debugging
There is special tool in debugger for WebDynpro

52. Tips
Help SAP
WDYID - Transaction to run WebDynpro application in SAPGui
SWDP_DEMO and SWDP_DEMO_TUTORIALS packages containing number of example applications
LORD_MAINTAIN_COMP - An example of a full-scale, complex WebDynpro component for mantaining Sales Order