Your SlideShare is downloading. ×
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,317

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,317
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
333
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
      Subrah Kappagantual,
      Thomas Jung, SAP Technology Solution Management
    • 2. Disclaimer
      This presentation outlines our general product direction and should not be relied on in making a purchase decision. This presentation is not subject to your license agreement or any other agreement with SAP. SAP has no obligation to pursue any course of business outlined in this presentation or to develop or release any functionality mentioned in this presentation. This presentation and SAP's strategy and possible future developments are subject to change and may be changed by SAP at any time for any reason without notice. This document is provided without a warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement. SAP assumes no responsibility for errors or omissions in this document, except if such damages were caused by SAP intentionally or grossly negligent.
    • 3. Agenda
      Web Dynpro Motivation
      Web Dynpro ABAP Programming Model
      2.1. Views and UI Elements
      2.2. Controllers and Context
      2.3. Component Usage and Navigation
      Web Dynpro Integration Capabilities
      3.1. Integration into SAP NetWeaver Portal
      3.2. Adobe Interactive Forms
      3.3. Adobe Flash Islands
      Summary
    • 4. Objectives of Web Dynpro
      Model-based UI development
      Enforce clear separation between UI logic and business logic
      Little coding, lots of design
      Declarative UI development
      Future Proof UI Declaration
      Multiple Browser Types, AJAX, Islands, HTML5
      Client technology independent UI definition
      Central implementation of user interface standards
      Accessibility support
      Adobe Forms integration
      Centrally provided UI elements
      Internationalization support
      Supports major platforms
      Java (as of SAP NetWeaver '04), ABAP (as of SAP NetWeaver 7.0)
    • 5. Smart
      Client
      Web
      Browser
      Motivation Web Dynpro
      other?
      Web Dynpro
      UI definition independent of client technology
      As much abstract declaration as possible
      Different rendering engines for different (future) UI technologies without adapting application coding
      ??????
      http://.....XBCML, delta
      http://.....HTML, JS
      Rendering
      Engine
      Rendering
      Engine
      Rendering
      Engine
      Meta Data
      <xml>
      <wd:xxx>
      </xml>
      Web Dynpro
    • 6. Application Scenarios With Web Dynpro
      SAP NetWeaver Portal
      NetWeaver Business Client
      Web Dynpro iView
      Web Dynpro iView
      J2EE Web Dynpro Runtime
      ABAP Web DynproRuntime
      Web Dynpro App
      Web DynproApp
      Web DynproApp
      Web Dynpro App
      ABAPWorkbench
      SAP NetWeaver DeveloperStudio
      RFC, WS
      ABAP Server
      RMI
      J2EE Server
      BusinessData
      BusinessData
      BusinessAPI (BAPI, Web Services)
      EJB (e.a.)
    • 7. Web Dynpro Development in ABAP
      Development completely integrated into ABAP Workbench
      Graphical View Layout design
      Declarative UI development
      ABAP editor with forward navigation
      ABAP dictionary data types directly available
      Simple remote debugging
      Functionality and services ofthe ABAP environment directly usable
      ABAP lifecycle management
      Transport
      Translation
      Enhancements
    • 8. Demo
      DEMO
      DEMO – WD in Workbench
    • 9. Agenda
      Web Dynpro Motivation
      Web Dynpro ABAP Programming Model
      2.1. Views and UI Elements
      2.2. Controllers and Context
      2.3. Component Usage and Navigation
      Web Dynpro Integration Capabilities
      3.1. Integration into SAP NetWeaver Portal
      3.2. Adobe Interactive Forms
      3.3. Adobe Flash Islands
      Summary
    • 10. Meta-Model Declarations and Custom Coding
      Run able App
      Web Dynpro
      Tools
      GeneratedCode
      Meta-data
      Compiler
      Generator
      CustomCode
      Meta-model Declarations
      Guarantees common app. design
      Good for graphical tool support
      Screen Layout and Nesting
      Navigation and Error Handling
      Data Flow
      Componentization
      ...
      Custom Coding
      Guarantees universality
      Good for data-driven, dynamic apps
      Implementation of business rules
      Dynamic screen modifications
      Access to services (files etc.)
      Portal eventing
      ...
    • 11. Original MVC design for decoupling presentation and application logic
      Generates the application data without caring how it will be displayed.
      Model
      Binds the user and business interaction layers together. All intermediate processing is performed here.
      Business Interaction Layer
      User Interaction Layer
      Request
      Controller
      Response
      Visualizes the application data without caring how it was generated.
      Binding Layer
      Model View Controller (MVC)
      View
    • 12. Web Dynpro Component Architecture
      Interface view
      SAP Web Dynpro uses principles of MVC paradigm
      • Controller handle the user input and steer the application
      • 13. Views define the layout
      • 14. Model hold and provide the business logic
      Component Interface
      Interface view
      Interface
      Controller
      Components
      M
      Component
      Controller
      Window
      Window
      Controller
      M
      M
      Usage declarations
      Business Logic
      (Models)
      Contains
      Model 1
      Usage
      declarations
      Custom
      Controller
      View
      Layout
      View
      Controller
      M
      Model 2
      M
      W e b D y n p r o C o m p o n e n t
    • 15. Web Dynpro Components
      Web Dynpro Component contains
      Windows
      Views
      UI elements
      Layout
      Controllers
      Context Data
      Eventing
      Methods
      Attributes
      Component Interface
      Interface Contr.
      Interface View
      View
      Component
      Component Controller
      Window
      View Controller
      View
      View Controller
    • 16. Agenda
      Web Dynpro Motivation
      Web Dynpro ABAP Programming Model
      2.1. Views and UI Elements
      2.2. Controllers and Context
      2.3. Component Usage and Navigation
      Web Dynpro Integration Capabilities
      3.1. Integration into SAP NetWeaver Portal
      3.2. Adobe Interactive Forms
      3.3. Adobe Flash Islands
      Summary
    • 17. Window
      View
      Is embedded into window
      Defines the visible layout via predefined UI elements
      Does not contain any HTML or scripting
      UI elements
      Are the smallest UI building blocks (button, input field,…)
      Available as provided UI element libraries
      Have properties which steer their behavior
      Can be nested with Container UI elements
      Are positioned in hierarchical structure
      View
      Views and UI Elements
    • 18. Defining View Layout
      UI element tree of view
      UI element libraries
      Properties of selected UI element
      View layout
    • 19. Various categories of UI elements are supported
      Each UI element object is represented as an abstract class that is independentof any client presentation layer.
      UI Element Categories
    • 20. Demo
      DEMO
      Hello World
    • 21. Agenda
      Web Dynpro Motivation
      Web Dynpro ABAP Programming Model
      2.1. Views and UI Elements
      2.2. Controllers and Context
      2.3. Component Usage and Navigation
      Web Dynpro Integration Capabilities
      3.1. Integration into SAP NetWeaver Portal
      3.2. Adobe Interactive Forms
      3.3. Adobe Flash Islands
      Summary
    • 22. Controller and Context
      Context
      Root Node
      Node N1
      Attribute CARR
      Attribute DEP_AIRP
      Node N2
      View Controller
      Controller
      Contains the logic of the UI layer
      Implements event handlers
      Reads and writes context node content
      Each view has its own view controller
      Context
      Hierarchy of nodes and attributes
      Contains the data of the UI
      Nodes and attributes can be bound to UI elements
      Framework takes care of updating the values
      LH
      Paris
      method WD_DO_INIT node = wd_context->get_child_node(‘N1’). node->set_attribute( name = ‘DEP_AIRP’ value = ‘Paris’).
      Method onAction_GOTO_NEXT node = wd_context->get_child_node(‘N1’). node->get_attribute( name = ‘CARR’ value = carrier ).
    • 23. View Controller and View Context
      Context
      Node BP
      PART_NAME
      PARTNER_ID
      Node N2
      Window
      View Controller
      View
      T*
      T*
      Controller contains methods
      and events for user interactions
      Method onAction_GOTO_NEXT node = wd_context->get_child_node(‘BP’). node->get_attribute( name = ‘PART_NAME’ value = part_name ).
    • 24. Context Node Elements
      Node 1 (Cardinality 0...n)
      Node BP
      PARTNER_ID
      PARTNER_ID
      013
      012
      011
      PARTNER_NAME
      PARTNER_NAME
      Laur..
      Asia
      TECU.
      COUNTRY
      COUNTRY
      FR
      JP
      DE
      View Controller
      View
      Context
      Node 2
      Elements of a context node
      methodWD_DO_INIT* BusPartners: internal table ... node->bind_elements( partners ).
    • 25. Demo
      DEMO
      Simple View and Table
    • 26. Component Controller and Context Mapping
      Component Controller
      Context
      Root Node
      Node 1
      Node 2
      Node 3
      Component Controller
      Component Controller
      Controller which is the backbone of the component
      Has its own Context
      Contains the logic for interaction with the model (ABAP class, function modules, BAPIs, Web Services)
      Context Mapping
      Nodes of Component Controller context can be mapped to nodes of other contexts
      Framework takes care of data transport (references)
      Model Class,
      ABAP Objects API,
      BAPIs,
      Other WD Compo-nent,

      Method show_flights flights = BO->get… node1 = wd_context->… node1->bind_elements( flights ).
    • 27. Component Controller
      Component Controller
      Context
      Context
      Node 1
      Node 2
      Node 3
      Mapping of context data
      Component
      Component Controller
      Window
      View Controller
      View
      Context
      Node 1
      Model Class,
      ABAP Objects API,
      BAPIs,
      Other WD Component,

      Method show_bpartners BPs = BO->get… node1 = wd_context->… node1->bind_elements( BPs ).
      Component controller connects to business logic and gets/sets data
    • 28. Demo
      Exercise #1
    • 29. Window
      View Controller
      Node 1
      Views in Views
      ViewContainer UI element
      • Views can be structured with ViewContainer UI elements
      • 30. How there are arranged within each other is declared in the window
      MAIN_VIEW
      MAIN_VIEW
      Context
      ViewCont.
      SO_VIEW
      ViewContainer
      View Controller
      SORDER_VIEW
      Label
      Context
      Node 1
      Node 2
    • 31. Root Node
      Node 1
      Attribut1
      Attribut2
      View Controller
      Node 2
      View
      Label
      Context
      Press
      Component
      Component Controller
      Window
      View Controller
      Node BP
      Interaction Between Views and Controllers
      Component Controller
      Context
      Context
      Node BP
      TEC
      Node SO
      Node 3
      Mapping of context data
      View
      Context
      011
      011
      TEC
      OnLeadSelection wd_comp_cont-> get_sorders()
      5..3
      View Controller
      View
      Method get_sorders SOs = BO->get… node = wd_cont->… node->bind_table( SOs ).
      Label
      Context
      Node SO
      5..3
    • 32. Context Node at Design Time
      503
      ITelo
      052007
      Declaration of Context Nodes
      Create metadata which defines the structure of the context
      Two dimensional hierarchy like files and folders
      But each node can be a collection
      Min and max number of elements in a node is steered by Cardinality
      (0..1)
      (1..1)
      (0..n)
      (1..n)
      Context
      SALES_ORDERS (0...n)
      SO_ID
      SELLER_COMP
      CREATE_DATE
      ITEMS (0…n)
      ITEM_ID
      PRODUCT_NAME
    • 33. Complex Data in Context Node
      502
      501
      SR
      503
      403.0
      123.03
      Swiss
      99.99
      051223
      051003
      www
      052709
      View Controller
      Context at runtime
      Nodes with cardinality (0..n) can contain several elements at runtime
      Each element can have its own set of sub nodes at runtime which are again collections of elements
      Example: Sales Orders with Items
      Items of selected sales order should be displayed in second table onthe same view
      Each sales order has its own set of items
      Context
      SALES_ORDERS (0...n)
      S_ORDER_ID
      AMOUNT
      DATE
      ITEMS
      ITEM_ID
      PRODUCT_NAME
    • 34. Supply Function of Context Node
      Supply Function
      Is triggered if lead selection of parent element changes
      Is implemented as method of controller
      Has access to parent element
      Singleton property of context node steers if supply function is called
      Every time lead selection changes
      Only at first time for each element
    • 35. Demo
      Exercise #2 & 3
    • 36. Agenda
      Web Dynpro Motivation
      Web Dynpro ABAP Programming Model
      2.1. Views and UI Elements
      2.2. Controllers and Context
      2.3. Component Usage and Navigation
      Web Dynpro Integration Capabilities
      3.1. Integration into SAP NetWeaver Portal
      3.2. Adobe Interactive Forms
      3.3. Adobe Flash Islands
      Summary
    • 37. Web Dynpro Component Usage
      CompContr.
      Method A
      Event E
      Context
      Context
      Reuse of Web Dynpro Components
      Real business applications usually consist of several WD components
      Reusable components for dedicated often used tasks in different applications
      Customer address display
      Order details

      Generic components as part of the Web Dynpro environment
      ALV
      Select Options
      Message Viewer
      Comp B
      Interface
      Comp A
      Method B
      Event E
    • 38. Web Dynpro Component Usage
      Main Component
      Main Comp A
      Main Comp B
      Sub Comp B
      Sub Comp A
      Sub Component
      • 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
    • Web Dynpro Component Reuse
      Main Component A
      Comp Controller
      Window
      View
      Method A
      Event E
      Window
      Context
      Context
      Context
      Node
      Node
      Node
      View
      Sub Component B
      Interface Controller
      Window
      View
      View
      Method B
      Event E
      • 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
      Sub Component C
      Interface Controller
      Method C
      Event E
    • 51. Component
      Interface Controller
      Attribut1
      Interface Contr.Context
      Window
      Root Node
      Root Node
      Attribut2
      Component Contr.Context
      Node 1
      Node 1
      Attribut1
      Root Node
      View Controller
      View
      Attribut2
      Node 1
      Root Node
      View Controller
      View Controller
      Node 2
      Node 2
      Context
      Node 1
      View
      View
      Concepts: Component Interface
      Root Node
      Node 1
      Method SET_AIRP.
      Node 2
      Label
      Label
      Context
      Context
      Node 3
      Press
      Press
      Interface View
      Label
      View Controller
      Label
      View
      Contexth
      Label
      Root Node
      Label
      Node 1
      Node 2
      ComponentController
      method SET_AIRP
      method SET_AIRP
      Method SORT_FLIGHT
    • 52. Window
      Navigation Between Views
      CustomerDetails
      Customer Sales Orders
      Out
      In
      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.
      • 53. Only then you can specify the navigation flow using navigation links
    • Plugs and Navigation
      OnActionSHOW_SORDERS wd_this-> fire_EXIT_VIEW_plg( ).
      OUT
      IN
      HandleSHOW_SO …
      OUT
      IN
      Create Outbound Plug
      Create Action
      Window
      View Controller
      View
      SHOW_SORDERS
      EXIT_VIEW
      Create Navigation Link
      View Controller
      View
      SHOW_SO
      Create Inbound Plug
    • 54. Demo
      Exercise #4
    • 55. Agenda
      Web Dynpro Motivation
      Web Dynpro ABAP Programming Model
      2.1. Views and UI Elements
      2.2. Controllers and Context
      2.3. Component Usage and Navigation
      Web Dynpro Integration Capabilities
      3.1. Integration into SAP NetWeaver Portal
      3.2. Adobe Interactive Forms
      3.3. Adobe Flash Islands
      Summary
    • 56. Agenda
      Web Dynpro Motivation
      Web Dynpro ABAP Programming Model
      2.1. Views and UI Elements
      2.2. Controllers and Context
      2.3. Component Usage and Navigation
      Web Dynpro Integration Capabilities
      3.1. Integration into SAP NetWeaver Portal
      3.2. Adobe Interactive Forms
      3.3. Adobe Flash Islands
      Summary
    • 57. Web Dynpro and SAP NetWeaver Portal
      Portal Integration
      Generic iViews for displaying Web Dynpro Applications
      Easy integration via Web DynproiView Wizard
      Central User management
      Portal eventing support
      Object Based Navigation
      Unified brandingbyportal themes
    • 58. Portal Integration
      SAP Portal
      AS ABAP application system is declared in portal
      Server, port,…
      User mapping
      Create iView for WD ABAP application
      iView points to logical backend server, name space and WD application
      iView is assigned to portal role
      Portal iView
      Application Server Java
      WD Application
      WD Component
      Window
      View
      Application Server ABAP
    • 59. Demo
      DEMO
      Portal Integration
    • 60. Introduction - SAP NWBC 3.0 SAP NetWeaver Business Client 1.0 & 2.0- Existing
      Rich, Unified Environment, Desktop Client maximizing the SAP Transactional User Experience:
      • 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
      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
    • 69. Introduction - SAP NWBC 3.0 SAP NetWeaver Business Client 3.0 - Roadmap
      Rich, Unified Environment, Desktop and HTML Client maximizing the SAP TransactionalUser Experience:
      NWBC for Desktop
      In addition to existing capabilities:
      • 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
      NWBC for HTML
      SAP NWBC 3.0 is expected to be available with the next SAP NetWeaver Release (testing release will soon be optional)
    • 75. Introduction - SAP NWBC 3.0 Connections – SAP NWBC 3.0 & Portal
      The SAP NetWeaver Business Client enables direct connectivity to the Portal back-end system and PCD role repository centrally holding all the portal application, role and navigation content and logic. This ensures that customers’ investments in the portal infrastructure are preserved and can be displayed in the SAP NetWeaver UI client of choice, be it the SAP NetWeaver Business Client or SAP Portal Web Client.
      Portal Standalone
      SAP GUI with SAP NetWeaver Business Client
    • 76. Demo
      DEMO
      NetWeaver Business Client
    • 77. Agenda
      Web Dynpro Motivation
      Web Dynpro ABAP Programming Model
      2.1. Views and UI Elements
      2.2. Controllers and Context
      2.3. Component Usage and Navigation
      Web Dynpro Integration Capabilities
      3.1. Integration into SAP NetWeaver Portal
      3.2. Adobe Interactive Forms
      3.3. Adobe Flash Islands
      Summary
    • 78. Paper-likelayout
      • Self-explanatory
      • 79. Natural look and feel
      User Handling
      • Save locally
      • 80. Distribute via email / Portal
      • 81. Digital signature (future)
      • 82. Local printing
      Background Services
      • Structured data in XML
      • 83. Prefilled application values
      • 84. Prefilled list boxes, help values, …
      • 85. Automatic data extraction and integration in application
      What Does it Look Like ?
    • 86. Adobe Interactive Forms in WD ABAP
      Basic Forms Functionality
      Define Form in system
      Layout (Adobe Designer)
      Data structure
      Form is generated
      Function for generating PDF
      API for setting/getting data
      Integration into Web Dynpro
      Place Form in InteractiveForm UI container element
      Map context data to forms API
      Form is displayed at runtime
      Printing
      Interactive Form
    • 87. Agenda
      Web Dynpro Motivation
      Web Dynpro ABAP Programming Model
      2.1. Views and UI Elements
      2.2. Controllers and Context
      2.3. Component Usage and Navigation
      Web Dynpro Integration Capabilities
      3.1. Integration into SAP NetWeaver Portal
      3.2. Adobe Interactive Forms
      3.3. Adobe Flash Islands
      Summary
    • 88. Adobe Flash Islands in WD ABAP
      Adobe Flash Applications
      Rich Internet Applications for complex visualization tasks
      Developed in Adobe Flex Builder
      Running in Adobe Flash Player
      Used if Web Dynpro UI elements are not sufficient for required user experience
      Integration into Web Dynpro
      Running as WD Island
      Contained in MIME repository
      Communication to WD component via
      SAP Flash Library
      Context Nodes
      Events
    • 89. Demo
      DEMO
      Flash Island
    • 90. Agenda
      Web Dynpro Motivation
      Web Dynpro ABAP Programming Model
      2.1. Views and UI Elements
      2.2. Controllers and Context
      2.3. Component Usage and Navigation
      Web Dynpro Integration Capabilities
      3.1. Integration into SAP NetWeaver Portal
      3.2. Adobe Interactive Forms
      3.3. Adobe Flash Islands
      Summary
    • 91. Demo
      DEMO
      Exercise Examples – With a Visual Redesign
    • 92. Summary
      • 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
    • Further Information
      SAP Public Web:
      SAP Developer Network (SDN): www.sdn.sap.com
      Business Process Expert (BPX) Community: www.bpx.sap.com
      • 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
      Related SAP Education and Certification Opportunities
      http://www.sap.com/education/
      • 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
    • Further Information
      Related Workshops/Lectures at SAP TechEd 2010
      CD103, choosing the Right UI Technology for the Right Project, Lecture (1 hour)
      CD105, What’s New in Web Dynpro ABAP 7.01 and 7.02, Lecture (2 hour)
      CD160, Developing User Interfaces with Web Dynpro ABAP, Hands-On (4 hours)
      CD163, Creating Mashup User Interfaces with the New Web Dynpro ABAP Page Builder, Hands-On (2 hour)
      CD164, Using SAP NetWeaver Business Client, Hands-On (2 hour)
      CD203, Best Practices for Designing Web Dynpro ABAP User Interfaces, Lecture (2 hours)
      CD217, Building Interactive UIs Utilizing Page Builder and SAP BusinessObjectsXcelsius in SAP NetWeaver Business Client, Lecture (1 hour)
      CD264, Creating Online and Offline Form Processing Scenarios with Adobe Forms and Web Dynpro for ABAP, Hands-On (2 hour)
      CD266, ABAP Development: Update Your Skills to SAP NetWeaver 7 and Beyond, Hands-on (4 hours)
    • 105. Feedback
      Please complete your session evaluation.
      Be courteous — deposit your trash, and do not take the handouts for the following session.
      Thank You !

    ×