[ HTML5 for Lightweight SAP Applications Stefan Beck, SAP AG
[ Learning Points Understand what HTML5 is about Understand how SAP leverages HTML5 Learn where and when SAPUI5 will be available Learn when to use SAPUI5 (compared e.g. to Web Dynpro) 2
[ Agenda Introduction into HTML5 The UI Development Toolkit for HTML5 What comes next Introduction to inner source Demo 3
Introduction into HTML5
[ Introduction into HTML5 What makes the difference Integrated Multimedia support Native Video and Audio support Graphics and Charts Vector Graphics directly in the Browser (SVG Tag) Creation of Pixel Perfect Bitmaps (Canvas Tag) New JavaScript APIs Web SQL Database & Web Storage Web Workers (multithreading) WebGL (hardware-accelerated 3D graphics!) Openness ARIA (accessibility) OpenAJAX (interoperability) Drastic performance Improvements with JIT JavaScript compilation
[ Introduction into HTML5 Design and Layout Cascading Style Sheets Clear separation of structure and layout design changes without changing the document structure CSS3 Huge amount of new styling capabilities Rounded corners, shadow effects, color gradients Common styling tasks are possible without using images Rotation and 3D perspective Animated transitions many more (250 properties)
[ Introduction into HTML5 Browser Situation IE6 and IE7 Functional gap to HTML5 is too big for support in a meaningful way IE8 Does not support HTML5 and CSS3, workarounds are envisioned Does not have JIT JavaScript nor new JS APIs Latest versions of Safari, Firefox, Chrome, Opera, IE9. All of them Comply with most HTML5 features Comply with most CSS3 features Have JIT JavaScript Implement new JavaScript APIs
The UI Development Toolkit for HTML5
[ UI Development Toolkit for HTML5 Overview Any Screen on any Device Native, device-specific Views and Screens Beautiful and interactive UI`s Huge amount of predefined modern UI Controls Interactive and integrated Business Graphics Pixel Perfect Design Application and Control Development Environment Standards and Openness Based on Open Source framework(s) and Web Standards SAP Product Standards compliance Adaption and Flexibility Theming and Branding framework Extensibility concepts for custom controls
[ UI Development Toolkit for HTML5 the Details IDE Homogeneous Set of Eclipse Tools and Editors Small learning curve for web developer Efficient Control-Development UI Screen & Application development Planned HTML(5) templates WYSIWYG Designer
[ UI Development Toolkit for HTML5 the Details Theming General: Based on Cascading Style Sheets (CSS) Separate CSS file per Control in the design time Merge of the CSS files via generation Optional compression/optimization Automatic Right-to-left generation (for RTL-languages) One CSS file per control library (library.css) Themes delivered with UI5: Gold Reflection High Contrast Black legacy SAP Themes supported The UI5 framework enables theme switch at runtime
[ UI Development Toolkit for HTML5 the Details Extensibility and Data Binding Extensibility: Custom JavaScript, HTML and CSS Custom JavaScript libraries Extensions of existing SAP HTML5 controls New UI Libraries New UI Controls Data Binding with following Built-in Models JSON Model Data in JavaScript Object Notation Format Two way Binding XML Model XML data Two way Binding OData Model OData compliant data Creates OData requests and handles OData responses Inner-source concept for SAP development teams for fast adaption and control development
[ SAP UI Development Toolkit for HTML5 Chart examples
[ SAP UI Development Toolkit for HTML5 Application examples
[ SAP UI Development Toolkit for HTML5 Main usage scenarios: HTML5 OData Gateway
What comes next
[ What comes next Important Milestones: February: Kickoff Beta Program and Development Center Q2/2012: First GA release planed (based on SAP NetWeaver Neo*/JPaaS) Q3/2012: First releases planned on NetWeaver Java 7.3 and as ABAP add-on Q4/2012: First release planned on HANA XS SP05 Release independent and quarterly delivery (internal dates): March 2012: SAPUI5 version 1.4 (suited for GA) July 2012: SAPUI5 version 1.6 (adopted by Business Suite) Oct 2012: SAPUI5 version 1.8 (native mobile support) * no official name, naming currently in definition
Introduction to inner source
[ UI Development Toolkit for HTML5 inner source Apply mechanisms from open source communities within an enterprise Overcome a bottleneck situation in a central team It leverages the innovation power of the whole company It leads to better quality, better documentation and other benefits which usually are perceived as qualities of open source It increases the acceptance of SAPUI5. People can contribute and influence instead of just complaining It could be a first step towards really becoming open source inner
[ Key Learnings HTML5 is a specification for building highly interactive and flexible UI`s SAPUI5 bundles a UI Control Library and Tooling for building and adapting UIs SAPUI5 will be available, bundled with several platforms and products in Q2 SAPUI5 mainly addresses intuitive analytical or light editing applications that are used cross devices
Demo
[ Further information SAPUI5 Beta (Development Center) http://www.sdn.sap.com/irj/sdn/index?rid=/webcontent/uuid/20a34ae7-762d- 2f10-c994-db2e898d5f70 Directly contact Michael Falk ( michael.falk@sap.com )
[ Best Practices Inner Source? Next year I ll be able to tell you 24
[ ] Thank you for participating. Please remember to complete and return your evaluation form following this session. For ongoing education on this area of focus, visit the Year-Round Community page at www.asug.com/yrc [ 0807 HTML5 for Lightweight SAP Applications 25