Download - User Interface Strategy
User Interface Strategy
Thomas Jung– SAP NetWeaver Solution Management Rollout
Legal Disclaimer
The information in this document is confidential and proprietary to SAP and may not be disclosed without the permission of SAP. This presentation is not subject to your license agreement or any other service or subscription agreement with SAP. SAP has no obligation to pursue any course of business outlined in this document or any related presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation and SAP's strategy and possible future developments, products and or platforms directions and functionality are all subject to change and may be changed by SAP at any time for any reason without notice. The information on this document is not a commitment, promise or legal obligation to deliver any material, code or functionality. 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. This document is for informational purposes and may not be incorporated into a contract. SAP assumes no responsibility for errors or omissions in this document, except if such damages were caused by SAP intentionally or grossly negligent.
All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.
UI
Services
UI
Clients
UI
Infrastructure
UI
Services
UI
InfrastructurePortal Runtime
Visual
ComposerWeb Dynpro / FPM
/ CRM UI F
Roles PersonalizationNavigation
CollaborationDocument Page Building
…
Search
Mobile &
Voice
Duet &
Alloy
SAP GUI
UI Clients & Access Channels
Web BrowserDesktopAdobe Forms
Enterprise
Search Access
Web Dynpro
Islands
SAP NetWeaver Founation
SRMSCMPLMCRMERP
SAP Business SuiteNon SAP Enterprise
Application
Business UserExpert User
Enable
Enrich
Access
Three Dimensions of User Interaction -
Empowering and Connecting People
UI
Services
SAP NetWeaver UI
The Three Dimensions
UI
Clients Interactive
Forms
Business
ClientWD Islands
Ajax FWK
Page
Mobile
UI
InfrastructureWD ABAP
WD JavaVC /
WD4VC
Enrich
Access
Enable
© SAP 2009 / Page 3
Portal
Infrastructure
Personali-
zation
Web Page
Composer
Content / Knowledge
Mgmt.
Portal (Browser)
Wikis,
Forums
Web Dynpro AJAX Client Succeeds HTML Client
Web Dynpro AJAX Client
Drag&Drop, Suggestion, Page Rearrangement
Use of XMLHTTPRequestObject
Validation of Simple Data Types
Extensive Keyboard Support
hot keys, access keys, function keys
In-place editing, fluid animations
Enhanced client/server communication supporting
on-demand JavaScript
New Web Dynpro UI theme SAP Tradeshow Plus
New Lightspeed rendering engine with support for
inline CSS, JavaScript load on demand and other
performance enhancements
© SAP 2007 / Page 4
© SAP 2009 / Page 5
Lightspeed Rendering
Performance improvements by new “Lightspeed” rendering
Only stylesheet data and client scripting is loaded that really is required for the current screen
Reduction of client side rendering time leading to overall performance improvements
More stable rendering framework
Some changes in look and feel of existing applications (e.g. no paginator for tables any
longer)
Prerequisite for Signature design (WDTHEMEROOT=sap_tradeshow_plus)
New UI elements require Lightspeed
Switched on by default
UI Development on ABAP
© SAP 2009 / Page 6
UI development for SAP Business Applications and Extensions
Web Dynpro ABAP & Floor Plan Manager
Web Dynpro ABAP is the standard technology for new User Interfaces in the SAP Business Suite
CRM UI Framework for CRM only!
Deliver state-of-the-art Web 2.0 experience by including RIA and rich client technologies, where specific use
cases require higher interactivity
Declarative approach: Model-based configuration of applications with full live-cycle support
Accelerate UI standardization and harmonization through SAP’s unified rendering
Access to data in the local ABAP system via native ABAP coding
Targeting all types of ABAP developers to create new and enhance existing applications
CRM UI Framework (restricted use only!)
© SAP 2009 Page 7
Floorplan Manager
Easy and highly productive configuration of applications
The Floorplan Manager is the preferred and mandatory tool for the creation
of new Web Dynpro ABAP applications in the SAP Business Suite
Consistency across Web Dynpro ABAP
applications
Easy configuration of predefined building
blocks
Compliance with
all SAP User Interface guidelines
APIs provided for standard functionality
like event handling and dynamic behavior
Modification free
customers adaptations of Web Dynpro
applications
Full integration in standard SAP Lifecycle
Management
Available for customers: NW 7.0 EHP 1
© SAP 2008 / SAP TechEd 08 / COMP277 Page 8
OIF (Object Instance Floorplan)
Floorplan - provided by FPM
- only configuration
- dynamic behavior is possible
- no coding necessary
Content View- developed by application
- WD Abap coding
Content Area
Different UI Technologies &
FrameworksDynpro
Web Dynpro / FPM
CRM UI Framework
…
Different User Experience
The past …
SAP UI Harmonization Roadmap
Development perspective
Different UI Technologies and
Frameworks.
SAP Signature Design as
common denominator
Common look – first step to
common User Experience
2008
Different UI Technologies
Harmonized Development Env.
Unified UI Guidelines
Enhanced Interoperability
Common look & feel -Harmonized User Experience
2009 ++
UI Development on JAVA
© SAP 2007 / Page 10
UI development in open environments and enabling UI composition
Model-based, visual development
Highly productive UI development based on Model-View-Controller paradigm
Open and integrated toolset with full live-cycle support
Utilizing Java standards as well as SAP specific extensions
Targeting all types of developers – SAP, partners, ISVs and customers
Same tools build Web, Desktop, mobile, and embedded user interfaces
SAP Composition Environment 7.2 with major improvements in openness, Web 2.0 capabilities and productivity
Web Dynpro Java
Visual Composer /
Web Dynpro for VC
Java Server Faces
© SAP 2009 / Page 11
UI Design in Web Dynpro – Advantages and
Limitations
Dozens of UI elements provided, like buttons, checkboxes,
trees, or roadmaps, with specific properties and events
- Adding custom properties/events to existing elements or
adding custom UI elements is not possible
Perfect for most business requirements
Islands as supplements for Web Dynpro
, but maybe not for all.
Layout managers like Flow Layout or Matrix Layout for an easy
arrangement of UI elements
- No pixel perfect layout, no direct manipulation of
HTML/JavaScript
User interaction like F4 help or drag & drop
- Often roundtrips required, no RIA behavior
Web Dynpro Islands (ABAP & JAVA)
Breaking the rules of Web Dynpro
Utilize commonly accepted Web Standards as part of your
Web Dynpro application
Support rich user interaction with Controls
utilizing transition effects, drag & drop, sliders,
tooltips etc.
Available in ABAP and Java
SAP internal governance!
Fully integrated in SAP development environment and
lifecycle.
Supplement to traditional Web Dynpro programming
model – but NOT a replacement for Web Dynpro
Provide first class user interfaces
for each type of end-user
Web Dynpro Islands – Extend Web Dynpro to
match peculiar end-user needs
© SAP 2009 / Page 13
What Is an Island for Web Dynpro?
Data
interchange
possible
Regular programming model known for Web Dynpro
Web Dynpro
Island (displayed in plugin player)
© SAP 2009 / page 14
Island Technology
High Level Roadmap
Based on Adobe Flex / Flash components
Available with CE 7.1 EHP 1 (Java)
Available with NetWeaver 7.0 EHP 1 (ABAP)
Adobe Flash Islands
Based on Microsoft .NET components
Planned for NetWeaver 7.0 EHP 2 / 7.2 (ABAP & Java)
Microsoft Silverlight Islands
SAP internal use only!
Available with NetWeaver 7.0 EHP 1 (ABAP only)
Microsoft ActiveX Islands
Free HTML / Java-Script running inside Web Dynpro
In discussion for NetWeaver 7.2 (Java only)
Web Widgets (HTML Islands)
© SAP 2009 / Page 15
Points to Consider When Using Islands
Highly graphical, rich & responsive user interaction
More freedom and capabilities than native browser rendering
More development and maintenance effort will be needed
Specific UI programming skills needed for Adobe Flex or Silverlight (for control
developers only)
Debugging complexity increases
Meeting SAP accessibility and I18N standards is not automatic
Accessibility
Co-implementation of an alternative, e. g. based on Web Dynpro native
Internationalization
Provide translated texts on the server side and transport them to the client
Performance
Avoid using more than 3 Adobe Flash Islands on the screen
Avoid data aggregation on client side
Provide suitable paging of data
© SAP 2009 / Page 16
Points to Consider When Using Islands (cont’d)
Some standard Web Dynpro features are not provided and must be added
Value help and field help (can be implemented as usual outside the island, however)
Configuration and personalization
Users might realize that two different technologies are at work
Different styles
RIAs (Rich Internet Applications) behave differently from SSR (Server Side Rendering)
applications
Two development infrastructures are required
IDE not integrated into SE80
SAP versioning and transport mechanisms not before upload of application into MIME
Repository (yet, there is an SAP internal build service based on NWDI)
Application Clients
Access your application over different channels
© SAP 2007 / Page 17
Targeting professional user
Accelerated desktop integration
Deep SAPGUI /Dynpro integration
SAP Signature branding and interaction model
Desktop client
Targeting occasional user
Zero footprint – browser based
Simplified navigation and application screens
SAP Signature branding and interaction model
Web client
SAP NetWeaver Business Client
Overview
SAP NetWeaver Business Client for the Business Suite
Shipped with SAP ERP 6.0 EHP2
Tabbed browser-based client supporting SAP GUI integration
SAP NetWeaver Business Client for Business ByDesign
Shipped with SAP Business ByDesign
Multi-window-based with a new smart client rendering engine
for Web Dynpro applications
SAP NetWeaver Business Client
Planned shipment with SAP NetWeaver 7.0 EhP2 and SAP NetWeaver 7.2
Multi-window-based with a smart client rendering engine for Web
Dynpro applications and support of SAP GUI integration
Motivation for Development of Web Dynpro
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
Web Dynpro
Rendering
Engine
Rendering
Engine
Rendering
Engine
Web
Browser
Smart
Clientother?
???
???
http://.....
XML, deltahttp://.....
HTML, JS
Meta Data<xml>
<wd:xxx>
</xml>
Key Take Aways
SAP provides both web clients and desktop clients to boost
user productivity depending on use case and scenario
Openess towards partners and standards allow for the
flexible extension in a customer environment
Intuitive user interfaces allow for the delegation to
business users for content creation and adaptation
An excellent user experience is the key focus for the UI roadmap
Further Information
SAP Public Web:
SAP Developer Network (SDN):
https://www.sdn.sap.com/irj/sdn/nw-userproductivity
https://www.sdn.sap.com/irj/sdn/nw-ui
https://www.sdn.sap.com/irj/sdn/nw-portalandcollaboration
© SAP 2008 / 21
Questions?