SAP Inside Track St. Louis 2010 Intro to WDA by Thomas Jung

1. SAP Inside Track St. LouisDeveloping User Interfaces with Web Dynpro for ABAP Subrah Kappagantual, Thomas Jung, SAP Technology Solution Management

2. Disclaimer This presentation outlines our general product direction and should not be relied on in making a purchase decision. This presentation is not subject to your license agreement or any other agreement with SAP. SAP has no obligation to pursue any course of business outlined in this presentation or to develop or release any functionality mentioned in this presentation. This presentation and SAP's strategy and possible future developments are subject to change and may be changed by SAP at any time for any reason without notice. This document is provided without a warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement. SAP assumes no responsibility for errors or omissions in this document, except if such damages were caused by SAP intentionally or grossly negligent.

3. Agenda Web Dynpro Motivation Web Dynpro ABAP Programming Model 2.1. Views and UI Elements 2.2. Controllers and Context 2.3. Component Usage and Navigation Web Dynpro Integration Capabilities 3.1. Integration into SAP NetWeaver Portal 3.2. Adobe Interactive Forms 3.3. Adobe Flash Islands Summary

4. Objectives of Web Dynpro Model-based UI development Enforce clear separation between UI logic and business logic Little coding, lots of design Declarative UI development Future Proof UI Declaration Multiple Browser Types, AJAX, Islands, HTML5 Client technology independent UI definition Central implementation of user interface standards Accessibility support Adobe Forms integration Centrally provided UI elements Internationalization support Supports major platforms Java (as of SAP NetWeaver '04), ABAP (as of SAP NetWeaver 7.0)

5. Smart Client Web Browser Motivation Web Dynpro other? Web Dynpro UI definition independent of client technology As much abstract declaration as possible Different rendering engines for different (future) UI technologies without adapting application coding ?????? http://.....XBCML, delta http://.....HTML, JS Rendering Engine Rendering Engine Rendering Engine Meta Data <xml> <wd:xxx> </xml> Web Dynpro

6. Application Scenarios With Web Dynpro SAP NetWeaver Portal NetWeaver Business Client Web Dynpro iView Web Dynpro iView J2EE Web Dynpro Runtime ABAP Web DynproRuntime Web Dynpro App Web DynproApp Web DynproApp Web Dynpro App ABAPWorkbench SAP NetWeaver DeveloperStudio RFC, WS ABAP Server RMI J2EE Server BusinessData BusinessData BusinessAPI (BAPI, Web Services) EJB (e.a.)

7. Web Dynpro Development in ABAP Development completely integrated into ABAP Workbench Graphical View Layout design Declarative UI development ABAP editor with forward navigation ABAP dictionary data types directly available Simple remote debugging Functionality and services ofthe ABAP environment directly usable ABAP lifecycle management Transport Translation Enhancements

8. Demo DEMO DEMO – WD in Workbench

9. Agenda Web Dynpro Motivation Web Dynpro ABAP Programming Model 2.1. Views and UI Elements 2.2. Controllers and Context 2.3. Component Usage and Navigation Web Dynpro Integration Capabilities 3.1. Integration into SAP NetWeaver Portal 3.2. Adobe Interactive Forms 3.3. Adobe Flash Islands Summary

10. Meta-Model Declarations and Custom Coding Run able App Web Dynpro Tools GeneratedCode Meta-data Compiler Generator CustomCode Meta-model Declarations Guarantees common app. design Good for graphical tool support Screen Layout and Nesting Navigation and Error Handling Data Flow Componentization ... Custom Coding Guarantees universality Good for data-driven, dynamic apps Implementation of business rules Dynamic screen modifications Access to services (files etc.) Portal eventing ...

11. Original MVC design for decoupling presentation and application logic Generates the application data without caring how it will be displayed. Model Binds the user and business interaction layers together. All intermediate processing is performed here. Business Interaction Layer User Interaction Layer Request Controller Response Visualizes the application data without caring how it was generated. Binding Layer Model View Controller (MVC) View

13. Views define the layout

14. Model hold and provide the business logic Component Interface Interface view Interface Controller Components M Component Controller Window Window Controller M M Usage declarations Business Logic (Models) Contains Model 1 Usage declarations Custom Controller View Layout View Controller M Model 2 M W e b D y n p r o C o m p o n e n t

15. Web Dynpro Components Web Dynpro Component contains Windows Views UI elements Layout Controllers Context Data Eventing Methods Attributes Component Interface Interface Contr. Interface View View Component Component Controller Window View Controller View View Controller

16. Agenda Web Dynpro Motivation Web Dynpro ABAP Programming Model 2.1. Views and UI Elements 2.2. Controllers and Context 2.3. Component Usage and Navigation Web Dynpro Integration Capabilities 3.1. Integration into SAP NetWeaver Portal 3.2. Adobe Interactive Forms 3.3. Adobe Flash Islands Summary

17. Window View Is embedded into window Defines the visible layout via predefined UI elements Does not contain any HTML or scripting UI elements Are the smallest UI building blocks (button, input field,…) Available as provided UI element libraries Have properties which steer their behavior Can be nested with Container UI elements Are positioned in hierarchical structure View Views and UI Elements

18. Defining View Layout UI element tree of view UI element libraries Properties of selected UI element View layout

19. Various categories of UI elements are supported Each UI element object is represented as an abstract class that is independentof any client presentation layer. UI Element Categories

20. Demo DEMO Hello World

21. Agenda Web Dynpro Motivation Web Dynpro ABAP Programming Model 2.1. Views and UI Elements 2.2. Controllers and Context 2.3. Component Usage and Navigation Web Dynpro Integration Capabilities 3.1. Integration into SAP NetWeaver Portal 3.2. Adobe Interactive Forms 3.3. Adobe Flash Islands Summary

22. Controller and Context Context Root Node Node N1 Attribute CARR Attribute DEP_AIRP Node N2 View Controller Controller Contains the logic of the UI layer Implements event handlers Reads and writes context node content Each view has its own view controller Context Hierarchy of nodes and attributes Contains the data of the UI Nodes and attributes can be bound to UI elements Framework takes care of updating the values LH Paris method WD_DO_INIT node = wd_context->get_child_node(‘N1’). node->set_attribute( name = ‘DEP_AIRP’ value = ‘Paris’). Method onAction_GOTO_NEXT node = wd_context->get_child_node(‘N1’). node->get_attribute( name = ‘CARR’ value = carrier ).

23. View Controller and View Context Context Node BP PART_NAME PARTNER_ID Node N2 Window View Controller View T* T* Controller contains methods and events for user interactions Method onAction_GOTO_NEXT node = wd_context->get_child_node(‘BP’). node->get_attribute( name = ‘PART_NAME’ value = part_name ).

24. Context Node Elements Node 1 (Cardinality 0...n) Node BP PARTNER_ID PARTNER_ID 013 012 011 PARTNER_NAME PARTNER_NAME Laur.. Asia TECU. COUNTRY COUNTRY FR JP DE View Controller View Context Node 2 Elements of a context node methodWD_DO_INIT* BusPartners: internal table ... node->bind_elements( partners ).

25. Demo DEMO Simple View and Table

26. Component Controller and Context Mapping Component Controller Context Root Node Node 1 Node 2 Node 3 Component Controller Component Controller Controller which is the backbone of the component Has its own Context Contains the logic for interaction with the model (ABAP class, function modules, BAPIs, Web Services) Context Mapping Nodes of Component Controller context can be mapped to nodes of other contexts Framework takes care of data transport (references) Model Class, ABAP Objects API, BAPIs, Other WD Compo-nent, … Method show_flights flights = BO->get… node1 = wd_context->… node1->bind_elements( flights ).

27. Component Controller Component Controller Context Context Node 1 Node 2 Node 3 Mapping of context data Component Component Controller Window View Controller View Context Node 1 Model Class, ABAP Objects API, BAPIs, Other WD Component, … Method show_bpartners BPs = BO->get… node1 = wd_context->… node1->bind_elements( BPs ). Component controller connects to business logic and gets/sets data

28. Demo Exercise #1

30. How there are arranged within each other is declared in the windowMAIN_VIEW MAIN_VIEW Context ViewCont. SO_VIEW ViewContainer View Controller SORDER_VIEW Label Context Node 1 Node 2

31. Root Node Node 1 Attribut1 Attribut2 View Controller Node 2 View Label Context Press Component Component Controller Window View Controller Node BP Interaction Between Views and Controllers Component Controller Context Context Node BP TEC Node SO Node 3 Mapping of context data View Context 011 011 TEC OnLeadSelection wd_comp_cont-> get_sorders() 5..3 View Controller View Method get_sorders SOs = BO->get… node = wd_cont->… node->bind_table( SOs ). Label Context Node SO 5..3

32. Context Node at Design Time 503 ITelo 052007 Declaration of Context Nodes Create metadata which defines the structure of the context Two dimensional hierarchy like files and folders But each node can be a collection Min and max number of elements in a node is steered by Cardinality (0..1) (1..1) (0..n) (1..n) Context SALES_ORDERS (0...n) SO_ID SELLER_COMP CREATE_DATE ITEMS (0…n) ITEM_ID PRODUCT_NAME

33. Complex Data in Context Node 502 501 SR 503 403.0 123.03 Swiss 99.99 051223 051003 www 052709 View Controller Context at runtime Nodes with cardinality (0..n) can contain several elements at runtime Each element can have its own set of sub nodes at runtime which are again collections of elements Example: Sales Orders with Items Items of selected sales order should be displayed in second table onthe same view Each sales order has its own set of items Context SALES_ORDERS (0...n) S_ORDER_ID AMOUNT DATE ITEMS ITEM_ID PRODUCT_NAME

34. Supply Function of Context Node Supply Function Is triggered if lead selection of parent element changes Is implemented as method of controller Has access to parent element Singleton property of context node steers if supply function is called Every time lead selection changes Only at first time for each element

35. Demo Exercise #2 & 3

36. Agenda Web Dynpro Motivation Web Dynpro ABAP Programming Model 2.1. Views and UI Elements 2.2. Controllers and Context 2.3. Component Usage and Navigation Web Dynpro Integration Capabilities 3.1. Integration into SAP NetWeaver Portal 3.2. Adobe Interactive Forms 3.3. Adobe Flash Islands Summary

37. Web Dynpro Component Usage CompContr. Method A Event E Context Context Reuse of Web Dynpro Components Real business applications usually consist of several WD components Reusable components for dedicated often used tasks in different applications Customer address display Order details … Generic components as part of the Web Dynpro environment ALV Select Options Message Viewer Comp B Interface Comp A Method B Event E

39. View container provides place for sub components

40. Several Component Usages to different sub components with the same Interface are defined

41. Which component is used is decided at runtime

42. Several main components need the same functionality

43. Functionality is developed once in reusable component

44. Main components declare Component Usage of sub component

46. Methods, events and context nodes can be declared as part of the Interface

47. Access via Interface Controller with

48. Contextnodemapping

49. Method call, Events raised

50. Embedding of Interface ViewSub Component C Interface Controller Method C Event E

51. Component Interface Controller Attribut1 Interface Contr.Context Window Root Node Root Node Attribut2 Component Contr.Context Node 1 Node 1 Attribut1 Root Node View Controller View Attribut2 Node 1 Root Node View Controller View Controller Node 2 Node 2 Context Node 1 View View Concepts: Component Interface Root Node Node 1 Method SET_AIRP. Node 2 Label Label Context Context Node 3 Press Press Interface View Label View Controller Label View Contexth Label Root Node Label Node 1 Node 2 ComponentController method SET_AIRP method SET_AIRP Method SORT_FLIGHT

54. Demo Exercise #4

55. Agenda Web Dynpro Motivation Web Dynpro ABAP Programming Model 2.1. Views and UI Elements 2.2. Controllers and Context 2.3. Component Usage and Navigation Web Dynpro Integration Capabilities 3.1. Integration into SAP NetWeaver Portal 3.2. Adobe Interactive Forms 3.3. Adobe Flash Islands Summary

56. Agenda Web Dynpro Motivation Web Dynpro ABAP Programming Model 2.1. Views and UI Elements 2.2. Controllers and Context 2.3. Component Usage and Navigation Web Dynpro Integration Capabilities 3.1. Integration into SAP NetWeaver Portal 3.2. Adobe Interactive Forms 3.3. Adobe Flash Islands Summary

57. Web Dynpro and SAP NetWeaver Portal Portal Integration Generic iViews for displaying Web Dynpro Applications Easy integration via Web DynproiView Wizard Central User management Portal eventing support Object Based Navigation Unified brandingbyportal themes

58. Portal Integration SAP Portal AS ABAP application system is declared in portal Server, port,… User mapping Create iView for WD ABAP application iView points to logical backend server, name space and WD application iView is assigned to portal role Portal iView Application Server Java WD Application WD Component Window View Application Server ABAP

59. Demo DEMO Portal Integration

61. SAP GUI

62. Web Dynpro

63. Any Web-based content

64. Direct access to ABAP back-end (PFCG) role repository

65. Utilizes the Portal services infrastructure for role- and navigation-based access to SAP systems

66. Consistent navigation capabilities

67. Improved User Interface and interaction scheme

68. Simplified browsing: tabbed navigation model SAP NWBC 1.0: SAP Business All-in-One and SAP Business Suite SAP NWBC 2.0: SAP Business ByDesign SAP NWBC 1.0 is available for All-in-One and Business Suite with SAP ERP 6.0 EhP2. SAP NWBC 2.0 is available as part of the last ByDesign Feature Pack

70. SAP harmonized and intuitive Signature Design

71. Unified environment for legacy and new SAP applications through desktop maximization of the Smart Client Renderer

72. High fidelity UI with increased graphical capabilities – Microsoft C# WPF-based client

73. Multi-window-based navigation model

74. Leveraged desktop client capabilitiesNWBC for HTML SAP NWBC 3.0 is expected to be available with the next SAP NetWeaver Release (testing release will soon be optional)

75. Introduction - SAP NWBC 3.0 Connections – SAP NWBC 3.0 & Portal The SAP NetWeaver Business Client enables direct connectivity to the Portal back-end system and PCD role repository centrally holding all the portal application, role and navigation content and logic. This ensures that customers’ investments in the portal infrastructure are preserved and can be displayed in the SAP NetWeaver UI client of choice, be it the SAP NetWeaver Business Client or SAP Portal Web Client. Portal Standalone SAP GUI with SAP NetWeaver Business Client

76. Demo DEMO NetWeaver Business Client

77. Agenda Web Dynpro Motivation Web Dynpro ABAP Programming Model 2.1. Views and UI Elements 2.2. Controllers and Context 2.3. Component Usage and Navigation Web Dynpro Integration Capabilities 3.1. Integration into SAP NetWeaver Portal 3.2. Adobe Interactive Forms 3.3. Adobe Flash Islands Summary

80. Distribute via email / Portal

81. Digital signature (future)

83. Prefilled application values

84. Prefilled list boxes, help values, …

85. Automatic data extraction and integration in applicationWhat Does it Look Like ?

86. Adobe Interactive Forms in WD ABAP Basic Forms Functionality Define Form in system Layout (Adobe Designer) Data structure Form is generated Function for generating PDF API for setting/getting data Integration into Web Dynpro Place Form in InteractiveForm UI container element Map context data to forms API Form is displayed at runtime Printing Interactive Form

87. Agenda Web Dynpro Motivation Web Dynpro ABAP Programming Model 2.1. Views and UI Elements 2.2. Controllers and Context 2.3. Component Usage and Navigation Web Dynpro Integration Capabilities 3.1. Integration into SAP NetWeaver Portal 3.2. Adobe Interactive Forms 3.3. Adobe Flash Islands Summary

88. Adobe Flash Islands in WD ABAP Adobe Flash Applications Rich Internet Applications for complex visualization tasks Developed in Adobe Flex Builder Running in Adobe Flash Player Used if Web Dynpro UI elements are not sufficient for required user experience Integration into Web Dynpro Running as WD Island Contained in MIME repository Communication to WD component via SAP Flash Library Context Nodes Events

89. Demo DEMO Flash Island

90. Agenda Web Dynpro Motivation Web Dynpro ABAP Programming Model 2.1. Views and UI Elements 2.2. Controllers and Context 2.3. Component Usage and Navigation Web Dynpro Integration Capabilities 3.1. Integration into SAP NetWeaver Portal 3.2. Adobe Interactive Forms 3.3. Adobe Flash Islands Summary

91. Demo DEMO Exercise Examples – With a Visual Redesign

93. Declarative, MVC based UI programming model

94. UI definition independent of rendering technology

95. Web Dynpro for ABAP available with SAP NetWeaver 7.0

96. Programming model similar to Web Dynpro for Java

98. Web Dynpro ABAP: http://www.sdn.sap.com/irj/sdn/nw-wdabap

99. NWBC: http://www.sdn.sap.com/irj/sdn/nw-businessclient

100. Islands: http://www.sdn.sap.com/irj/sdn/adobe-flash-islands

102. NET311: 3-day classroom training on advanced Web Dynpro ABAP

103. NET312: 3-day classroom training on UI elements

105. Feedback Please complete your session evaluation. Be courteous — deposit your trash, and do not take the handouts for the following session. Thank You !