CD266 - Highlights and Latest Features of Web Dynpro for ABAP

7/16/2019 CD266 - Highlights and Latest Features of Web Dynpro for ABAP

http://slidepdf.com/reader/full/cd266-highlights-and-latest-features-of-web-dynpro-for-abap 1/29

Hans-Dieter Geyer, Klaus Keller, Michael Cuntz, Uwe Klinger

October, 2012

CD266

Highlights and Latest Features of Web Dynpro for ABAP



© 2012 SAP AG. All rights reserved.

Disclaimer

This presentation outlines our general product direction and should not be relied on

purchase decision. This presentation is not subject to your license agreement or anywith SAP. SAP has no obligation to pursue any course of business outlined in this pr

develop or release any functionality mentioned in this presentation. This presentation

strategy and possible future developments are subject to change and may be chang

time for any reason without notice. This document is provided without a warranty of a

express or implied, including but not limited to, the implied warranties of merchantab

particular purpose, or non-infringement. SAP assumes no responsibility for errors or

document, except if such damages were caused by SAP intentionally or grossly neg




- Introduction

- Highlights of NetWeaver 7.0 EhP2 and EhP3

- Copy‟n‟Paste from Excel

- Drag‟n‟Drop

- HTML5 with HTML Islands

- Outlook

Agenda

EX

EX

EX



Introduction


http://slidepdf.com/reader/full/cd266-highlights-and-latest-features-of-web-dynpro-for-abap 5/29© 2012 SAP AG. All rights reserved.

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



SAP NetWeaver Application Server ABAPEmpowering 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 produ

HANA

MOBILITY

SAP NetWeaver in 2013

SAP NetWeaver

Application

Server ABAP



Highlights of NetWeaver 7.0 EhP

and EhP 3**

* used by Suite 7 EhP5 **



New Features NetWeaver EhP2 and EhP3 (Link)

NetWeaver 7.0 EhP2 NetWeaver 7.0 Eh

• Value Suggest

• Accordion

• FormLayout

• IconButton

• PanelStack/Panel

• TableMultiEditorCell

• SilverlightIsland

• Drag„n„Drop for MatrixLayout

• Delta Rendering enabled

• Enhancement of Configurat

• CTable

• LayoutContainer

• Input History

• Quick Views

• Copy ‘n’ paste from Excel

• Corbu Theme (SP04)

• HTML Standards Mode (S

• HTML Island (SP05)

http://help.sap.com/saphelp_nw70ehp3/helpdata/en/5b/8c3842bb58f83ae10000000a1550b0/frameset.htm

http://help.sap.com/saphelp_nw70ehp3/helpdata/en/5b/8c3842bb58f83ae10000000a1550b0/frameset.htm



Copy’n’Paste from Excel



Assig

Copy’n’Paste from Excel – MultiValuePaste

1. Select data in Excel

2. Copy to clipboard (Ctrl+C)

Paste (Ctrl+V)

„T




Copy’n’Paste from Excel – Types

Generic paste for Tables MultiValuePaste Standard

• 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

• Browser b

• Paste a s



Drag’n’Drop




Drag’n’Drop

matchDrag:

- Drag Element

- DragSourceInfo

Dr- Drop Elem

- DropSour




[BackUp] Drag’n’Drop: Supported Elements

Drag Elements Drop Element

• 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/aft

• CTable: before/after colum

• DropTargetCellEditor: at (C

• Tree: before/after/at nodes

• DropTarget: at arbitrary ele

• ItemListBox: before/after ite• Accordion: before/after/at i

• Grid-/MatrixLayout: before/

• Panel: at Panel

• PanelStack: before/after/at



HTML5 with HTML Islands




HTML Islands: Overview

Web Dynpro ABAP

Application

• Embedding HTML into a

Web Dynpro application

• Executing JavaScript fromWeb Dynpro

• Sending data from context to client

• Use of 3rd party JS libraries possible

Note: Works only for Standards Mode




HTML Islands: UI Element API

Script and Style

Sources from

MIME

Repositories




• Communication between Web Dynpro and HTML Island is done via JavaScript ccreated 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




HTML Islands: Communication

• Communication from HTML Island to Web Dynpro is done via a JavaScript callb

which can be passed to the HTML IslandJavaScript




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 Dynp

destroyed or

element is re

JavaScript c

• Clean up of




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

contains




HTML Integration Scenarios

HTMLIsland HTMLContainer

Use Case Rich client side functionalitye.g. Charts

Add custom HTML from server; Also around existing Web Dynpro

Controls

e.g. Custom Background Image,

Custom simple controls

Integration 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 IFram

Eventing JavaScript Event API for Web

Dynpro

JavaScript Event API for Web

Dynpro

JavaScript

Embedding Within Web Dynpro DOM Within Web Dynpro DOM Isolated in I



Outlook




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 supportTheme Editor

(IE9+/Firefox/Safari/Chrom

SAP Enterprise

Portal

SAP WebAS ABAP

UI Extension

Theme

Repository

Web Resource

Repository

HTTP/WebD

Import

Old Theme

Format

Web Dynpro SAPUI5

HTTP

ABAP D l T l f SAP N W




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

W b D ABAP

http://scn.sap.com/community/abap/eclipse

http://scn.sap.com/docs/DOC-29607

http://youtu.be/BXg7xXrEAUw

http://youtu.be/BXg7xXrEAUw




http://scn.sap.com/community/abap/eclipse




Web Dynpro ABAPOutlook – 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




Further Information

SAP Public Web

scn.sap.com/community/web-dynpro-abap, …/web-dynpro-abap/floorplan-managSAP 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 Interfac

CD300 : FPM Basics – From Modeling to Applications (2h Lecture)

CD801 : SAP Browser Support and Strategy (Q&A Session)

TEC201: User Interface Strategy

http://scn.sap.com/community/web-dynpro-abap

http://scn.sap.com/community/web-dynpro-abap/floorplan-manager


http://www.sap.com/education

http://www.sapteched.com/online

http://www.sapteched.com/online

http://www.sap.com/education




















FeedbackPlease complete your session evaluation for CD266.

Thanks for attending this SAP TechEd s




No part of this publication may be reproduced or transmitted in any form or for any purpose without the express

permission of SAP AG. The information contained herein may be changed without prior notice.

Some software products marketed by SAP AG and its distributors contain proprietary software components of

other software vendors.Microsoft, Windows, Excel, Outlook, PowerPoint, Silverlight, and Visual Studio are registered trademarks of

Microsoft Corporation.

IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System

z10, z10, z/VM, z/OS, OS/390, zEnterprise, PowerVM, Power Architecture, Power Systems, POWER7,

POWER6+, POWER6, POWER, PowerHA, pureScale, PowerPC, BladeCenter, System Storage, Storwize,

XIV, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, AIX, Intelligent Miner, WebSphere,

Tivoli, Informix, and Smarter Planet are trademarks or registered trademarks of IBM Corporation.

Linux is the registered trademark of Linus Torvalds in the United States and other countries.

Adobe, the Adobe logo, Acrobat, PostScript, and Reader are trademarks or registered trademarks of Adobe

Systems Incorporated in the United States and other countries.

Oracle and Java are registered trademarks of Oracle and its affiliates.

UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.

Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or

registered trademarks of Citrix Systems Inc.

HTML, XML, XHTML, and W3C are trademarks or registered trademarks of W 3C®, World Wide Web

Consortium, Massachusetts Institute of Technology.

Apple, App Store, iBooks, iPad, iPhone, iPhoto, iPod, iTunes, Multi-Touch, Objective-C, Retina, Safari, Siri,

and Xcode are trademarks or registered trademarks of Apple Inc.

IOS is a registered trademark of Cisco Systems Inc.

RIM, BlackBerry, BBM, BlackBerry Curve, BlackBerry Bold, BlackBerry Pearl, BlackBerry Torch, BlackBerry

Storm, BlackBerry Storm2, BlackBerry PlayBook, and BlackBerry App World are trademarks or registered

trademarks of Research in Motion Limited.


Google App Engine, Google Apps, Google Checkout, Google Data AP

Google Mobile Updater, Google Mobile, Google Store, Google Sync, G

Google Mail, Gmail, YouTube, Dalvik and Android are trademarks or re

INTERMEC is a registered trademark of Intermec Technologies CorpoWi-Fi is a registered trademark of Wi-Fi Alliance.

Bluetooth is a registered trademark of Bluetooth SIG Inc.

Motorola is a registered trademark of Motorola Trademark Holdings LL

Computop is a registered trademark of Computop Wirtschaftsinformat

SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP Busin

SAP HANA, and other SAP products and services mentioned herein a

trademarks or registered trademarks of SAP AG in Germany and othe

Business Objects and the Business Objects logo, BusinessObjects, C

Intelligence, Xcelsius, and other Business Objects products and servic

respective logos are trademarks or registered trademarks of Business

is an SAP company.

Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL Anywherementioned herein as well as their respective logos are trademarks or r

Sybase is an SAP company.

Crossgate, m@gic EDDY, B2B 360°, and B2B 360° Services are re

in Germany and other countries. Crossgate is an SAP company.

All other product and service names mentioned are the trademarks of

contained in this document serves informational purposes only. Nation

The information in this document is proprietary to SAP. No part of this

or transmitted in any form or for any purpose without the express prior

CD266 - Highlights and Latest Features of Web Dynpro for ABAP

Documents

Transcript of CD266 - Highlights and Latest Features of Web Dynpro for ABAP