Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
SAP Inside Track 2010 - Thomas Jung Intro to WDA
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
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
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
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 ).
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
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
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
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
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
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
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
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
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
105. Feedback Please complete your session evaluation. Be courteous — deposit your trash, and do not take the handouts for the following session. Thank You !
Notas do Editor
Simple Demo. Just navigate into SE80 and show some of the WD Development tools – View Editor, Window Editor. Don’t create a new WD Component as we will do that in the next demo. You can use any of the exercises masters from the ZCD160 package.
Go to SE80 and in your local private create a Hello World application. Create a new Component. Place the fixed text Hello World in a TextView UI element. Don’t go into context, methods, etc. Just save, active and create a WDA Application. Then run the application.
Go to SE80 and in your local private create a new application. Create a new Component. Model SDEMO_BP as a context node. Go to WDDOINIT and read all data from SDEMO_BP and fill it into the Context Node. Place a table on the view and bind it to this context node. Save, active and create a WDA Application. Then run the application.
To keep performance high on the ABAP systems this year, I didn’t request a NetWeaver Portal. Therefore just play the demo that is recorded for the Portal Integration.
Fix last tab
Launch the NWBC application from the desktop and connect to M31. There is a role setup. Go to the ABAP Development role and the CD160 role and show how you can navigate from WDA to SAPGUI for Windows. Go to the Welcome Role and external content – like the RSS, Weather, OBN for Sales Orders, and Office Integration.
Web Dynpro Component ZWD_00_BPARTNER_SO_SHOP and ZWD_00_BPARTNER_ISL