SAP Inside Track St. LouisDeveloping User Interfaces with Web Dynpro for ABAP<br />Subrah Kappagantual, <br />Thomas Jung,...
Disclaimer<br />This presentation outlines our general product direction and should not be relied on in making a purchase ...
Agenda<br />Web Dynpro Motivation<br />Web Dynpro ABAP Programming Model<br />2.1.	Views and UI Elements<br />2.2.	Control...
Objectives of Web Dynpro<br />Model-based UI development<br />Enforce clear separation between UI logic and business logic...
Smart<br />Client<br />Web<br />Browser<br />Motivation Web Dynpro<br />other?<br />Web Dynpro<br />UI definition independ...
Application Scenarios With Web Dynpro <br />SAP NetWeaver Portal<br />NetWeaver Business Client<br />Web Dynpro iView<br /...
Web Dynpro Development in ABAP<br />Development completely integrated into ABAP Workbench<br />Graphical View Layout desig...
Demo<br />DEMO<br />DEMO – WD in Workbench<br />
Agenda<br />Web Dynpro Motivation<br />Web Dynpro ABAP Programming Model<br />2.1.	Views and UI Elements<br />2.2.	Control...
Meta-Model Declarations and Custom Coding<br />Run able App<br />Web Dynpro<br />Tools<br />GeneratedCode<br />Meta-data<b...
Original MVC design for decoupling presentation and application logic<br />Generates the application data without caring h...
Web Dynpro Component Architecture<br />Interface view<br />SAP Web Dynpro uses principles of MVC paradigm<br /><ul><li>Con...
Views define the layout
Model hold and provide the business logic </li></ul>Component Interface<br />Interface view<br />Interface<br />Controller...
Web Dynpro Components<br />Web Dynpro Component contains<br />Windows<br />Views<br />UI elements<br />Layout<br />Control...
Agenda<br />Web Dynpro Motivation<br />Web Dynpro ABAP Programming Model<br />2.1.	Views and UI Elements<br />2.2.	Control...
Window<br />View<br />Is embedded into window<br />Defines the visible layout via predefined UI elements<br />Does not con...
Defining View Layout<br />UI element tree of view<br />UI element libraries<br />Properties of selected UI element<br />Vi...
Various categories of UI elements are supported<br />Each UI element object is represented as an abstract class that is in...
Demo<br />DEMO<br />Hello World<br />
Agenda<br />Web Dynpro Motivation<br />Web Dynpro ABAP Programming Model<br />2.1.	Views and UI Elements<br />2.2.	Control...
Controller and Context<br />Context<br />Root Node<br />Node N1<br />Attribute CARR<br />Attribute DEP_AIRP<br />Node N2<b...
View Controller and View Context<br />Context<br />Node BP<br />PART_NAME  <br />PARTNER_ID<br />Node N2<br />Window<br />...
Context Node Elements<br />Node 1 (Cardinality 0...n)<br />Node BP<br />PARTNER_ID<br />PARTNER_ID<br />013<br />012<br />...
Demo<br />DEMO<br />Simple View and Table<br />
Component Controller and Context Mapping<br />Component Controller<br />Context<br />Root Node<br />Node 1<br />Node 2<br ...
Component Controller<br />Component Controller<br />Context<br />Context<br />Node 1<br />Node 2<br />Node 3<br />Mapping ...
Demo<br />Exercise #1<br />
Window<br />  View Controller<br />Node 1<br />Views in Views<br />ViewContainer UI element<br /><ul><li>Views can be stru...
How there are arranged within each other is declared in the window</li></ul>MAIN_VIEW<br />MAIN_VIEW<br />Context<br />Vie...
Root Node<br />Node 1<br />Attribut1<br />Attribut2<br />View Controller<br />Node 2<br />View<br />Label<br />Context<br ...
Context Node at Design Time<br />503<br />ITelo<br />052007<br />Declaration of Context Nodes<br />Create metadata which d...
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<b...
Supply Function of Context Node<br />Supply Function<br />Is triggered if lead selection of parent element changes<br />Is...
Demo<br />Exercise #2 & 3<br />
Agenda<br />Web Dynpro Motivation<br />Web Dynpro ABAP Programming Model<br />2.1.	Views and UI Elements<br />2.2.	Control...
Web Dynpro Component Usage<br />CompContr.<br />Method A<br />Event E<br />Context<br />Context<br />Reuse of Web Dynpro C...
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...
View container provides place for sub components
Several Component Usages to different sub components with the same Interface are defined
Which component is used is decided at runtime
Several main components need the same functionality
Functionality is developed once in reusable component
Main components declare Component Usage of sub component
Sub component is instantiated in each main component at runtime</li></li></ul><li>Web Dynpro Component Reuse<br />Main Com...
Methods, events and context nodes can be declared as part of the Interface
Access via Interface Controller with
Contextnodemapping
Method call, Events raised
Embedding of Interface View</li></ul>Sub Component C<br />Interface    Controller<br />Method C<br />Event E<br />
Component <br />Interface Controller<br />Attribut1<br />Interface Contr.Context<br />Window<br />Root Node<br />Root Node...
Window<br />Navigation Between Views<br />CustomerDetails<br />Customer Sales Orders<br />Out<br />In<br />Inbound plug<br...
Only then you can specify the navigation flow using navigation links</li></li></ul><li>Plugs and Navigation<br />OnActionS...
Demo<br />Exercise #4<br />
Agenda<br />Web Dynpro Motivation<br />Web Dynpro ABAP Programming Model<br />2.1.	Views and UI Elements<br />2.2.	Control...
Agenda<br />Web Dynpro Motivation<br />Web Dynpro ABAP Programming Model<br />2.1.	Views and UI Elements<br />2.2.	Control...
Web Dynpro and SAP NetWeaver Portal<br />Portal Integration<br />Generic iViews for displaying Web Dynpro Applications  <b...
Portal Integration<br />SAP Portal<br />AS ABAP application system is declared in portal<br />Server, port,…<br />User map...
Demo<br />DEMO<br />Portal Integration<br />
Introduction - SAP NWBC 3.0 SAP NetWeaver Business Client 1.0 & 2.0- Existing<br />Rich, Unified Environment, Desktop Clie...
SAP GUI
Upcoming SlideShare
Loading in...5
×

SAP Inside Track 2010 - Thomas Jung Intro to WDA

5,429

Published on

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,429
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
339
Comments
1
Likes
4
Embeds 0
No embeds

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
  • SAP Inside Track 2010 - Thomas Jung Intro to WDA

    1. 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. 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. 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. 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. 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. 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. 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. 8. Demo<br />DEMO<br />DEMO – WD in Workbench<br />
    9. 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. 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. 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. 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. 13. Views define the layout
    14. 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. 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. 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. 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. 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. 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. 20. Demo<br />DEMO<br />Hello World<br />
    21. 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. 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. 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. 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. 25. Demo<br />DEMO<br />Simple View and Table<br />
    26. 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. 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. 28. Demo<br />Exercise #1<br />
    29. 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. 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. 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. 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. 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. 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. 35. Demo<br />Exercise #2 & 3<br />
    36. 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. 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. 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. 39. View container provides place for sub components
    40. 40. Several Component Usages to different sub components with the same Interface are defined
    41. 41. Which component is used is decided at runtime
    42. 42. Several main components need the same functionality
    43. 43. Functionality is developed once in reusable component
    44. 44. Main components declare Component Usage of sub component
    45. 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. 46. Methods, events and context nodes can be declared as part of the Interface
    47. 47. Access via Interface Controller with
    48. 48. Contextnodemapping
    49. 49. Method call, Events raised
    50. 50. Embedding of Interface View</li></ul>Sub Component C<br />Interface Controller<br />Method C<br />Event E<br />
    51. 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. 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. 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. 54. Demo<br />Exercise #4<br />
    55. 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. 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. 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. 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. 59. Demo<br />DEMO<br />Portal Integration<br />
    60. 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. 61. SAP GUI
    62. 62. Web Dynpro
    63. 63. Any Web-based content
    64. 64. Direct access to ABAP back-end (PFCG) role repository
    65. 65. Utilizes the Portal services infrastructure for role- and navigation-based access to SAP systems
    66. 66. Consistent navigation capabilities
    67. 67. Improved User Interface and interaction scheme
    68. 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. 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. 70. SAP harmonized and intuitive Signature Design
    71. 71. Unified environment for legacy and new SAP applications through desktop maximization of the Smart Client Renderer
    72. 72. High fidelity UI with increased graphical capabilities – Microsoft C# WPF-based client
    73. 73. Multi-window-based navigation model
    74. 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. 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. 76. Demo<br />DEMO<br />NetWeaver Business Client<br />
    77. 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. 78. Paper-likelayout<br /><ul><li>Self-explanatory
    79. 79. Natural look and feel</li></ul>User Handling <br /><ul><li>Save locally
    80. 80. Distribute via email / Portal
    81. 81. Digital signature (future)
    82. 82. Local printing</li></ul>Background Services<br /><ul><li>Structured data in XML
    83. 83. Prefilled application values
    84. 84. Prefilled list boxes, help values, …
    85. 85. Automatic data extraction and integration in application</li></ul>What Does it Look Like ?<br />
    86. 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. 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. 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. 89. Demo<br />DEMO<br />Flash Island<br />
    90. 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. 91. Demo<br />DEMO<br />Exercise Examples – With a Visual Redesign <br />
    92. 92. Summary<br /><ul><li>Web Dynpro is SAP’s UI strategy
    93. 93. Declarative, MVC based UI programming model
    94. 94. UI definition independent of rendering technology
    95. 95. Web Dynpro for ABAP available with SAP NetWeaver 7.0
    96. 96. Programming model similar to Web Dynpro for Java
    97. 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. 98. Web Dynpro ABAP: http://www.sdn.sap.com/irj/sdn/nw-wdabap
    99. 99. NWBC: http://www.sdn.sap.com/irj/sdn/nw-businessclient
    100. 100. Islands: http://www.sdn.sap.com/irj/sdn/adobe-flash-islands
    101. 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. 102. NET311: 3-day classroom training on advanced Web Dynpro ABAP
    103. 103. NET312: 3-day classroom training on UI elements
    104. 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. 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 />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×