Upload
knowledge123
View
2
Download
0
Tags:
Embed Size (px)
DESCRIPTION
WDA
Citation preview
Hans-Dieter Geyer, Klaus Keller, Michael Cuntz, Uwe Klinger, Thomas Jung December, 2012
Highlights and Latest Features of Web Dynpro for ABAP
© 2012 SAP AG. All rights reserved. 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.
© 2012 SAP AG. All rights reserved. 3
- Introduction
- Highlights of NetWeaver 7.0 EhP2 and EhP3
- Copy’n’Paste from Excel
- Drag’n’Drop
- HTML5 with HTML Islands
- Outlook
Agenda
EXERCISE
DEMO
EXERCISE
EXERCISE
Introduction
© 2012 SAP AG. All rights reserved. 5
Motivation
Usage of Web Dynpro ABAP at SAP
Widely used in the SAP Business Suite
More than 1,400 FPM applications with EhP6
More than 60% of the FPM applications containing
a freestyle Web Dynpro ABAP component
Customer & Partner Perspective
Extend SAP Standard Applications
Build applications based on SAP Standard
technology
Learn about new features to develop freestyle Web Dynpro ABAP components.
© 2012 SAP AG. All rights reserved. 6
SAP NetWeaver Application Server ABAP Empowering classic & new SAP products
• 50.000+ customers of ABAP-based products
• Millions of ABAP developers, SCN as community
• A thriving partner ecosystem
• Proven, robust and scalable
• Extends into HANA, Mobility and Cloud
• Evolves continuously w/o disruption
• Enables hybrid on-premise/on-demand scenarios
SAP NetWeaver Application Server ABAP, a strong pillar In SAP’s product strategy
HANA
MOBILITY
CLO
UD
SAP NetWeaver in 2013
SAP NetWeaver
Application
Server ABAP
Highlights of NetWeaver 7.0 EhP 2**
and EhP 3**
* used by Suite 7 EhP5 ** used by Suite 7 EhP6
© 2012 SAP AG. All rights reserved. 8
New Features NetWeaver EhP2 and EhP3 (Link)
NetWeaver 7.0 EhP2 NetWeaver 7.0 EhP3
• Value Suggest
• Accordion
• FormLayout
• IconButton
• PanelStack/Panel
• TableMultiEditorCell
• SilverlightIsland
• Drag‘n‘Drop for MatrixLayout
• Delta Rendering enabled
• Enhancement of Configurations
• CTable
• LayoutContainer
• Input History
• Quick Views
• Copy ‘n’ paste from Excel, Lists
• Corbu Theme (SP04)
• HTML Standards Mode (SP05)
• HTML Island (SP05)
Copy’n’Paste from Excel
© 2012 SAP AG. All rights reserved. 10
Assign event handler
to Input Field
Copy’n’Paste from Excel – MultiValuePaste
1. Select data in Excel
2. Copy to clipboard (Ctrl+C)
Paste (Ctrl+V)
„TABLE“ data
© 2012 SAP AG. All rights reserved. 11
Copy’n’Paste from Excel – Types
Generic paste for Tables MultiValuePaste Standard browser paste
• Works for Table and CTable
• InputField, DropDownBoxes
• WD built-in
• Fills only visible cells
• Example: CTable
• Works for InputField
• Application Coding
• Provides all pasted data
• Example: Select Options
• Works for InputField
• Browser built-in
• Paste a single value
Drag’n’Drop
© 2012 SAP AG. All rights reserved. 13
Drag’n’Drop
match Drag:
- Drag Element
- DragSourceInfo
Drop: - Drop Element
- DropSourceInfo
© 2012 SAP AG. All rights reserved. 14
[BackUp] Drag’n’Drop: Supported Elements
Drag Elements Drop Elements
• Table & CTable: row(s)
• CTable: column header
• Tree: node/leaf
• Caption: caption or as drag handle
• Image: image or as drag handle
• ItemListBox: items
• Accordion: item
• Grid-/MatrixLayout: cell (requires drag
handle)
• Panel: Panel
• PanelStack: Panel
• Table & CTable: before/after/at rows
• CTable: before/after column header
• DropTargetCellEditor: at (C)Table cells
• Tree: before/after/at nodes & leaves
• DropTarget: at arbitrary elements
• ItemListBox: before/after items
• Accordion: before/after/at itema
• Grid-/MatrixLayout: before/after cell
• Panel: at Panel
• PanelStack: before/after/at Panel
HTML5 with HTML Islands
© 2012 SAP AG. All rights reserved. 16
HTML Islands: Overview
HTML
Island
Web Dynpro ABAP
Application
• Embedding HTML into a
Web Dynpro application
• Executing JavaScript from
Web Dynpro
• Sending data from context to client
• Use of 3rd party JS libraries possible
Note: Works only for Standards Mode
© 2012 SAP AG. All rights reserved. 17
HTML Islands: UI Element API
HTML Island
Properties
Context
Binding
Script and Style
Sources from
MIME
Repositories
staticHtml can also be
created via ABAP API IF_WD_HTML_WRITER
to ensure proper
escaping
© 2012 SAP AG. All rights reserved. 18
• Communication between Web Dynpro and HTML Island is done via JavaScript calls, that are created by: CL_WD_HTML_SCRIPT_CALL=>NEW_CALL( )
• That way we ensure a correct escaped JavaScript call
HTML Islands: Communication
org_chart.js ABAP Code
JavaScript Call
WD framework
generates
See Interface
Documentation
© 2012 SAP AG. All rights reserved. 19
HTML Islands: Communication
• Communication from HTML Island to Web Dynpro is done via a JavaScript callback reference,
which can be passed to the HTML Island
JavaScript ABAP
© 2012 SAP AG. All rights reserved. 20
HTML Islands: Life Cycle
Instantiation
• Show Web Dynpro View that
contains HTML Island
Runtime
• Interaction and communication
between Web Dynpro and HTML
Island (JavaScript calls)
• HTML Island stays „alive“ and keeps
its state,even if a roundtrip occurs or
it gets inivisible
Finalizing
• If Web Dynpro View component is
destroyed or HTML Island UI
element is removed, a registered
JavaScript call will be executed
• Clean up of JavaScript resources
© 2012 SAP AG. All rights reserved. 21
ABAP API CL_WD_HTML_WRITER can be used to generate HTML code
Correct escaping is ensured.
HTML Islands: HTML Writer API
ABAP Coding HTML Browser Output
contains
© 2012 SAP AG. All rights reserved. 22
HTML Integration Scenarios
HTMLIsland HTMLContainer IFrame
Use Case
Rich client side functionality
e.g. Charts
Add custom HTML from server;
Also around existing Web Dynpro
Controls
e.g. Custom Background Image,
Custom simple controls
Integration of content as isolated
document
Rendering
HTML to be produced on
Client Side; not touched by
WD framework
HTML to be produced on Server
Side; possibly re-rendered with each
roundtrip
Stable IFrame
Eventing JavaScript Event API for Web
Dynpro
JavaScript Event API for Web
Dynpro
JavaScript Portal Eventing
Embedding Within Web Dynpro DOM Within Web Dynpro DOM Isolated in IFrame
Outlook
© 2012 SAP AG. All rights reserved. 24
The new SAP NetWeaver Theming Tools
Planned Features
HTML5 based Theme Editor
Two views: „Quick Theming“ and “Expert Theming”
Supports Web Dynpro, SAPUI5, NWBC
Runs on WebAS ABAP, Portal and plain web servers
External editing (open source theme format) and custom CSS
possible
Migration of existing portal themes, CSS3 support
Theme Editor
(IE9+/Firefox/Safari/Chrome)
SAP Enterprise
Portal
HTTP Server
(WebDAV)
SAP WebAS ABAP
LESS
Format
UI Extension
Theme
Repository
Web Resource
Repository
HTTP/WebDAV
Load
SaveImport
Old Theme
Format
File System
Web Dynpro SAPUI5 NWBC
HTTP
© 2012 SAP AG. All rights reserved. 25
ABAP Development Tools for SAP NetWeaver Outlook – Web Dynpro ABAP Development Tools
Key Capabilities
WYSWYG UI Layout
Graphical context mapping
ABAP Code editor with code completion
and templates to code faster
Integrated debugging
More Information
ADT on SCN: http://scn.sap.com/community/abap/eclipse
ADT Trial Version: http://scn.sap.com/docs/DOC-29607
ADT on Youtube: http://youtu.be/BXg7xXrEAUw
Related Sessions
CD201: ADT Overview (1h)
CD164: ADT Hands-on (4h)
CD206: ADT SDK Preview (1h)
Web Dynpro ABAP Development Tools is planned to be available with ABAP in Eclipse in a future release
WYSIWYG UI Layout
© 2012 SAP AG. All rights reserved. 26
Web Dynpro ABAP Outlook – Web Dynpro ABAP Runtime
Planned Developments
• ARIA Accessibility Support
• SAPUI5 Integration
• Windows 8 support
Future Outlook
• Client Side Rendering and Progressive
Enhancements
• Optimized UIs for HANA
© 2012 SAP AG. All rights reserved. 27
Further Information
SAP Public Web
scn.sap.com/community/web-dynpro-abap, …/web-dynpro-abap/floorplan-manager
SAP Education and Certification Opportunities
www.sap.com/education
→ NET311 Advanced Web Dynpro for ABAP
→ NET313 Floorplan Manager for Web Dynpro ABAP
Watch SAP TechEd Online
www.sapteched.com/online
Related Sessions @ TechEd
CD167 : FPM Basics – From Feeder Classes to Live Applications (2h Hands-on)
CD268 : Adapting Floorplan Manager and Web Dynpro ABAP Based User Interfaces (2h Hands-On)
CD300 : FPM Basics – From Modeling to Applications (2h Lecture)
CD801 : SAP Browser Support and Strategy (Q&A Session)
TEC201: User Interface Strategy