Product Manager SAP NetWeaver US PM - SAP Labs

Transcription

1 Web Dynpro for ABAP

2 Your Instructor Venky Varadadesigan Product Manager SAP NetWeaver US PM - SAP Labs Venkata.varadadesigan@sap.com SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 2

3 Learning Objectives As a result of this workshop, you will: Know why Web Dynpro is SAP s preferred UI model Understand the Web Dynpro programming model Be able to create basic Web Dynpro applications in ABAP SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 3

4 Motivation of Web Dynpro The Web Dynpro Programming Model Views and UI elements Controllers and Context Navigation and Plugs Advanced Topics Summary

5 Positioning: IT Practices and IT Scenarios IT practices slice SAP NetWeaver to directly address key issues... and help enterprises find the right starting point SAP NetWeaver PEOPLE INTEGRATION Multi channel access Enterprise Service Architecture Portal Collaboration INFORMATION INTEGRATION Life Cycle Mgmt Knowledge Mgmt Bus. Intelligence Master Data Mgmt Consolidation Application governance and Security Unified Life-Cycle Management Custom Development End-to-End Process Integration Business Event Management Business Information Management Data Unification User Productivity Enablement PROCESS INTEGRATION Business Process Mgmt Integration Broker APPLICATION PLATFORM Composite Application Framework ABAP J2EE DB and OS Abstraction Different capabilities used jointly in each slice SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 5

6 Positioning: SAP NetWeaver Technology Map IT Practices IT Scenarios User Productivity Enablement Running an Enterprise Portal Enabling User Collboration Business Task Management Mobilizing Business Processes Enterprise Knowledge Management Data Unification Master-Data Harmonization Master-Data Consolidation Central Master-Data Management Enterprise Data Warehousing Business Information Management Enterprise Reporting, Query, and Analysis Business Planning and Analytical Services Enterprise Data Warehousing Business Event Management Business Event Resolution Business Task Management End-to-End Process Integration Enabling Applicationto-Application Processes Enabling Business-to- Business Processes Business Process Management Enabling Platform Interoperability Business Task Management Custom Development Developing, Configuring, and Adapting Applications Enabling Platform Interoperability Unified Life-Cycle Management Software Life-Cycle Management SAP NetWeaver Operations Application Governance & Security Authentication and Single Sign-On Integrated User and Access Management Consolidation Enabling Platform Interoperability SAP NetWeaver Operations Master-Data Consolidation Enterprise Knowledge Management Enterprise Service Architecture Design & Deployment Enabling Enterprise Services SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 6

7 SAP UI Framework Roadmap: From SAP GUI to Web Dynpro Web Dynpro ABAP Web Dynpro Java HTMLB for BSP JSP & HTMLB (tag library) Java Business Server Pages (BSP) ITS (IACs, Flow Logic) SAP GUI ITS Technology (SAP GUI for HTML) ITS UIs (Web GUI, IACs) NW 2004 NW 2004s SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 7

8 Portal Content Design Tools: Offering Content Complexity Web Applications Transactional Business Applications Interactive Applications SAP NetWeaver Developer Studio (Java + PDK Perspective) SAP ABAP Development Workbench (Business Server Pages) PDK for.net SAP NetWeaver Developer Studio (Web Dynpro for Java Perspective) SAP ABAP Development Workbench (Web Dynpro for ABAP) SAP NetWeaver Visual Composer Display Applications Portal Content Studio Content Admin Business Expert Business Application Developer J2EE/ABAP/.Net Developer Creating Portal Content Developing Portal Content SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 8

9 What is Web Dynpro? A Programming Model for User Interfaces Defines a standard structure for user interface applications Derived from the MVC ( model-view-controller ) design pattern A Set of Tools for User Interface Design Focus on graphical modelling Code is generated from meta-model declarations Integrated in SAP NetWeaver Developer Studio and the ABAP Workbench A Runtime Environment for Applications Framework running on SAP Web AS server offers common services A Technology for Software Modularization Components help structure applications and support pattern-based UIs SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 9

10 Web Dynpro Main Benefits Deliver an Enterprise Quality Web Development Environment minimize coding, maximize design separate layout and logic support arbitrary backend systems support reuse of components configuration of UI patterns support Web services and data-binding Achieve Independence run on multiple platforms Improve User Experience through a "High Fidelity Web UI" browser based, zero footprint screen updates w/o page reloads client-side dynamics performance through caching 508 accessibility support Web Dynpro Tools Web Dynpro Metadata Web Dynpro Runtime JAVA ABAP SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 10

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

12 Motivation of Web Dynpro The Web Dynpro Programming Model Views and UI elements Controllers and Context Navigation and Plugs Advanced Topics Summary

13 Application Scenarios With Web Dynpro SAP Enterprise Portal Web Dynpro iview Web Dynpro iview Web Dynpro Web Dynpro App App J2EE Web Dynpro Runtime ABAP Web Dynpro Runtime Web Dynpro Web Dynpro App App SAP NetWeaver Developer Studio RMI RFC, WS ABAP Workbench J2EE Server EJB (e.a.) Business Data ABAP Server Business API (BAPI, Web Services) Backend Application Business Data SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 13

14 Demo Demo Hello World SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 14

15 Model View Controller (MVC) Original MVC design for decoupling presentation and application logic Binds the user and business interaction layers together. All intermediate processing is performed here. Model Business Interaction Layer Generates the application data without caring how it will be displayed. Request Response Controller Binding Layer User Interaction Layer Visualizes the application data without caring how it was generated. View SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 15

16 Web Dynpro Components Web Dynpro Component contains Windows Views UI elements Layout Controllers Context Data Eventing Methods Attributes Component Interface Interface Contr. Interface View Component Window Label View View View Controller View Controller Component Controller SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 16

17 Motivation of Web Dynpro The Web Dynpro Programming Model Views and UI elements Controllers and Context Navigation and Plugs Advanced Topics Summary

18 View, Windows And UI Elements View Is embedded into window Defines the visible layout via predefined UI elements Doesn t 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 a hierarchical structure Window View SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 18

19 Defining View Layout UI element libraries UI element tree of view Properties of selected UI element View layout SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 19

20 UI Element Categories Various categories of UI elements are supported e.g. Button, InputField, Label e.g. DateNavigator, Table, Tree Gantt, Network InteractiveForm BusinessGraphics, GeoMap BI Application Frame OfficeControl e.g. TransparentContainer, Tray MessageArea Each UI element object is represented as an abstract class that is independent of any client presentation layer. SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 20

21 Demo Demo - Views & UI elements SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 21

22 Motivation of Web Dynpro The Web Dynpro Programming Model Views and UI elements Controllers and Context Navigation and Plugs Advanced Topics Summary

23 Controller And Context 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 cares about updating the values View Controller Context Root Node Node N1 LH Paris Attribute CARR Attribute DEP_AIRP Node N2 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 ). SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 23

24 View Controller And View Context Window View View Controller Context Root Node Node N1 LH Attribute CARR Paris Attribute DEP_AIRP Controller contains methods......and events for user interactions Node N2 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 ). SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 24

25 Component Controller And Context Mapping 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 cares about data transport (references) Component Controller Component Controller Context Root Node Node 1 Node 2 Node 3 Method show_flights flights = BO->get node1 = wd_context-> node1->bind_elements( flights ). Model Class, ABAP Objects API, BAPIs, Other WD Component, SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 25

26 Component Controller Component Window View Mapping of context data View Controller Context Root Node Node 1 Component Controller Component Controller Context Root Node Node 1 Node 2 Node 3 Component controller connects to business logic and gets/sets data Method show_flights flights = BO->get node1 = wd_context-> node1->bind_elements( flights ). Model Class, ABAP Objects API, BAPIs, Other WD Component, SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 26

27 Demo Demo Controller & Context SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 27

28 Motivation of Web Dynpro The Web Dynpro Programming Model Views and UI elements Controllers and Context Navigation and Plugs Advanced Topics Summary

29 Navigation Between Views Window Customer Search Out In Customer List Inbound plug Outbound plug Navigation link To define the navigation between two views, you need to create exit and entry points for each view using outbound and inbound plugs. Only then you can specify the navigation flow using navigation links SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 29

30 Plugs And Navigation Window Outbound Plug View View Controller OUT SEARCH_FLIGHTS View Create Action View Controller IN Inbound Plug SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 30

31 Demo Demo Navigation between Views SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 31

32 Motivation of Web Dynpro The Web Dynpro Programming Model Views and UI elements Controllers and Context Navigation and Plugs Advanced Topics Summary

33 Advanced Topics Component Usage & ALV Dynamic Web Dynpro Programming Adobe Forms integration Portal Integration SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 33

34 Web Dynpro Component Usage 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 Comp A Comp Contr. Context Inter face Context Comp B Message Viewer Method A Method B Event E Event E SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 34

35 ALV in SAP NetWeaver 2004s ALV in Web Dynpro Provide a more advanced display component compared to TableView Offer same functionality as common ALV in ABAP ALV realized as WD Component not as UI control More complex interface Included via Component Usage Data binding by reverse context mapping ALV Pattern Component Web Dynpro ALV Component Web Dynpro UI Controls SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 35

36 Dynamic Web Dynpro Programming (cont.) Layout Manipulation Include/Delete UI elements Bind UI elements to context Create actions in WD_DO_MODIFY_VIEW Context Manipulation Create, fill, bind nodes Add attributes Dynamic Navigation Generic call of Outbound Plug Define navigation between plugs Dynamic Component Usage Create Component Usage Event registration SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 36

37 Adobe Forms Integration Business Scenarios Online Interactive Form Scenario SAP system access needed Full integration into Web Dynpro framework Context-sensitive value help, online checks Offline Interactive Form Scenario No SAP system access needed Static value help, static checking, simple arithmetic calculations Self-contained PDF (XML data+layout) Form Processing Scenario Documents get printed, ed, archived or faxed Browser with Adobe Reader plug-in Print Adobe Reader offline Archive Down- / Upload / HTTP SAP NW Application Server SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 37

38 Adobe 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 SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 38

39 Web Dynpro and Enterprise Portal Portal Integration Easy integration via Web Dynpro iview Wizard Central User management Portal eventing support Object Based Navigation Unified branding by portal themes SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 39

40 Portal Integration SAP NW 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 SAP Portal Portal iview NW App Server Java WD Application WD Component Window View NW App Server ABAP SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 40

41 Portal Eventing Flexible Interaction Allows direct interaction between independent iviews Event consumer subscribes to event Event raiser fires event Loose Coupling EP Client Manager based (JavaScript Library) iviews can run on different systems iviews can be implemented via different technologies (WD ABAP, WD Java, BSPs, Portal Components, JSPs, ) SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 41 Event raised in first iview Triggers action in second application

42 Motivation of Web Dynpro The Web Dynpro Programming Model Views and UI elements Controllers and Context Navigation and Plugs Advanced Topics Summary

43 Summary Web Dynpro is SAP s UI strategy Declarative, MVC based UI programming model UI definition independent of rendering technology Web Dynpro for ABAP available with SAP NetWeaver 2004s Programming model similar to Web Dynpro for Java Completely Integrated into the SAP NetWeaver Application Server ABAP SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 43

44 Further Information Public Web: Help Portal: -> Documentation -> SAP NetWeaver -> SAP NW04s NetWeaver Developer s Guide: SAP Developer NetWeaver (SDN) SAP NW App Server ABAP WD-ABAP Knowledge Center SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 44

45 Questions? Q&A SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 45

46 Next session Stay Tuned April 6th, 2006 (Thursday) Web Services in ABAP Speaker: Peter McNulty SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 46

47 Copyright 2006 SAP AG. All Rights Reserved No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. Microsoft, Windows, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation. IBM, DB2, DB2 Universal Database, OS/2, Parallel Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390, OS/400, iseries, pseries, xseries, zseries, z/os, AFP, Intelligent Miner, WebSphere, Netfinity, Tivoli, and Informix are trademarks or registered trademarks of IBM Corporation. Oracle is a registered trademark of Oracle Corporation. UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group. Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems, Inc. HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C, World Wide Web Consortium, Massachusetts Institute of Technology. Java is a registered trademark of Sun Microsystems, Inc. JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape. MaxDB is a trademark of MySQL AB, Sweden. SAP, R/3, mysap, mysap.com, xapps, xapp, SAP NetWeaver, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and in several other countries all over the world. All other product and service names mentioned are the trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary. The information in this document is proprietary to SAP. No part of this document may be reproduced, copied, or transmitted in any form or for any purpose without the express prior written permission of SAP AG. This document is a preliminary version and not subject to your license agreement or any other agreement with SAP. This document contains only intended strategies, developments, and functionalities of the SAP product and is not intended to be binding upon SAP to any particular course of business, product strategy, and/or development. Please note that this document is subject to change and may be changed by SAP at any time without notice. SAP assumes no responsibility for errors or omissions in this document. SAP does not warrant the accuracy or completeness of the information, text, graphics, links, or other items contained within this material. 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 shall have no liability for damages of any kind including without limitation direct, special, indirect, or consequential damages that may result from the use of these materials. This limitation shall not apply in cases of intent or gross negligence. The statutory liability for personal injury and defective products is not affected. SAP has no control over the information that you may access through the use of hot links contained in these materials and does not endorse your use of third-party Web pages nor provide any warranty whatsoever relating to third-party Web pages. SAP AG 2006, Venky Varadadesigan / Web Dynpro for ABAP / 47