Your SlideShare is downloading. ×
0
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
SAP Inside Track 2010 - Thomas Jung Intro to WDA
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

SAP Inside Track 2010 - Thomas Jung Intro to WDA

5,350

Published on

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

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

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,350
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
335
Comments
1
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 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
  • Web Dynpro Component ZWD_00_BPARTNER_REDESIGN
  • Transcript

    • 1. SAP Inside Track St. LouisDeveloping User Interfaces with Web Dynpro for ABAP<br />Subrah Kappagantual, <br />Thomas Jung, SAP Technology Solution Management<br />
    • 2. Disclaimer<br />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.<br />
    • 3. Agenda<br />Web Dynpro Motivation<br />Web Dynpro ABAP Programming Model<br />2.1. Views and UI Elements<br />2.2. Controllers and Context<br />2.3. Component Usage and Navigation<br />Web Dynpro Integration Capabilities<br />3.1. Integration into SAP NetWeaver Portal<br />3.2. Adobe Interactive Forms<br />3.3. Adobe Flash Islands<br />Summary<br />
    • 4. Objectives of Web Dynpro<br />Model-based UI development<br />Enforce clear separation between UI logic and business logic<br />Little coding, lots of design<br />Declarative UI development<br />Future Proof UI Declaration<br />Multiple Browser Types, AJAX, Islands, HTML5<br />Client technology independent UI definition<br />Central implementation of user interface standards<br />Accessibility support<br />Adobe Forms integration<br />Centrally provided UI elements<br />Internationalization support<br />Supports major platforms<br />Java (as of SAP NetWeaver '04), ABAP (as of SAP NetWeaver 7.0)<br />
    • 5. Smart<br />Client<br />Web<br />Browser<br />Motivation Web Dynpro<br />other?<br />Web Dynpro<br />UI definition independent of client technology <br />As much abstract declaration as possible<br />Different rendering engines for different (future) UI technologies without adapting application coding<br />??????<br />http://.....XBCML, delta<br />http://.....HTML, JS<br />Rendering<br />Engine<br />Rendering<br />Engine<br />Rendering<br />Engine<br />Meta Data<br /><xml><br /><wd:xxx><br /></xml><br />Web Dynpro<br />
    • 6. Application Scenarios With Web Dynpro <br />SAP NetWeaver Portal<br />NetWeaver Business Client<br />Web Dynpro iView<br />Web Dynpro iView<br />J2EE Web Dynpro Runtime<br />ABAP Web DynproRuntime<br />Web Dynpro App<br />Web DynproApp<br />Web DynproApp<br />Web Dynpro App<br />ABAPWorkbench<br />SAP NetWeaver DeveloperStudio<br />RFC, WS<br />ABAP Server<br />RMI<br />J2EE Server<br />BusinessData<br />BusinessData<br />BusinessAPI (BAPI, Web Services)<br />EJB (e.a.)<br />
    • 7. Web Dynpro Development in ABAP<br />Development completely integrated into ABAP Workbench<br />Graphical View Layout design<br />Declarative UI development<br />ABAP editor with forward navigation<br />ABAP dictionary data types directly available<br />Simple remote debugging<br />Functionality and services ofthe ABAP environment directly usable <br />ABAP lifecycle management<br />Transport<br />Translation<br />Enhancements<br />
    • 8. Demo<br />DEMO<br />DEMO – WD in Workbench<br />
    • 9. Agenda<br />Web Dynpro Motivation<br />Web Dynpro ABAP Programming Model<br />2.1. Views and UI Elements<br />2.2. Controllers and Context<br />2.3. Component Usage and Navigation<br />Web Dynpro Integration Capabilities<br />3.1. Integration into SAP NetWeaver Portal<br />3.2. Adobe Interactive Forms<br />3.3. Adobe Flash Islands<br />Summary<br />
    • 10. Meta-Model Declarations and Custom Coding<br />Run able App<br />Web Dynpro<br />Tools<br />GeneratedCode<br />Meta-data<br />Compiler<br />Generator<br />CustomCode<br />Meta-model Declarations<br />Guarantees common app. design<br /> Good for graphical tool support<br />Screen Layout and Nesting<br />Navigation and Error Handling<br />Data Flow<br />Componentization<br />...<br />Custom Coding<br /> Guarantees universality<br /> Good for data-driven, dynamic apps<br />Implementation of business rules<br />Dynamic screen modifications<br />Access to services (files etc.)<br />Portal eventing<br />...<br />
    • 11. Original MVC design for decoupling presentation and application logic<br />Generates the application data without caring how it will be displayed.<br />Model<br />Binds the user and business interaction layers together. All intermediate processing is performed here.<br />Business Interaction Layer<br />User Interaction Layer<br />Request<br />Controller<br />Response<br />Visualizes the application data without caring how it was generated.<br />Binding Layer<br />Model View Controller (MVC)<br />View<br />
    • 12. Web Dynpro Component Architecture<br />Interface view<br />SAP Web Dynpro uses principles of MVC paradigm<br /><ul><li>Controller handle the user input and steer the application
    • 13. Views define the layout
    • 14. Model hold and provide the business logic </li></ul>Component Interface<br />Interface view<br />Interface<br />Controller<br />Components<br />M<br />Component<br />Controller<br />Window <br />Window<br /> Controller<br />M<br />M<br />Usage declarations<br />Business Logic<br />(Models)<br />Contains<br />Model 1<br />Usage<br />declarations<br />Custom<br /> Controller<br />View<br />Layout<br />View<br />Controller<br />M<br />Model 2<br />M<br />W e b D y n p r o C o m p o n e n t<br />
    • 15. Web Dynpro Components<br />Web Dynpro Component contains<br />Windows<br />Views<br />UI elements<br />Layout<br />Controllers<br />Context Data<br />Eventing<br />Methods<br />Attributes<br />Component Interface<br />Interface Contr.<br />Interface View<br /> View<br />Component <br />Component Controller<br />Window<br /> View Controller<br /> View<br /> View Controller<br />
    • 16. Agenda<br />Web Dynpro Motivation<br />Web Dynpro ABAP Programming Model<br />2.1. Views and UI Elements<br />2.2. Controllers and Context<br />2.3. Component Usage and Navigation<br />Web Dynpro Integration Capabilities<br />3.1. Integration into SAP NetWeaver Portal<br />3.2. Adobe Interactive Forms<br />3.3. Adobe Flash Islands<br />Summary<br />
    • 17. Window<br />View<br />Is embedded into window<br />Defines the visible layout via predefined UI elements<br />Does not contain any HTML or scripting<br />UI elements<br />Are the smallest UI building blocks (button, input field,…)<br />Available as provided UI element libraries<br />Have properties which steer their behavior<br />Can be nested with Container UI elements<br />Are positioned in hierarchical structure<br />View<br />Views and UI Elements<br />
    • 18. Defining View Layout<br />UI element tree of view<br />UI element libraries<br />Properties of selected UI element<br />View layout<br />
    • 19. Various categories of UI elements are supported<br />Each UI element object is represented as an abstract class that is independentof any client presentation layer.<br />UI Element Categories<br />
    • 20. Demo<br />DEMO<br />Hello World<br />
    • 21. Agenda<br />Web Dynpro Motivation<br />Web Dynpro ABAP Programming Model<br />2.1. Views and UI Elements<br />2.2. Controllers and Context<br />2.3. Component Usage and Navigation<br />Web Dynpro Integration Capabilities<br />3.1. Integration into SAP NetWeaver Portal<br />3.2. Adobe Interactive Forms<br />3.3. Adobe Flash Islands<br />Summary<br />
    • 22. Controller and Context<br />Context<br />Root Node<br />Node N1<br />Attribute CARR<br />Attribute DEP_AIRP<br />Node N2<br /> View Controller<br />Controller<br />Contains the logic of the UI layer <br />Implements event handlers<br />Reads and writes context node content<br />Each view has its own view controller<br />Context<br />Hierarchy of nodes and attributes<br />Contains the data of the UI<br />Nodes and attributes can be bound to UI elements<br />Framework takes care of updating the values<br />LH<br />Paris<br />method WD_DO_INIT node = wd_context->get_child_node(‘N1’). node->set_attribute( name = ‘DEP_AIRP’ value = ‘Paris’).<br />Method onAction_GOTO_NEXT node = wd_context->get_child_node(‘N1’). node->get_attribute( name = ‘CARR’ value = carrier ).<br />
    • 23. View Controller and View Context<br />Context<br />Node BP<br />PART_NAME <br />PARTNER_ID<br />Node N2<br />Window<br />View Controller<br />View<br />T*<br />T*<br />Controller contains methods<br />and events for user interactions<br />Method onAction_GOTO_NEXT node = wd_context->get_child_node(‘BP’). node->get_attribute( name = ‘PART_NAME’ value = part_name ).<br />
    • 24. Context Node Elements<br />Node 1 (Cardinality 0...n)<br />Node BP<br />PARTNER_ID<br />PARTNER_ID<br />013<br />012<br />011<br />PARTNER_NAME<br />PARTNER_NAME<br />Laur..<br />Asia<br />TECU.<br />COUNTRY<br />COUNTRY<br />FR<br />JP<br />DE<br /> View Controller<br />View<br />Context<br />Node 2<br />Elements of a context node <br />methodWD_DO_INIT* BusPartners: internal table ... node->bind_elements( partners ).<br />
    • 25. Demo<br />DEMO<br />Simple View and Table<br />
    • 26. Component Controller and Context Mapping<br />Component Controller<br />Context<br />Root Node<br />Node 1<br />Node 2<br />Node 3<br />Component Controller<br />Component Controller<br />Controller which is the backbone of the component<br />Has its own Context<br />Contains the logic for interaction with the model (ABAP class, function modules, BAPIs, Web Services)<br />Context Mapping<br />Nodes of Component Controller context can be mapped to nodes of other contexts<br />Framework takes care of data transport (references)<br />Model Class,<br />ABAP Objects API,<br />BAPIs,<br />Other WD Compo-nent,<br />…<br />Method show_flights flights = BO->get… node1 = wd_context->… node1->bind_elements( flights ).<br />
    • 27. Component Controller<br />Component Controller<br />Context<br />Context<br />Node 1<br />Node 2<br />Node 3<br />Mapping of context data<br /> Component <br />Component Controller<br />Window<br /> View Controller<br />View<br />Context<br />Node 1<br />Model Class,<br />ABAP Objects API,<br />BAPIs,<br />Other WD Component,<br />…<br />Method show_bpartners BPs = BO->get… node1 = wd_context->… node1->bind_elements( BPs ).<br />Component controller connects to business logic and gets/sets data<br />
    • 28. Demo<br />Exercise #1<br />
    • 29. Window<br /> View Controller<br />Node 1<br />Views in Views<br />ViewContainer UI element<br /><ul><li>Views can be structured with ViewContainer UI elements
    • 30. How there are arranged within each other is declared in the window</li></ul>MAIN_VIEW<br />MAIN_VIEW<br />Context<br />ViewCont.<br />SO_VIEW<br />ViewContainer<br /> View Controller<br />SORDER_VIEW<br />Label<br />Context<br />Node 1<br />Node 2<br />
    • 31. Root Node<br />Node 1<br />Attribut1<br />Attribut2<br />View Controller<br />Node 2<br />View<br />Label<br />Context<br />Press<br /> Component <br /> Component Controller<br />Window<br /> View Controller<br />Node BP<br />Interaction Between Views and Controllers<br />Component Controller<br />Context<br />Context<br />Node BP<br />TEC<br />Node SO<br />Node 3<br />Mapping of context data<br />View<br />Context<br />011<br />011<br />TEC<br />OnLeadSelection wd_comp_cont-> get_sorders()<br />5..3<br /> View Controller<br />View<br />Method get_sorders SOs = BO->get… node = wd_cont->… node->bind_table( SOs ).<br />Label<br />Context<br />Node SO<br />5..3<br />
    • 32. Context Node at Design Time<br />503<br />ITelo<br />052007<br />Declaration of Context Nodes<br />Create metadata which defines the structure of the context <br />Two dimensional hierarchy like files and folders<br />But each node can be a collection<br />Min and max number of elements in a node is steered by Cardinality<br />(0..1)<br />(1..1)<br />(0..n)<br />(1..n)<br />Context<br />SALES_ORDERS (0...n)<br />SO_ID<br />SELLER_COMP<br />CREATE_DATE<br />ITEMS (0…n)<br />ITEM_ID<br />PRODUCT_NAME<br />
    • 33. Complex Data in Context Node<br />502<br />501<br />SR<br />503<br />403.0<br />123.03<br />Swiss<br />99.99<br />051223<br />051003<br />www<br />052709<br /> View Controller<br />Context at runtime<br />Nodes with cardinality (0..n) can contain several elements at runtime<br />Each element can have its own set of sub nodes at runtime which are again collections of elements<br />Example: Sales Orders with Items<br />Items of selected sales order should be displayed in second table onthe same view<br />Each sales order has its own set of items<br />Context<br />SALES_ORDERS (0...n)<br />S_ORDER_ID<br />AMOUNT<br />DATE<br />ITEMS<br />ITEM_ID<br />PRODUCT_NAME<br />
    • 34. Supply Function of Context Node<br />Supply Function<br />Is triggered if lead selection of parent element changes<br />Is implemented as method of controller<br />Has access to parent element<br />Singleton property of context node steers if supply function is called<br />Every time lead selection changes<br />Only at first time for each element<br />
    • 35. Demo<br />Exercise #2 & 3<br />
    • 36. Agenda<br />Web Dynpro Motivation<br />Web Dynpro ABAP Programming Model<br />2.1. Views and UI Elements<br />2.2. Controllers and Context<br />2.3. Component Usage and Navigation<br />Web Dynpro Integration Capabilities<br />3.1. Integration into SAP NetWeaver Portal<br />3.2. Adobe Interactive Forms<br />3.3. Adobe Flash Islands<br />Summary<br />
    • 37. Web Dynpro Component Usage<br />CompContr.<br />Method A<br />Event E<br />Context<br />Context<br />Reuse of Web Dynpro Components<br />Real business applications usually consist of several WD components<br />Reusable components for dedicated often used tasks in different applications<br />Customer address display <br />Order details<br />…<br />Generic components as part of the Web Dynpro environment<br />ALV<br />Select Options<br />Message Viewer<br />Comp B<br />Interface<br />Comp A<br />Method B<br />Event E<br />
    • 38. Web Dynpro Component Usage<br />Main Component<br />Main Comp A<br />Main Comp B<br />Sub Comp B<br />Sub Comp A<br />Sub Component<br /><ul><li>Main component needs different functionalities in a given view area
    • 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
    • 45. Sub component is instantiated in each main component at runtime</li></li></ul><li>Web Dynpro Component Reuse<br />Main Component A<br />Comp Controller<br />Window<br />View<br />Method A<br />Event E<br />Window<br />Context<br />Context<br />Context<br />Node<br />Node<br />Node<br />View<br />Sub Component B<br />Interface Controller<br />Window<br />View<br />View<br />Method B<br />Event E<br /><ul><li>Windows of a used component can be embedded as Interface Views into own windows or views
    • 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 View</li></ul>Sub Component C<br />Interface Controller<br />Method C<br />Event E<br />
    • 51. Component <br />Interface Controller<br />Attribut1<br />Interface Contr.Context<br />Window<br />Root Node<br />Root Node<br />Attribut2<br />Component Contr.Context<br />Node 1<br />Node 1<br />Attribut1<br />Root Node<br /> View Controller<br />View<br />Attribut2<br />Node 1<br />Root Node<br />View Controller<br />View Controller<br />Node 2<br />Node 2<br />Context<br />Node 1<br />View<br />View<br />Concepts: Component Interface <br />Root Node<br />Node 1<br />Method SET_AIRP.<br />Node 2<br />Label<br />Label<br />Context<br />Context<br />Node 3<br />Press<br />Press<br />Interface View <br />Label<br /> View Controller<br />Label<br />View<br />Contexth<br />Label<br />Root Node<br />Label<br />Node 1<br />Node 2<br />ComponentController<br />method SET_AIRP<br />method SET_AIRP<br />Method SORT_FLIGHT<br />
    • 52. Window<br />Navigation Between Views<br />CustomerDetails<br />Customer Sales Orders<br />Out<br />In<br />Inbound plug<br />Outbound plug<br />Navigation link<br /><ul><li>To define the navigation between two views, you need to create exit and entry points for each view using outbound and inbound plugs.
    • 53. Only then you can specify the navigation flow using navigation links</li></li></ul><li>Plugs and Navigation<br />OnActionSHOW_SORDERS wd_this-> fire_EXIT_VIEW_plg( ).<br />OUT<br />IN<br />HandleSHOW_SO …<br />OUT<br />IN<br />Create Outbound Plug<br />Create Action<br />Window<br /> View Controller<br />View<br />SHOW_SORDERS<br />EXIT_VIEW<br />Create Navigation Link<br /> View Controller<br />View<br />SHOW_SO<br />Create Inbound Plug<br />
    • 54. Demo<br />Exercise #4<br />
    • 55. Agenda<br />Web Dynpro Motivation<br />Web Dynpro ABAP Programming Model<br />2.1. Views and UI Elements<br />2.2. Controllers and Context<br />2.3. Component Usage and Navigation<br />Web Dynpro Integration Capabilities<br />3.1. Integration into SAP NetWeaver Portal<br />3.2. Adobe Interactive Forms<br />3.3. Adobe Flash Islands<br />Summary<br />
    • 56. Agenda<br />Web Dynpro Motivation<br />Web Dynpro ABAP Programming Model<br />2.1. Views and UI Elements<br />2.2. Controllers and Context<br />2.3. Component Usage and Navigation<br />Web Dynpro Integration Capabilities<br />3.1. Integration into SAP NetWeaver Portal<br />3.2. Adobe Interactive Forms<br />3.3. Adobe Flash Islands<br />Summary<br />
    • 57. Web Dynpro and SAP NetWeaver Portal<br />Portal Integration<br />Generic iViews for displaying Web Dynpro Applications <br />Easy integration via Web DynproiView Wizard<br />Central User management <br />Portal eventing support<br />Object Based Navigation<br />Unified brandingbyportal themes<br />
    • 58. Portal Integration<br />SAP Portal<br />AS ABAP application system is declared in portal<br />Server, port,…<br />User mapping<br />Create iView for WD ABAP application <br />iView points to logical backend server, name space and WD application <br />iView is assigned to portal role<br />Portal iView<br />Application Server Java<br />WD Application<br />WD Component<br />Window<br />View<br />Application Server ABAP<br />
    • 59. Demo<br />DEMO<br />Portal Integration<br />
    • 60. Introduction - SAP NWBC 3.0 SAP NetWeaver Business Client 1.0 & 2.0- Existing<br />Rich, Unified Environment, Desktop Client maximizing the SAP Transactional User Experience:<br /><ul><li>Unified environment for all existing SAP applications as well as additional content; it hosts:
    • 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</li></ul> SAP NWBC 1.0: SAP Business All-in-One and SAP Business Suite<br /> SAP NWBC 2.0: SAP Business ByDesign<br />SAP NWBC 1.0 is available for All-in-One and Business Suite with SAP ERP 6.0 EhP2.<br />SAP NWBC 2.0 is available as part of the last ByDesign Feature Pack<br />
    • 69. Introduction - SAP NWBC 3.0 SAP NetWeaver Business Client 3.0 - Roadmap<br />Rich, Unified Environment, Desktop and HTML Client maximizing the SAP TransactionalUser Experience: <br />NWBC for Desktop<br />In addition to existing capabilities:<br /><ul><li>NWBC HTML flavor Client
    • 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 capabilities</li></ul>NWBC for HTML<br />SAP NWBC 3.0 is expected to be available with the next SAP NetWeaver Release (testing release will soon be optional)<br />
    • 75. Introduction - SAP NWBC 3.0 Connections – SAP NWBC 3.0 & Portal<br />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.<br />Portal Standalone<br />SAP GUI with SAP NetWeaver Business Client<br />
    • 76. Demo<br />DEMO<br />NetWeaver Business Client<br />
    • 77. Agenda<br />Web Dynpro Motivation<br />Web Dynpro ABAP Programming Model<br />2.1. Views and UI Elements<br />2.2. Controllers and Context<br />2.3. Component Usage and Navigation<br />Web Dynpro Integration Capabilities<br />3.1. Integration into SAP NetWeaver Portal<br />3.2. Adobe Interactive Forms<br />3.3. Adobe Flash Islands<br />Summary<br />
    • 78. Paper-likelayout<br /><ul><li>Self-explanatory
    • 79. Natural look and feel</li></ul>User Handling <br /><ul><li>Save locally
    • 80. Distribute via email / Portal
    • 81. Digital signature (future)
    • 82. Local printing</li></ul>Background Services<br /><ul><li>Structured data in XML
    • 83. Prefilled application values
    • 84. Prefilled list boxes, help values, …
    • 85. Automatic data extraction and integration in application</li></ul>What Does it Look Like ?<br />
    • 86. Adobe Interactive Forms in WD ABAP<br />Basic Forms Functionality<br />Define Form in system <br />Layout (Adobe Designer)<br />Data structure<br />Form is generated <br />Function for generating PDF<br />API for setting/getting data<br />Integration into Web Dynpro<br />Place Form in InteractiveForm UI container element<br />Map context data to forms API<br />Form is displayed at runtime<br />Printing<br />Interactive Form<br />
    • 87. Agenda<br />Web Dynpro Motivation<br />Web Dynpro ABAP Programming Model<br />2.1. Views and UI Elements<br />2.2. Controllers and Context<br />2.3. Component Usage and Navigation<br />Web Dynpro Integration Capabilities<br />3.1. Integration into SAP NetWeaver Portal<br />3.2. Adobe Interactive Forms<br />3.3. Adobe Flash Islands<br />Summary<br />
    • 88. Adobe Flash Islands in WD ABAP<br />Adobe Flash Applications<br />Rich Internet Applications for complex visualization tasks <br />Developed in Adobe Flex Builder <br />Running in Adobe Flash Player<br />Used if Web Dynpro UI elements are not sufficient for required user experience<br />Integration into Web Dynpro<br />Running as WD Island<br />Contained in MIME repository<br />Communication to WD component via<br />SAP Flash Library<br />Context Nodes<br />Events <br />
    • 89. Demo<br />DEMO<br />Flash Island<br />
    • 90. Agenda<br />Web Dynpro Motivation<br />Web Dynpro ABAP Programming Model<br />2.1. Views and UI Elements<br />2.2. Controllers and Context<br />2.3. Component Usage and Navigation<br />Web Dynpro Integration Capabilities<br />3.1. Integration into SAP NetWeaver Portal<br />3.2. Adobe Interactive Forms<br />3.3. Adobe Flash Islands<br />Summary<br />
    • 91. Demo<br />DEMO<br />Exercise Examples – With a Visual Redesign <br />
    • 92. Summary<br /><ul><li>Web Dynpro is SAP’s UI strategy
    • 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
    • 97. Completely Integrated into the SAP NetWeaver Application Server ABAP</li></li></ul><li>Further Information<br />SAP Public Web:<br />SAP Developer Network (SDN): www.sdn.sap.com<br />Business Process Expert (BPX) Community: www.bpx.sap.com<br /><ul><li>SAP BusinessObjects Community (BOC): www.boc.sap.com
    • 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
    • 101. FPM: http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/00b4312a-ac72-2b10-e0ad-e0219cfeb78e</li></ul>Related SAP Education and Certification Opportunities<br />http://www.sap.com/education/<br /><ul><li>NET310: 5-day introductory classroom training on Web Dynpro ABAP
    • 102. NET311: 3-day classroom training on advanced Web Dynpro ABAP
    • 103. NET312: 3-day classroom training on UI elements
    • 104. NET313: new 2-day classroom training on Floorplan Manager</li></li></ul><li>Further Information<br />Related Workshops/Lectures at SAP TechEd 2010<br />CD103, choosing the Right UI Technology for the Right Project, Lecture (1 hour)<br />CD105, What’s New in Web Dynpro ABAP 7.01 and 7.02, Lecture (2 hour) <br />CD160, Developing User Interfaces with Web Dynpro ABAP, Hands-On (4 hours)<br />CD163, Creating Mashup User Interfaces with the New Web Dynpro ABAP Page Builder, Hands-On (2 hour)<br />CD164, Using SAP NetWeaver Business Client, Hands-On (2 hour)<br />CD203, Best Practices for Designing Web Dynpro ABAP User Interfaces, Lecture (2 hours)<br />CD217, Building Interactive UIs Utilizing Page Builder and SAP BusinessObjectsXcelsius in SAP NetWeaver Business Client, Lecture (1 hour)<br />CD264, Creating Online and Offline Form Processing Scenarios with Adobe Forms and Web Dynpro for ABAP, Hands-On (2 hour)<br />CD266, ABAP Development: Update Your Skills to SAP NetWeaver 7 and Beyond, Hands-on (4 hours)<br />
    • 105. Feedback<br />Please complete your session evaluation.<br />Be courteous — deposit your trash, and do not take the handouts for the following session. <br />Thank You !<br />

    ×