Sapx05 en Col95 Fv Show

SAPX05<Course Number and Course Title ABC123 Overiew> SAP SAPUI5 User Experience Development SAP SAPGUI5 Training System: Windows 2008 R2, with latest SAP SAPUI5 Instructor Handbook Collection 95 © 2014 SAP AG. All rights reserved. 1 © 2014 SAP AG. All rights reserved. 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. Apache Maven, Maven, Apache, the Apache feather logo, and the Apache Maven project logos are trademarks of The Apache Software Foundation. This course is not designed to teach candidates MAVEN technology. Existing knowledge of MAVEN is a pre-requisite. 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 W3C®, 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. Google App Engine, Google Apps, Google Checkout, Google Data API, Google Maps, Google Mobile Ads, Google Mobile Updater, Google Mobile, Google Store, Google Sync, Google Updater, Google Voice, Google Mail, Gmail, YouTube, Dalvik and Android are trademarks or registered trademarks of Google Inc. INTERMEC is a registered trademark of Intermec Technologies Corporation. Wi-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 LLC. Computop is a registered trademark of Computop Wirtschaftsinformatik GmbH. SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP BusinessObjects Explorer, StreamWork, SAP HANA, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries. Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects Software Ltd. Business Objects is an SAP company. Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL Anywhere, and other Sybase products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Sybase Inc. Sybase is an SAP company. Crossgate, m@gic EDDY, B2B 360°, and B2B 360° Services are registered trademarks of Crossgate AG in Germany and other countries. Crossgate is an SAP company. All other product and service names mentioned are the trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary. The information in this document is proprietary to SAP. No part of this document may be reproduced, copied, or transmitted in any form or for any purpose without the express prior written permission of SAP AG. 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. © 2014 SAP AG. All rights reserved. 2 © 2014 SAP AG. Alle Rechte vorbehalten. Weitergabe und Vervielfältigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer, ohne die ausdrückliche schriftliche Genehmigung durch SAP AG nicht gestattet. In dieser Publikation enthaltene Informationen können ohne vorherige Ankündigung geändert werden. Google App Engine, Google Apps, Google Checkout, Google Data API, Google Maps, Google Mobile Ads, Google Mobile Updater, Google Mobile, Google Store, Google Sync, Google Updater, Google Voice, Google Mail, Gmail, YouTube, Dalvik und Android sind Marken oder eingetragene Marken von Google Inc. Die von SAP AG oder deren Vertriebsfirmen angebotenen Softwareprodukte können Softwarekomponenten auch anderer Softwarehersteller enthalten. INTERMEC ist eine eingetragene Marke der Intermec Technologies Corporation. Microsoft, Windows, Excel, Outlook, PowerPoint, Silverlight und Visual Studio sind eingetragene Marken der Microsoft Corporation. Bluetooth ist eine eingetragene Marke von Bluetooth SIG Inc. Apache Maven, Maven, Apache, the Apache feather logo, and the Apache Maven project logos sind eingetragene Marken der Apache Software Foundation. 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 und Smarter Planet sind Marken oder eingetragene Marken der IBM Corporation. Linux ist eine eingetragene Marke von Linus Torvalds in den USA und anderen Ländern. Adobe, das Adobe-Logo, Acrobat, PostScript und Reader sind Marken oder eingetragene Marken von Adobe Systems Incorporated in den USA und/oder anderen Ländern. Oracle und Java sind eingetragene Marken von Oracle und/oder ihrer Tochtergesellschaften. UNIX, X/Open, OSF/1 und Motif sind eingetragene Marken der Open Group. Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame und MultiWin sind Marken oder eingetragene Marken von Citrix Systems, Inc. HTML, XML, XHTML und W3C sind Marken oder eingetragene Marken des W3C®, World Wide Web Consortium, Massachusetts Institute of Technology. Apple, App Store, iBooks, iPad, iPhone, iPhoto, iPod, iTunes, Multi-Touch, Objective-C, Retina, Safari, Siri und Xcode sind Marken oder eingetragene Marken der Apple Inc. IOS ist eine eingetragene Marke von Cisco Systems Inc. RIM, BlackBerry, BBM, BlackBerry Curve, BlackBerry Bold, BlackBerry Pearl, BlackBerry Torch, BlackBerry Storm, BlackBerry Storm2, BlackBerry PlayBook und BlackBerry App World sind Marken oder eingetragene Marken von Research in Motion Limited. © 2014 SAP AG. All rights reserved. Wi-Fi ist eine eingetragene Marke der Wi-Fi Alliance. Motorola ist eine eingetragene Marke von Motorola Trademark Holdings, LLC. Computop ist eine eingetragene Marke der Computop Wirtschaftsinformatik GmbH. SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP BusinessObjects Explorer, StreamWork, SAP HANA und weitere im Text erwähnte SAP-Produkte und -Dienstleistungen sowie die entsprechenden Logos sind Marken oder eingetragene Marken der SAP AG in Deutschland und anderen Ländern. Business Objects und das Business-Objects-Logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius und andere im Text erwähnte BusinessObjects-Produkte und Dienstleistungen sowie die entsprechenden Logos sind Marken oder eingetragene Marken der Business Objects Software Ltd. Business Objects ist ein Unternehmen der SAP AG. Sybase und Adaptive Server, iAnywhere, Sybase 365, SQL Anywhere und weitere im Text erwähnte Sybase-Produkte und -Dienstleistungen sowie die entsprechenden Logos sind Marken oder eingetragene Marken der Sybase Inc. Sybase ist ein Unternehmen der SAP AG. Crossgate, m@gic EDDY, B2B 360°, B2B 360° Services sind eingetragene Marken der Crossgate AG in Deutschland und anderen Ländern. Crossgate ist ein Unternehmen der SAP AG. Alle anderen Namen von Produkten und Dienstleistungen sind Marken der jeweiligen Firmen. Die Angaben im Text sind unverbindlich und dienen lediglich zu Informationszwecken. Produkte können länderspezifische Unterschiede aufweisen. Die in dieser Publikation enthaltene Information ist Eigentum der SAP. Weitergabe und Vervielfältigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer, nur mit ausdrücklicher schriftlicher Genehmigung durch SAP AG gestattet. 3 Course Topics  This course covers: • • • • • • • • • • • • • • • • SAP User Experience Design Strategy Overview SAPUI5 Overview SAP UI Development Toolkit for HTML5 Programming Applications SAPUI5 Developer Studio Creating a SAPUI5 Project Model – View – Controller Databinding & Databinding - OData Resource Handling / Localization Notepad Controls Components Extending SAPUI5 Styling & Theming CVOM Charts SAPUI5 Mobile Optimizing SAPUI5 © 2014 SAP AG. All rights reserved. 4 Course Description • This course is designed to give participants the opportunity to gain an understanding of SAP SAPUI5 and how it pertains to SAP User Experience strategy • Participants will learn how to program applications using SAPUI5 by creating a new project in Eclipse • Additional topics in this course include: Model – View – Controller; Databinding; Databinding – oData; Resource Handling / Localization; Notepad Controls; Components; Extending SAPUI5; Styling & Theming; CVOM Charts; SAPUI5 Mobile; Optimizing SAPUI5 • There will be hands-on exercises performed during the course to gain experience with SAP SAPUI5 so as to prepare the participant for projects © 2014 SAP AG. All rights reserved. 5 Course Goals This course will prepare you to: • Understand SAP’s User Experience strategy • Understand and use the SAPUI5 APIs • Create applications for mobile using SAP’s SAPUI5 framework © 2014 SAP AG. 6 . All rights reserved. you will be able to: • Understand SAP’s User Experience strategy • Understand and use the SAPUI5 APIs • Create applications for mobile using SAP’s SAPUI5 framework © 2014 SAP AG. 7 . All rights reserved.Course Objectives After completing this course. All rights reserved. 8 .Course Prerequisites Required Knowledge (Essential) • • SAPX04 Basic understanding of JavaScript and HTML5 Recommended Familiarity with Object-oriented programming • General understanding of SAP’s User Experience strategy • © 2014 SAP AG. 9 . All rights reserved.Target Audience & Course Duration This course is intended for the following audiences: • • Developer Technology Consultant Duration: 3 days © 2014 SAP AG. All rights reserved. 10 .Course Content Content: Unit 1 – SAP SAPUI5 Components and Overview Unit 2 – SAP SAPUI5 Development © 2014 SAP AG. 11 .Recommended Course Outline and Schedule Preface Day 1: Welcome & Introductions UNIT 1 – SAP SAPUI5 Components and Overview • Lesson 1: SAP SAPUI5 Components and Overview Unit 2 – SAP SAPUI5 Development • Lesson 2: SAPUI5 Developer Studio • Lesson 3: Programming Applications • Lesson 4: UI Controls and MVC • And associated lab exercises… © 2014 SAP AG. All rights reserved. Course Outline and Schedule Preface Day 2: Unit 2 – SAP SAPUI5 Development (Continued) • Lesson 5: Databinding and Databinding . 12 . All rights reserved.OData • Lesson 6: Resource Handling • And associated lab exercises… © 2014 SAP AG. All rights reserved. Theming and CVOM Charts • Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files • And associated lab exercises… © 2014 SAP AG. 13 .Course Outline and Schedule Preface Day 3: Unit 2 – SAP SAPUI5 Development (Continued) • Lesson 7: Modularization • Lesson 8: Localization • Lesson 9: Notepad Controls • Lesson 10: Components • Lesson 11: Extending SAPUI5 • Lesson 12: Styling. UNIT 1 SAP SAPUI5 Components and Overview . 15 . you will be able to: • Describe SAP SAPUI5 architecture. components and solution © 2014 SAP AG.Unit 1 – SAP SAPUI5 Architecture and Overview: Unit Objectives After completing this unit. All rights reserved. All rights reserved. 16 .Unit 1 – SAP SAPUI5 Components and Overview: Unit Lessons SAP SAPUI5 Components and Overview Lesson 1: SAP SAPUI5 Components and Overview © 2014 SAP AG. 17 . All rights reserved. you will be able to: Understand SAP’s User Experience strategy • Describe SAP SAPUI5 architecture and components • Provide an overview of the solution • © 2014 SAP AG.Lesson Objectives After completing this lesson. Introduction to SAP User experience Strategy . DESIGN INNOVATION Technology (feasibility) 19 .How to Achieve Design Innovation? Human Values (usability. All rights reserved. desirability) Business (viability) © 2014 SAP AG. 20 . intuitive. and mobile experience.The World is Changing… Consumer user experience is the new standard for enterprise applications … Transform the enterprise experience Complex and feature-rich experience must be replaced by a simple. © 2014 SAP AG. All rights reserved. 21 .SAP User Experience Vision and Mission Vision Provide the leading user experience for business applications Mission Deliver attractive applications that make people successful at work © 2014 SAP AG. All rights reserved. SAP Top use scenarios Fiori Core use Renovation scenarios (SAPUI5) RENEW Enablement Tools Specific (SAPUI5customer & Screen value Personas) use scenarios ENABLE 22 . All rights reserved.SAP User Experience Strategy Existing Applications Usage/Reach New Applications NEW © 2014 SAP AG. SAP User Experience Strategy NEW RENEW ENABLE UX DESIGN SERVICES © 2014 SAP AG. 23 . All rights reserved. All rights reserved. 24 .SAP User Experience Strategy NEW RENEW ENABLE UX DESIGN SERVICES © 2014 SAP AG. Have you seen these consumer apps from SAP? Recalls Plus © 2014 SAP AG. All rights reserved. PhotoTribe Fan Experience MyRunway 25 . SAP Customer Engagement Intelligence 26 .Provide Consumer-Grade UX for NEW Applications SAP Fraud Management © 2014 SAP AG. All rights reserved. SAP User Experience Strategy NEW RENEW ENABLE UX DESIGN SERVICES © 2014 SAP AG. All rights reserved. 27 . All rights reserved.SAP Fiori – Keep Simple Things Simple © 2014 SAP AG. 28 . 1 use case. versions. 29 . devices. 3 screens) Apps that speak the same language Low barrier to adoption © 2014 SAP AG.SAP User Experience Design Principles Role-based Responsive Simple Coherent Instant Value De-compose into task-based experience All sizes. All rights reserved. channels 1-1-3 (1 user. 30 . All rights reserved.SAP User Experience Strategy NEW RENEW ENABLE UX DESIGN SERVICES © 2014 SAP AG. All rights reserved.ENABLE customer specific value scenarios Example: SAP Screen Personas for SAP GUI • Allows ‘Do-it-Yourself’ to your specific needs © 2014 SAP AG. 31 . All rights reserved. SAPUI5 Application Development Tools 32 .Key Enablement Tools SAP Screen Personas Floorplan Manager (for SAP GUI screens) (for FPM screens*) NWBC & Side Panel Theme Designer (all screens) (all screens) © 2014 SAP AG. SAP Key UI Tools & Technologies (Big Picture) UI Theme Designer SAP NetWeaver Portal UI Clients SAP NetWeaver Business Client SAP GUI SAPUI5 Application Development Tools UI Tools Flexible UI Designer SAPUI5 WebDynpro ABAP/ Floorplan Manager * SAP Screen Personas DYNPRO UI Technologies GATEWAY Backend * Harmonized in Run & Design Time with WebUIF © 2014 SAP AG. All rights reserved. 33 . All rights reserved. $ 34 .Why focus on User Experience? Great User Experience • UX impacts Business Value Gain productivity Increase user adoption Decrease user errors Save training costs © 2014 SAP AG. All rights reserved. 35 .Observations from 70+ Customer Engagements    Several UX issues could be solved with existing SAP tools IT organizations need to better understand the needs of their end users End users perceive custom built screens as SAP Screens © 2014 SAP AG. SAPUI5 Overview. Architecture and Components . SAP UI Development Toolkit for HTML5 • SAP UI Development Toolkit for HTML5 o The official long name • SAPUI5 o The short name © 2014 SAP AG. All rights reserved. 37 . HTML 5. Using and including the popular jQuery library © 2014 SAP AG. CSS. 38 .Main UI5 Characteristics • SAPUI5 is an extensible JavaScript-based HTML5 browser rendering library for Business Applications – – – – – – – Well-designed API. All rights reserved. JavaScript. etc. SAP product standard compliant Powerful theming support based on CSS Provides Ajax capabilities Based on open standards like OpenAjax. easy to consume and use Extensible UI component model. including tooling support High performance. JavaScript files) Server side (optional)     Application development tools in Eclipse Control development tools in Eclipse Resource handler in Java and ABAP Theming generator © 2014 SAP AG. CSS and image files)  Core (JavaScript files)  Test suite (HTML. 39 .UI5 Key Components Client side  Control libraries (JavaScript. All rights reserved. etc.UI5 Browser Support Internet Explorer Firefox Chrome Safari Version 8 and upwards Version 10 and upwards Version 10 ESR and upwards Version 1 and upwards Version 3 and upwards (with limitations)* *Internet Explorer 8 is supported with graceful degradation for CSS3 features like rounded corners. text-shadows. 40 . All rights reserved. © 2014 SAP AG. 5.g. 1. e. Release track  Identified by a major and an even minor version number. 41 .1  The versions of this track are released internally and are not meant to be used in products shipped to customers. e. Only these versions are allowed to be used in production.1  The versions of this track are released externally. 1. All rights reserved.UI5 Release Plan Development track  Identified by a major and an odd minor version number.4.g. © 2014 SAP AG. All rights reserved. 42 .UI5 Architecture Overview © 2014 SAP AG. • • Event Resources Device Utils SAP jQuery Plug-ins Controls Themes Logger • Less (less.js) the dynamic style language Code minimizer jQuery (Static) Web Server © 2014 SAP AG. All rights reserved.SAPUI 5 Architecture Overview Themes SAPUI5 Libraries Controls Data Binding • Core JavaScript framework including jQuery • Extension libraries Desktop Mobile • • jQuery.UI Render Manager UI SAPUI5 Core Optional server component Desktop Mobile Control Base • „Helper“ assets like e. Resource Handler (optional) 43 .g. commons sap.ux3 Includes “bread and butter" controls like TextField. mainly available in “Gold Reflection” design. All rights reserved.table sap. like sap.ui. e. 44 .m Includes the Table control Includes controls for mobile devices And more. Button Includes UX3 patterns.g.UI5 Control Libraries sap.: Shell sap.ui.ui.viz. sap.dev … © 2014 SAP AG.ui. All rights reserved. © 2014 SAP AG. 45 . HTML and CSS into UI5 based pages  Include other JavaScript libraries where UI5 is lacking controls or functionality  Create composite controls from existing UI5 controls  Write new UI libraries and new controls  Write plug-ins for the UI5 core  This way UI5 development groups should not become a bottleneck for application groups in need of a certain functionality.UI5 and Extensibility UI5 allows application developers to  Include their own JavaScript. All rights reserved. UI5 Tools support and question channels • SAPUI5 Tools Community • CSN Component: • CA-UI5-TOL (UI5 Tools) 46 .UI5 Knowledge and Test Resources Documentation and Information UI5 support and question channels • UI5 Wiki • SAPUI5 Community • UI5 Mobile Wiki • CSN Component: • UI5 Tools Wiki • CA-UI5 (UI5 Runtime) • Demokit • CA-UI5-MOB (UI5 Mobile Lib) • API Documentation • General UI5 Documentation Control and code testing • Test Suite © 2014 SAP AG. All rights reserved. 47 .UI5 Application Example • Showcase of SAP Applications built with UI5 © 2014 SAP AG. How to get UI5 running • UI5 mainly consists of JavaScript. All rights reserved. 48 . CSS and image files that run in a browser. • These options are available for referencing the UI5 runtime files: – Runtime libraries (wars and jars) – SDK © 2014 SAP AG. • Apart from this main offering – the runtime files – UI5 has many more optional pieces of software: – Runtime documentation – Eclipse development tools – Sample apps • In order to get UI5 running on a web page. the UI5 resources need to be loaded by the browser. 49 . All rights reserved. you should now be able to: • Describe SAP SAPUI5 architecture and components © 2014 SAP AG.Unit Summary After completing this unit. UNIT 2 SAP SAPUI5 Development . 51 . you will be able to: • Develop applications using SAP © 2014 SAP AG. All rights reserved.Unit 1 – SAP SAPUI5 Development: Unit Objectives After completing this unit. Unit 2 – SAP SAPUI5 Development: Unit Lessons SAP SAPUI5 Components and Overview Lesson 2: SAPUI5 Developer Studio Lesson 3: Programming Applications Lesson 4: UI Controls and MVC Lesson 5: Databinding and Databinding . Theming and CVOM Charts Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files © 2014 SAP AG. 52 .OData Lesson 6: Resource Handling Lesson 7: Modularization Lesson 8: Localization Lesson 9: Notepad Controls Lesson 10: Components Lesson 11: Extending SAPUI5 Lesson 12: Styling. All rights reserved. enter the workspace N/workspace and tick the check box Use this as the default and do not ask again. • When the Workspace Launcher dialog window appears.Exercise: Lab Environment Setup 1 • Launch Eclipse from Start  All Programs  eclipse  eclipse. All rights reserved. • If you change your default project location. © 2014 SAP AG. make a note of it. 53 . select General  Existing Projects into Workspace and then choose Next.Lab Environment Setup 2 • Close the Welcome tab. • In the Import window that appears. 54 . • Go to File  Import. © 2014 SAP AG. All rights reserved. Lab Environment Setup 3 • On the current window. © 2014 SAP AG. All rights reserved. 55 . click Select root directory and click Browse… • On the next window. • Click OK. navigate to the Application (N:) drive  SAPX05_95 and select as root directory. and press Finish • Your lab exercises will make reference to these project folders throughout © 2014 SAP AG.Lab Environment Setup 4 • Make sure that all project solutions are appearing in the Projects area are ticked. All rights reserved. 56 . Total View • Note that these are solution project files for your exercises • Also note that there additional sample projects and demonstration projects • Next. All rights reserved. You can test your exercises on the installed version of Google Chrome. 57 . you will prepare the FireFox and FireBug environment. if you prefer. © 2014 SAP AG. All rights reserved. • Use the search field to search for the Firebug Addon. • Install it by means of the corresponding Install button: © 2014 SAP AG.Installing the Firebug Add-on in FireFox (1) • Launch FireFox using Start  All Programs. 58 . and make sure you are on the Start Page • Click the Add-ons icon at the bottom of the browser: • This will launch the Add-ons Manager. All rights reserved.Installing the Firebug Add-on in FireFox (2) • Upon installation. 59 . © 2014 SAP AG. note the new tab and the change in status: • Close all tabs. Setup for Debugging with FireBug • Make sure that your Firebug Console is activated/enabled by going to FireFox and click the FireBug and set to On for All Web Pages: • Enable the Console and click All. as you see in the screen shot example below: © 2014 SAP AG. All rights reserved. 60 . SAPUI5 Developer Studio . All rights reserved. including: o o o o o o Wizards for project and view/controller creation Wizards for control development Code Completion for UI5 controls TeamProvider for NGAP and BSP repositories Application preview with an embedded Jetty server Proxy-servlet to prevent cross-site-scripting errors © 2014 SAP AG.Overview • SAPUI5 Developer Studio is a set of tools for Eclipse that greatly simplify the development process for UI5 applications and controls. 62 . 63 .Installation NOTE – the training system already has all relevant components installed © 2014 SAP AG. All rights reserved. © 2014 SAP AG. 64 . • To setup SAPUI5 you have to install the plugins by using the update sites of your IDE. One way to confirm a successful installation is to check whether you can create a UI Library Project / SAPUI5 Application Project. • Install the Plugin into a version of standard eclipse or into the NWDS. • If you want to use the SAPUI5 Repository Team Provider you should choose the 32bit version.Installation • Prerequisite: Install the latest Java Development Kit (currently Version 7). the SAPUI5 Eclipse tools should be available. • Once Eclipse/NWDS has been (re)started. if it is not installed already. All rights reserved. 65 .Public Trial • A trial version of the SAPUI5 framework has been released in the SAP Community Network • http://scn. All rights reserved.com/community/de veloper-center/front-end • Includes static JavaScript-Files. war-Files and the Demokit © 2014 SAP AG.sap. Creating a UI5 Project with SAPUI5 Developer Studio . 67 .  Choose New  Project… © 2014 SAP AG.Creating a New SAPUI5 Project  In Eclipse . right-click on the project pane to bring up the context menu (or use the File  New… entry from the Eclipse menu). All rights reserved. Creating a New SAPUI5 Project  Select "SAPUI5 Application Project". 68 . © 2014 SAP AG.  Click "Next". All rights reserved. g. © 2014 SAP AG.Creating a New SAPUI5 Project  Enter the name of the project – e.  Click "Next".  Leave the checkbox "create an initial View" checked. Hello_World. 69 .  Choose between „Desktop“ or „Mobile“ as the target device for your new project. All rights reserved.  We‘ll use „Desktop“ for this exercise.  Click "Next".g.  Leave the rest of entries at default settings. "main".Creating a New SAPUI5 Project  Enter the name of the initial view: e. 70 . All rights reserved. © 2014 SAP AG. All rights reserved. © 2014 SAP AG.Creating a New SAPUI5 Project  The last window is a summary screen containing the project properties. 71 .  Click "Finish" to create the new project. © 2014 SAP AG. 72 . All rights reserved.Creating a New SAPUI5 Project • You may see the following message from Eclipse: • Click Yes to switch to the Java EE perspective. 73 . All rights reserved.The New Project IDE © 2014 SAP AG. Adding a Shell to the View © 2014 SAP AG. All rights reserved. 74 . All rights reserved.ux3 library © 2014 SAP AG.ui.Adding the sap. 75 . All rights reserved. because it has a fixed port instead of a random one-time port used by Web App Preview. 76 .Testing an Application (1) Run on Server or Web App Preview – run on server is better. you can select Web App Preview – note the port issue if you change to Google or FireFox © 2014 SAP AG. For testing purposes during class. All rights reserved.Testing an Application (2) © 2014 SAP AG. 77 . • Therefore. this link stops working as well. All rights reserved. 78 . © 2014 SAP AG. if link is copied into a browser for debugging.Web Application Preview – Jetty Disadvantages compared to testing on server: • • Based on Internet Explorer. this is not recommended. • Creates a random port which stops working when Web App View is closed. therefore does not display most CSS3 features. Exercise 01: Create a simple SAPUI5 HelloWorld 1. Open the index. 79 . Save and run the application using the Web App Preview (Jetty) © 2014 SAP AG. create a new SAPUI5 Application Project with the name SAPUI5-Exc01-HelloWorld 2. All rights reserved. In the SAPUI5 Developer Studio.html and add the following lines between the script-Tag in the following position: 3. All rights reserved. 80 .Exercise 1: Create a simple SAPUI5 HelloWorld • Results of test: © 2014 SAP AG. Theming and CVOM Charts Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files © 2014 SAP AG. All rights reserved.Unit 2 – SAP SAPUI5 Development: Unit Lessons SAP SAPUI5 Components and Overview Lesson 2: SAPUI5 Developer Studio Lesson 3: Programming Applications Lesson 4: UI Controls and MVC Lesson 5: Databinding and Databinding . 81 .OData Lesson 6: Resource Handling Lesson 7: Modularization Lesson 8: Localization Lesson 9: Notepad Controls Lesson 10: Components Lesson 11: Extending SAPUI5 Lesson 12: Styling. Programming Applications . o data-sap-ui-theme: the theme o There are more attributes: data-sap-ui-language. All rights reserved. … o Instead of putting the attributes in the script tag. data-sap-ui-rtl. many can also be added as URL parameters © 2014 SAP AG. to load the UI5 runtime • Attributes of the script tag are evaluated and used to configure the runtime: o data-sap-ui-libs: the controls libraries to be used. 83 . comma-separated.SAPUI5 Bootstrap • UI5 pages always have to start with the bootstrap. Runtime Behavior of Bootstrap • jQuery enrichment with plugins – namespace jQuery.sap • Creation global object sap • SAPUI5 core class and all dependencies are executed • Runtime configuration is determined • All libraries and modules declared in the config. 84 . and their dependencies are loaded • Stylesheet for the config. themes of each loaded libs are added to the page • Loading of libs is finished and document ready state  initEvent of Core fired  all registered eventhandlers are executed © 2014 SAP AG. All rights reserved. Configuration of the UI5 Runtime • Individual configuration data-sap-ui-attribute • data: to comply with W3C recommendation for custom attriubtes • sap-ui: identifier for SAPUI5 attributes • attribute: an specific configuration attribute • Access configuration: sap.  sap.core.Configuration © 2014 SAP AG.getConfiguration(). All rights reserved.ui. 85 .getCore().ui. read from /sap-ui-config.Configuration Fallbacks 1. Using URL parameters 6. All rights reserved. System defined defaults 2. Individual data-sap-ui-xyz attributes of the bootstrap tag 5. 4. A configuration string in the data-sap-ui-config attribute of the bootstrap tag 3.json Properties of the global configuration object window["sap-uiconfig"] 1. Setters in this Configuration object (only for some parameters) © 2014 SAP AG. Server wide defaults. 86 . default is language locale ConfigurationOptions © 2014 SAP AG. the sap-ui-debug.app lyTheme() The theme to be used inspect boolean false when set to true. 87 .getCore.js module is included and provides some supportability features formatLocal string undefined Locale to use for formatting purpose.ui.Configuration Attributes Attribute Type Default RT-Modification Description theme string Base sap. All rights reserved. All rights reserved.ready() function UI5 largely uses HTML strings to render its controls  Historically using innerHTML for changing HTML was much faster than changing the DOM for the same purpose. 88 .Internals about UI5 Rendering UI5 control tree(s) are only rendered when the HTML page is finished loading  Only then the UI areas do actually exist in the browser’s DOM  This corresponds with jQuery’s $(document). Changes to controls (add/remove properties) are not directly carried out     Onload at initialization (placeAt calls are buffered until then) After control event handlers have finished their work After application logic has finished changing controls (UI5 registers a timeout) When core method applyChanges() is triggered © 2014 SAP AG. Application Script and UI Area • After the bootstrap script tag an "application script" can follow in which the UI5 application is written: – You create your controls like layouts and TextFields – Display your controls in an HTML element called "UI area" by invoking the placeAt method (there can be multiple UI areas) 1. Application 3. 89 . All rights reserved. Bootstrap 2. UI-Area © 2014 SAP AG. sap. before the runtime element with the specified id would do it (use carefully!!)  Similar to jQuery(„#myId“) or $(„#myId“) but handles escaping of dots and adds the hash character © 2014 SAP AG. 90 .getCore() jQuery.getCore().getCore().ui.ui.ui.Useful Core Functions sap.getElementById but  Can be used to access removed controls gets rid of IE bug which also retrieves (even though the id doesn’t exist in the elements with the name of id DOM anymore)  Gets a core instance sap. All rights reserved.sap.byId(id)  Carries out and renders the changes for UI5  Returns the jQuery object of the DOM controls immediately.domById(id)  Gets any HTML element with id id  If there is also a UI5 control with id id. the sap.applyChanges() jQuery.byId(id) element returned is the topmost HTML element of this UI5 control (the UI5 control  Gets an instance of a UI5 control which was id is always used there) created with id id  Similar to document. All rights reserved. Theming and CVOM Charts Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files © 2014 SAP AG.OData Lesson 6: Resource Handling Lesson 7: Modularization Lesson 8: Localization Lesson 9: Notepad Controls Lesson 10: Components Lesson 11: Extending SAPUI5 Lesson 12: Styling.Unit 2 – SAP SAPUI5 Development: Unit Lessons SAP SAPUI5 Components and Overview Lesson 2: SAPUI5 Developer Studio Lesson 3: Programming Applications Lesson 4: UI Controls and MVC Lesson 5: Databinding and Databinding . 91 . UI Controls . 93 .Overview • Working with controls • Working with Layouts • The UI-control gallery provides deep information on each UI-control with reference to the API. All rights reserved. © 2014 SAP AG. UI-controls • SAPUI5 provides different types of UI-controls:       Simple Controls Complex Controls Value Holders Dialogs UX3 Controls Layouts © 2014 SAP AG. 94 . All rights reserved. 95 .Button • Simple push button • attachPress assign event handler for push action • Lite property for a button with hover effect © 2014 SAP AG. All rights reserved. All rights reserved.TextField • Single row Input • HTML or CSS input is escaped • Properties value. 96 . visible. valueState • Events change • Methods focus © 2014 SAP AG. enabled. Image • HTML-wrapper for images • Properties: src. All rights reserved. alt • Events: press © 2014 SAP AG. 97 . 98 .AutoComplete • TextField with proposed values • Works with ListItems • Properties: items. selectedKey • Methods: addItem © 2014 SAP AG. All rights reserved. ComboBox • ComboBox provides a list of predefined entries • Properties: items. selectedKey • Events: change. All rights reserved. liveChange • Methods: getLiveValue © 2014 SAP AG. 99 . Tree • Class Tree and TreeNode • Tree consists of objects of type TreeNode • addNode to add TreeNode objects • attachSelect to assign eventhandler © 2014 SAP AG. 100 . All rights reserved. Menu • Class Menu and MenuItem • addItem add MenuItem object to Menu • addSubmenu adds a MenuItem as submenu • attachPress eventhandler © 2014 SAP AG. All rights reserved. 101 . 102 .table • Table consists of Columns • Properties of Column: • Label. Template © 2014 SAP AG. All rights reserved.ui.Table • sap. ux3 • Methods: setContent.ui.Shell • Part of sap. 103 . attachWorksetItemSelected © 2014 SAP AG. All rights reserved. 104 . All rights reserved.Layout • AbsoluteLayout • Form • GridLayout • MatrixLayout • TabStrip © 2014 SAP AG. MatrixLayout • Class MatrixLayout • Place UI-Elements based on Cells • createRow to create a new row in the matrix and add UI-element to it • Property layoutFixed is used to define how content is arranged  True: cell size is set by the developer  False:the cells are sized to fit the content • Property colums: amout of colums © 2014 SAP AG. All rights reserved. 105 . 106 . All rights reserved.Example of Multiple UI Areas for Exercise 02 © 2014 SAP AG. Exercise 02: Create a Simple Application • Create new SAPUI5 project called WDE350-Ex02 with a initial view called “PersonData” in Eclipse and open the view. • Create a MatrixLayout with two Labels.ui.ui.Panel and set its „text“ to „Enter Data“. • Create a new sap. All rights reserved.layout.commons. two TextFields and a Button:     new new new new sap.commons. 107 . • Add a press handler to the Button that displays the values of the TextFields:  attachPress(function() {…})  getValue() Solution © 2014 SAP AG.commons.commons. • Add the layout to the Panel using the addContent() method.TextField sap.ui.Button (text: „Submit“) • Add the Labels.commons.ui.ui.MatrixLayout (text: „First Name“ / „Last Name“) sap. TextFields and the Button to the layout with createRow().Label sap. All rights reserved.Exercise 02 Solution • © 2014 SAP AG. Expected outcome: 108 . Solution 109 .commons.ApplicationHeader. Open your solution of exercise WDE350-Ex02. 4. Create a Menubar with 2 Menu Items and place it in the „menu“ UI Area: • • new sap. Create an new sap. 3. 2. All rights reserved. set the Welcome Message setDisplayWelcome() and the Logoff setDisplayLogoff() to false and place it in the „header“ UI Area.MenuItem © 2014 SAP AG.ui.commons.MenuBar new sap.ui.Exercise 03: Create Multiple Areas 1.commons. Create 2 additional UI Areas above the „content“ UI Area and name them „header“ and „menu“.ui. 110 .Exercise 03 Solution © 2014 SAP AG. All rights reserved. 2. Also alert the type of the HTML element which is the root element of the Panel control: • The ID of a control is always the ID of the HTML element • Use jQuery. but retrieve the TextField using its ID (you have to give an ID first): • sap.byId(…).ui.get Value() • Expected outcome: 3. All rights reserved.domById(…) Solution • © 2014 SAP AG. 111 .Exercise 04: Core Functions 1. Open your solution of exercise 03.sap. For getting the TextField value when the button is pressed: • Do not use the TextField reference.getCore(). 112 . All rights reserved.Exercise 04 Solution © 2014 SAP AG. MVC . mvc. mixed or standalone (sap.mvc.ui.core. All rights reserved. 114 .JSONView) o declarative HTML (sap.mvc.core.JSView) o JSON (sap.ui.core.core.XMLView) o JavaScript (sap.HTMLView) • Controller o bound to a view or standalone o can also be used by multiple views • Model: Data binding can be used on the views © 2014 SAP AG.ui.ui.mvc.Basic Model-View-Controller Concept • Views can be defined using o XML with HTML. This applies to views as well.controller.File Location Logic • Controllers and views use the require/declare logic. All rights reserved. resources/sap/hcm/Address. 115 . so if a controller is referenced like this: • UI5 then checks if you already have defined the controller like this in one of your already processed application sources • If this is not the case then UI5 tries to load this definition from a file that by default is located in your UI5 resources folder.js © 2014 SAP AG. • Mixed location scenarios are supported with jQuery. This would fail for the modules contained in your web application. 116 .sap. All rights reserved. namely from the centrally deployed web application.registerModulePath • UI5 by default will try to load any required modules from its resource root URL.registerModulePath • Example of using registerModulePath: © 2014 SAP AG. 117 . All rights reserved.Controller Events Currently there are 4 events defined in a controller:  onInit • • You can add handlers for any of these for to your controller class: – Fired when the view is first instantiated  onBeforeRendering – Fired before the view is rendered  onAfterRendering – Fired when the view has been rendered (the HTML is injected into the document)  onExit – Fired when the controller is destroyed – Can be used to free resources © 2014 SAP AG. Example of an JS View © 2014 SAP AG. All rights reserved. 118 . All rights reserved.Example XML View © 2014 SAP AG. 119 . 120 . All rights reserved.Example JSON View © 2014 SAP AG. All rights reserved. 121 .Example HTML View © 2014 SAP AG. default or named model. e. int. 1:n Yes Yes Yes Yes Single Event Listener Registration (maybe limited to some scope. All rights reserved.g. template approach) Yes Yes Yes Yes Customized Data Binding (formatter.boolean. but outside the data binding features) Yes No No No Code completion (Eclipse) Yes Yes. Association 1:1. 122 . with limitations No No Templating (Eclipse) Yes No No No Validation No Yes No No © 2014 SAP AG. 1:n.View Type Comparison Feature JS View XML View JSON View HTML View Controls from Standard and Custom Libraries Yes Yes Yes Yes Self-contained registration of custom library locations Yes No No No Properties of types string.g. based on model data. factory approach) Yes No No No Embedded HTML (without use of HTML control) No Yes No No Dynamic control creation (e. float Yes Yes Yes Yes Properties of other types (object) Yes No No No Aggregation 1:1. data type. controller/window) Yes Yes Yes Yes Multiple Eventlisteners and/or without scope Yes No No No Simple Data Binding (Path. Create a view for each type: JS.ui.core. type: sap. 2.view. JSON: • sap.ui.view({id: [sID]. Create for each type a view. Open your solution of exercise 04. 123 .html to the PersonData.ViewType}).mvc. viewName: [sName]. All rights reserved.js file. 4. Move your UI-code from the index.Exercise 05: Multiple Views 1. 3. Continued © 2014 SAP AG. XML. controller([sViewName].Exercise 05: Multiple Views 5. 6. 124 .ui. 7.Button({press: [fEventHandler]}). } © 2014 SAP AG. Instantiate a button event callback method for each view controller: • btnPressCallback : function(){ alert(‘Button pressed!‘).ui. All rights reserved.commons. Create a controller for each view: • sap.{/*function definition*/}). Create for each view a single button with a press event method: • sap. 125 .Solution for Exercise 05: JS View JS View See Notes below for detail Next © 2014 SAP AG. All rights reserved. Solution for Exercise 05: XML View XML View See Notes below for detail Next © 2014 SAP AG. 126 . All rights reserved. Solution for Exercise 05: JSON View JSON View See Notes below for detail Next © 2014 SAP AG. 127 . All rights reserved. All rights reserved. Create a new Panel. 2. Back © 2014 SAP AG. 5.view. Open the PersonData. NOTE – See notes below for details. 3. 128 . Instantiate each view type. Add the layout to the panel. Add the view instances to a layout of type HorizonalLayout. 4.js file.Exercise 05 Solution: Place Views 1. Exercise 05 Solution: Place Views • Expected UI Outcome: o Click on of the buttons to view the results: © 2014 SAP AG. 129 . All rights reserved. Unit 2 – SAP SAPUI5 Development: Unit Lessons SAP SAPUI5 Components and Overview Lesson 2: SAPUI5 Developer Studio Lesson 3: Programming Applications Lesson 4: UI Controls and MVC Lesson 5: Databinding and Databinding - OData Lesson 6: Resource Handling Lesson 7: Modularization Lesson 8: Localization Lesson 9: Notepad Controls Lesson 10: Components Lesson 11: Extending SAPUI5 Lesson 12: Styling, Theming and CVOM Charts Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files © 2014 SAP AG. All rights reserved. 130 Databinding UI5 Data Binding In UI5, DATA BINDING is used to bind UI5 controls to a data source that holds the application data, so that the controls are updated automatically whenever the application data is changed. • • With TWO-WAY-BINDING the application data is updated whenever the value of a bound control changes, e.g. through user input. application data UI5 Control / Output application data John Doe John Doe, 35 John Doe John Doe Age: 36 John Doe, 35 Age: 35 Age: 35 application data has been updated UI5 Control / Output Resulting UI5 Control / Output John Doe, 36 Resulting application data John Doe UI5 Control / Output has been updated John Doe, 36 Age: 36 • Data binding supports binding of simple controls like TextField and list type controls like. • See the complete documentation on how data binding works and how to implement it in an application. © 2014 SAP AG. All rights reserved. 132 Data Binding: Model Types UI5 data binding supports three different model implementations: JSON model  supports data in a JavaScript Object Notation format  supports two-way binding XML model  supports XML data  supports two-way binding OData model  supports OData compliant data  creates OData requests and handles responses  includes the open source library dataJS to handle OData requests and data  experimental two-way binding • Additionally, the ResourceModel helps binding translated texts • Applications can create their own Model implementations © 2014 SAP AG. All rights reserved. 133 Creating a Model Instance • To use data binding in a SAPUI5 applications you will need to instantiate the appropiate model first. The constructor takes the URL of the model data or the data itself as the first parameter. JSON-Model: XML-Model: OData-Model: © 2014 SAP AG. All rights reserved. 134 All rights reserved. 135 .Assigning the Model • After the model has been created you can assign the model to the Core or specific controls with the setModel method • The relevant model for a control is the one which is nearest to it on the path up to the root (UI area) o If there is no model in the root path found the one attached to the core becomes the relevant model © 2014 SAP AG. © 2014 SAP AG.ui. curly braces syntax: var oControl = new sap.commons.bindProperty("controlProperty". 136 . in the constructor with curly braces or using the bindProperty method bindProperty method: • oControl. "modelProperty").TextView({ controlProperty: "{modelProperty}" }).TextView({ controlProperty: { path: “modelProperty” } }).ui. All rights reserved.commons. (alternatively) by path: var oControl = new sap.Property Binding • Most of the properties of a control can be bound to model properties • There are two ways to bind properties to the model. 137 . All rights reserved.Example for Simple Control © 2014 SAP AG. Bind the data to the controls. Create some JSON sample data.layout.ui.TextView 5. 138 . 3. All rights reserved.ui.commons. Switch the controls in the „Enter Data“ panel from the VerticalLayout to a MatrixLayout and add 2 TextView controls: • new sap. 2. solution © 2014 SAP AG.MatrixLayout • new sap. Update-function to the Button (optional). 6.Exercise 06: Data Binding 1. 4.commons. Copy the solution of exercise 05 to SAPUI5-ex06 or extend your solution of exercise 05. Create JSON model instance / Set the data for the model / Set the model to the core. 139 . All rights reserved.Exercise 06 Solution Back © 2014 SAP AG. phone: "734" } ] } © 2014 SAP AG.About Binding Paths { } company: { name: "ACME". contacts: [ { name: "Barbara". info: { employees: 3 }.{ name: "Gerry". • Absolute binding paths within this model: /company/name /company/info/employees /company/contacts (a collection!) /company/contacts/0/name • Relative binding paths within the "/company" context: name info/employees contacts • Relative binding paths within an aggregation binding of "/company/contacts": name phone 140 . All rights reserved. phone: "873" }. Aggregation Binding • Aggregation binding is used to bind a collection of values. To use aggregation you will have to use a control that acts as a template. 141 . All rights reserved. • The aggregation binding can also be defined using the bindAggregation method of a control. © 2014 SAP AG. like binding multiple rows to a table. All rights reserved.Example of Aggregation Binding © 2014 SAP AG. 142 . commons. 4.core. All rights reserved. Replace the “first name” Textfield with a Combobox and the “first name” Textview with a Textfield: • new sap. 3. Bind the data to combo box.ListItem 5.ui.ComboBox • new sap.ui. Copy the solution of exercise 06 to SAPUI-ex07 or extend your solution of exercise 06. 6. Set multiple first name options as data for the model and assign a key to each of them. 2. © 2014 SAP AG. Create a new JSON model instance. Solution 143 . Include a function to update the new Textfield with the chosen value from the Combobox (optional).Exercise 07: Aggregation Binding 1. Exercise 07 Solution Back © 2014 SAP AG. All rights reserved. 144 . 145 .Multiple Models / Named Models • It is possible to set multiple models for an element or the core by specifying individual names for the models. which are used to identify them. All rights reserved. • Property bindings for a named model: • Aggregation bindings for a named model: © 2014 SAP AG. can also use the extended data binding syntax o This enables you to use formatters and the type system for property binding and templates. All rights reserved. filter and sorters for aggregation binding • To use the extended syntax. you supply an object literal for the bound property/aggregation.Extended Data Binding Syntax • Instead of only using the token name of a model property. Extended property binding: © 2014 SAP AG. Extended aggregation binding: 146 . 147 . • The return value of the formatter function is used as the value of the bound control: © 2014 SAP AG. All rights reserved.Formatters Exercise 8 • For properties you can supply a formatter function which will be called with the value of the model property. Add a formatter to the Textview with the „Last Name“ data. Open your solution of exercise 07. 2. Create a function using the toUpperCase () Method inside the controller. 4. 3. 148 .Exercise 08: Formatters 1. Solution © 2014 SAP AG. Capitalize the output in the Textview. All rights reserved. All rights reserved.Exercise 08 Solution Back © 2014 SAP AG. 149 . For each Type you can define the following parameters in the constructor: o format options: Format options define how a value is formatted and displayed in the UI. All rights reserved. input values in UI controls are parsed and converted back to the defined type in the model. When parsing the value will be validated against these constraints. 150 . © 2014 SAP AG. o constraints (optional): Constraints define how an input value entered in the UI should look like.Type System • Data binding supports the definition of types which can be handed over when binding properties o • Bound properties with a defined type will automatically be formatted when displayed in the UI. 151 .Example – Date Type © 2014 SAP AG. All rights reserved. Extend your model in the controller with a new attribute with the name date and initialize the attribute with the todays date.YYYY. as its text. Place the newly created panel at the subheader area. Open your solution of exercise 08. Solution © 2014 SAP AG. Create a new panel with today‘s date in the format.MM.Exercise 09: Date Type 1. 5. All rights reserved. DD. 4. 152 . 2. Create a new subarea in your index.html called subheader. 3. js: Back © 2014 SAP AG.Exercise 09 Solution • • PersonData.js: PersonData.controller. 153 . All rights reserved.view. Custom Types © 2014 SAP AG. All rights reserved. 154 . you can provide initial sorting and filtering.Sorters and Filters • When using aggregation binding. © 2014 SAP AG. 155 . All rights reserved. model.Exercise 10: Sorting & Filtering 1. 3.Filter • sap.Sorter • sap.model.ui.ui.ui. All rights reserved.model.FilterOperator 4. Filter the data in the other ComboBox by names between the letters A and M. Solution © 2014 SAP AG. Sort the data in one of the ComboBoxes alphabetically: • sap. 2. 156 . Duplicate the „First Name“ ComboBox. Open your solution of exercise 09. 157 .Exercise 10 Solution Back © 2014 SAP AG. All rights reserved. o E. 158 .value property of text field may be bound to a property firstName and a property lastName in a model. All rights reserved. • Application can access these values in a formatter function and decide how they will be processed or combined together: Property Declaration: Formatter Function: © 2014 SAP AG.g. .Calculated Fields • Calculated Fields allow the binding of multiple properties in different models to a single property of a control. All rights reserved.Calculated Fields – Extended Syntax • The extended syntax for calculated fields can be used in declarative views such as html and xml views • Because it is still experimental. 159 . it needs to be switched on via the configuration flag xx-bindingSyntax=„complex“ within the bootstrap • Now you can mix the text and calculated fields: © 2014 SAP AG. 160 .Example of Calculated Fields © 2014 SAP AG. All rights reserved. ui. 2. Create a dataset with first names. last names. gender and occupations.ui. Solution © 2014 SAP AG.ui.Column 5. Open your solution of exercise 10.table. Display the first names in the first column. Create a table with 3 columns: (you need to add the sap.table library to the bootstrap) • sap.Table • sap. the last names in the second column and a combination of first name. All rights reserved. 3.table. 4. Create a new panel named „Calculated Fields“. 161 .Exercise 11: Calculated Fields 1. last name. gender and occupation in the last column. All rights reserved. 162 .Exercise 11 Solution Back © 2014 SAP AG. All rights reserved. 163 .Master-Detail Relationship • • A master-detail relationship is a 1:n type relationship Examples of a masterdetail relationship are: o A set of purchase orders and a set of line items belonging to each purchase order o An expense report with a set of expense line items o A department with a list of employees belonging to it • An application can use this master-detail relationship to enable users to navigate through the purchase order data and see the detail data for line items only related to the master purchase order selected © 2014 SAP AG. Example of Master-Detail © 2014 SAP AG. 164 . All rights reserved. All rights reserved.Example of Master-Detail: Code Part 1 © 2014 SAP AG. 165 . Example of Master-Detail: Code Part 2 © 2014 SAP AG. All rights reserved. 166 Input Validation • To catch invalid user input, you can register the following handlers to the SAPUI5 Core. o attachFormatError o attachParseError o attachValidationError o attachValidationSuccess • Example: © 2014 SAP AG. All rights reserved. 167 Exercise 12: Data Binding • Exercise 12 Exercise 12: Create a searchable Music store and populate it with data from iTunes © 2014 SAP AG. All rights reserved. 168 Exercise 12: Data Binding with AJAX 1. Copy the project WDE350-Ex12-Template to WDE350-Ex12. 2. In createContent of the Shell View, add one more workset item (text: „Music Store“, key: „musicstore“) to the Shell. 3. Instantiate the new View and assign it to mContent.musicstore . Next © 2014 SAP AG. All rights reserved. 169 Exercise 12: Data Binding with AJAX Part 2 4. In createContent of the musicstore View, create the following controls: • One sap.ui.commons.SearchField, calling the Controller‘s „doSearch“ method with the Controller being the „this“ context: search:[oController.onSearch, oController] • One sap.ui.table.Table (new control library “sap.ui.table” to be added to bootstrap!); use an extended binding object to bind and sort the Table rows: • One sap.ui.commons.layout.VerticalLayout with width set to “100%” 5. Add SearchField and Table to the layout and return it. 6. Implement both controller methods (empty for now): onSearch and onSelectionChange. 7. Test the UI and verify the Music Store comes up (empty table). Next © 2014 SAP AG. All rights reserved. 170 Exercise 12: Data Binding with AJAX Part 3 8. Add three columns to the Table, binding them to certain attributes (artworkUrl30,trackName,artistName) – including an Image column (artworkUrl30). 9. In the controller, implement the „onInit“ method, create an empty JSONModel, assign it to „this.model“ and set it on the View: this.model = new sap.ui.model.json.JSONModel(); this.getView().setModel(this.model); 10. In onSearch, read the event parameter „query“, put it into an iTunes search URL and set the data on the JSONModel: var searchTerm = oEvent.getParameter("query"); var url = "http://itunes.apple.com/search?term=" + searchTerm + "&country=FR&media=music&entity=song&callback=?"; this.model.setData(data); 11. Open the Shell.view.js and implement the commented steps. Next © 2014 SAP AG. All rights reserved. 171 After a second. enter an artist or song name and press Enter. the Table will be populated with the search results from iTunes: Back © 2014 SAP AG. 172 . All rights reserved.Exercise 12 Solution • Run the application. All rights reserved.Exercise 12 – Part 1 – Solution See the Notes section below for the detailed steps © 2014 SAP AG. 173 . 174 .Exercise 12 – Part 2 – Solution See the Notes section below for the detailed steps © 2014 SAP AG. All rights reserved. Databinding – OData . svc/Category(1)/Products?$top=2 Service Root URI © 2014 SAP AG. Atom Pub format and JSON • Enables provision of data services based REST principles • Released under “open specification promises“ by Microsoft • Defines data queries using URLs constructed with specific rules • Defines data formats representing resources like collections. etc.odata. All rights reserved. entries. Resource path Query options 176 .org/OData/OData. in either Atom or JSON format • OData URL structure: http://services.OData – Open Data Protocol • Based on HTTP. html © 2014 SAP AG.odata.odata.org/V3/OData/OData.org/V3/OData/OData. 177 .svc/ • $metadata o The $metadata entry for an OData service return a EDMX file (Entity Data Model XML) that contains a complete description of the feeds. types. properties and relationships exposed by the OData service: http://services. All rights reserved.svc/$metadata • Alternatively.org/ODataAPIExplorer/ODataAPIExplorer.OData – Service Document & Metadata • Service Document o The service document (returned at the OData service root) gives you the titles and urls for each service feed: http://services.odata. this experimental API Explorer by the OData Service can be used: http://services. Name © 2014 SAP AG.OData – System Query Options • When accessing an OData service. 178 .desc $top Selects only the first N items in a collection /Products?$top=5 $skip selects entries starting by N+1 /Products?$skip=2 $filter filters entries based on the criteria /Suppliers?$filter=Address/City eq 'Redmond' $expand expanded Entries are eagerly loaded and presented inline /Categories?$expand=Products $format defines the format that the server must return /Products?$format=json $select returns the subset of the specified properties /Products?$select=Price. All rights reserved. you can supply some system query options to influence the returned entries: Parameter Description Example $orderby Orders entries by the entity supplied /Products?$orderby=Rating. { expand: "Products".Category" } }). { expand: "Products" } ).bindElement( "/Category(1)".Adding OData Query Options • SAPUI5 handles most of the URL parameters for OData services automatically. select: "Name.ID.bindElement( "/Category(1)".bindRows({ path: "/Products". 179 . © 2014 SAP AG. Expand Parameter: Select Parameter: oControl.bindRows({ path: "/Products". either by adding them to service URL or passing a map of parameters when using bindElement or bindAggregation. oTable. oTable. parameters: { expand: "Category" } }).Products" }). parameters: { select: "Name. You do have the ability to add query options manually. All rights reserved. oControl. Exercise 13 180 . All rights reserved.Exercise 13: Example Code for OData © 2014 SAP AG. All rights reserved. First Name. Create a new panel named „OData“. Last Name. Bind columns to these subsets: • EmployeeID.org/Northwind /Northwind. Open your solution of exercise 11.Exercise 13: oData 1. Create a table with 5 columns. FirstName. Bind the rows to the Entity Set: „/Employees“ Solution © 2014 SAP AG. Notes 6.odata. LastName. Title. labeled: • ID. Notes 5.svc 4. 2. 3. 181 . Title. Create a variable with the link to the OData service URL: • http://services. 182 .Exercise 13 Solution Back © 2014 SAP AG. All rights reserved. Unit 2 – SAP SAPUI5 Development: Unit Lessons SAP SAPUI5 Components and Overview Lesson 2: SAPUI5 Developer Studio Lesson 3: Programming Applications Lesson 4: UI Controls and MVC Lesson 5: Databinding and Databinding . Theming and CVOM Charts Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files © 2014 SAP AG. 183 . All rights reserved.OData Lesson 6: Resource Handling Lesson 7: Modularization Lesson 8: Localization Lesson 9: Notepad Controls Lesson 10: Components Lesson 11: Extending SAPUI5 Lesson 12: Styling. Resource Handling . Java.Overview Resource Handling • The Resource Handling of SAPUI5 is separated in two parts: Client-side Mechanisms • Modularization ► Require/Declare for JavaScript files • Localization ► Resource Bundles Both concepts are loading additional resources from a server where this server might be any kind of web server (simple. 185 . © 2014 SAP AG. Server-side Mechanisms • • • SAPUI5 provides a Resource Handler for the Java server and the integration into the Eclipse IDE.Resource Handler. ABAP …). independent of the server side technology. also supporting standard and test-relevant resources Additional features: ► Theme fallback ► Resource Bundle fallback SAPUI5 also provides a Resource Handler for the ABAP server which is used for SAPUI5 applications to serve the resources from the UI libraries properly. aligned with the concept of the JavaServer Faces . • Both parts are not dependent on each other. Furthermore they are complementary. All rights reserved. 186 .OData Lesson 6: Resource Handling Lesson 7: Modularization Lesson 8: Localization Lesson 9: Notepad Controls Lesson 10: Components Lesson 11: Extending SAPUI5 Lesson 12: Styling.Unit 2 – SAP SAPUI5 Development: Unit Lessons SAP SAPUI5 Components and Overview Lesson 2: SAPUI5 Developer Studio Lesson 3: Programming Applications Lesson 4: UI Controls and MVC Lesson 5: Databinding and Databinding . All rights reserved. Theming and CVOM Charts Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files © 2014 SAP AG. Modularization . function onPressButton() { sap.MessageBox will become sap/ui/commons/MessageBox.ui.MessageBox"). These smaller.alert("Hello World!").sap. o In a module name all “. the function jQuery.require("sap. which then can be loaded at runtime when they are needed. o To load a module.commons.sap. an application can be split into smaller parts.js” extension is added to create a path.ui. individual files are called Modules in UI5.require must be used.” are replaced by “/” and an “. o Instead of defining (and loading) one large chunk of JavaScript code. 188 .Modularization using require • The UI5 framework has built in support for modularizing larger JavaScript applications.ui.MessageBox. All rights reserved. } </script> © 2014 SAP AG.commons.js • This is an example: <script> jQuery.commons. So sap. you. it calls the declare method.Want").sap.SampleModule = {}.multiple. jQuery. o The declare function checks if the parent namespace object exists and if not.sap. // declaration of the module.useful.require("sap.require("some. it is loaded automatically. o If a module is required (jQuery. While it is carried out. jQuery.useful. jQuery. creates it.other. This tells the UI5 runtime about the name of the module.Core").sap. "if. Will ensure that the namespace 'my.declare("my.SampleModule").require("you.can.useful' exists. "list.require) and it hasn’t been loaded before.sap. © 2014 SAP AG.sap.core.Module"). 189 . UI5 runtime keeps track which modules are already loaded. All rights reserved.ui.Also".declare function. // list of dependencies of this module jQuery. // create the 'main' object of the module my.Modules".Modularization using declare • In order to create your own JavaScript Module you need to “declare” the module: o A file becomes a module by calling the jQuery. so from now on UI5 knows that it has been loaded and when the next require comes about nothing needs to be done anymore.sap. • Mixed location scenarios are supported with jQuery.registerModulePath • Example of using registerModulePath: © 2014 SAP AG. namely from the centrally deployed web application. All rights reserved. 190 .registerModulePath • UI5 by default will try to load any required modules from its resource root URL.sap. This would fail for the modules contained in your web application. 191 . All rights reserved.OData Lesson 6: Resource Handling Lesson 7: Modularization Lesson 8: Localization Lesson 9: Notepad Controls Lesson 10: Components Lesson 11: Extending SAPUI5 Lesson 12: Styling.Unit 2 – SAP SAPUI5 Development: Unit Lessons SAP SAPUI5 Components and Overview Lesson 2: SAPUI5 Developer Studio Lesson 3: Programming Applications Lesson 4: UI Controls and MVC Lesson 5: Databinding and Databinding . Theming and CVOM Charts Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files © 2014 SAP AG. Localization . • And then access the texts in the resource bundle: var sText = oBundle.resources({url : sUrl.getText(sKey). locale: sLocale}). var oBundle = jQuery.ui.resource("sap. © 2014 SAP AG. 193 . which is aligned to the ResourceBundle concept in Java.sap.require("jquery.Localization / Resource Bundle • Exercise 14 UI5 has a built-in localization concept.resources").sap. All rights reserved.table".ui."messagebundle. o You can get the URL for a resource with this: var sUrl = sap.sap. • Get the resource bundle for a given language (if no locale is given. English is loaded by default): jQuery.properties"). firstname.ui.Exercise 14: Localization /Resource Bundle 1.properties 4.getCore().resources({ url : "i18n/i18n. Create a new folder i18n to your WebContent-folder 3.properties • i18n_de.properties".getConfiguration(). lastname and submit to make use of localization: text: oBundle. e. 194 . locale: sap. In createContent. German and French Solution 5. 4. Add a property for firstname.getText(“XXX”) Test your page with appended URL parameter. submit and the panel header to each i18n-file and translate to English. All rights reserved.to WDE350-14 2.properties • i18n_fr.sap. Copy Project WDE350-02.: ?sap-ui-language=fr © 2014 SAP AG. 6.getLanguage() }). Add three empty files to that folder • i18n. Change the text property of the UI-elements panel. use the resource bundle to init localization var oBundle = jQuery.g. lastname. 195 .html Back © 2014 SAP AG.Exercise 14 Solution property in the i18n files index. All rights reserved. "i18n"). so better omit it }). default is current language. • A ResourceModel can be instantiated with a bundleName or a bundleUrl which points to a resource bundle.properties suffix. there is a wrapper for resource bundles that exposes the localized texts as a model for data binding.Button({ id : "myButton". All rights reserved. When using the bundle name the file must have the .setModel(oModel. // will use myBundle_en. text : "{i18n>MY_BUTTON_TEXT}“ // this points to a named model }).ui.properties".commons. // attach the resource model with the symbolic name "i18n" sap.resource.ui. © 2014 SAP AG.getCore(). 196 .ResourceModel({ bundleUrl: "myBundle.properties bundleLocale: "en“ // optional.model.ui. var oControl = new sap. • Example: var oModel = new sap.Localization with Resource Model Exercise 15 • With the ResourceModel. new sap.ui. but set it as named model (name: “i18n”) • ….model. "i18n"). 5. All rights reserved.ResourceModel with bundleUrl: "i18n/i18n.setModel(oModel.properties" (the current language is automatically used) Set this ResourceModel as model on the View or (globally) on the Core. Create a • • 4.Exercise 15: Localization /Resource Model 1. Now use data binding to bind the translated texts © 2014 SAP AG. Copy your solution of Exercise 2 to SAPUI5-Ex15 2. Solution 197 . Within the controller of the PersonData implement/uncomment the onInit method 3.resource. controller.js Back © 2014 SAP AG. 198 .view. All rights reserved.js PersonData.Exercise 15 Solution PersonData. OData Lesson 6: Resource Handling Lesson 7: Modularization Lesson 8: Localization Lesson 9: Notepad Controls Lesson 10: Components Lesson 11: Extending SAPUI5 Lesson 12: Styling. 199 .Unit 2 – SAP SAPUI5 Development: Unit Lessons SAP SAPUI5 Components and Overview Lesson 2: SAPUI5 Developer Studio Lesson 3: Programming Applications Lesson 4: UI Controls and MVC Lesson 5: Databinding and Databinding . All rights reserved. Theming and CVOM Charts Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files © 2014 SAP AG. Notepad Controls . these have a meaning that relates to the Control's purpose and functionality and is on a semantically higher level than "click" or other browser events. • Typically has properties like "text" or "width" that modify the appearance or relate to the data displayed by the Control. • It can aggregate other Controls: o This means it is a sort of container or layout Control when the application can add the child controls to use – or a composite Control if the Control itself decides what the child Controls are and just re-uses these available components. but rather loosely related.What is a Control? • An object that defines the appearance and behavior of a screen area. All rights reserved. 201 . • It can also have associated Controls that are not part or children of this Control. Examples would be triggerSearch in a SearchField or collapse in a Panel. o Typically. © 2014 SAP AG. • A Control can fire well-defined events. ui. either with tool support. 202 . © 2014 SAP AG.Object can be created or extended. this functionality is not restricted to Controls. • Arbitrary objects derived from sap. or just as part of a plain JS file.base. • Since an IDE is not needed to create new controls with the extend method these controls have been named "Notepad Controls".UI5 Controls Overview • There are two approaches to develop UI5 Controls. All rights reserved. • Technically. • This section deals with creating custom controls in JavaScript with the extend method. oDefinition). • Creating a new control: sap. events. aggregations.Control.core.extend(sName. which properties.commons.The extend Method • The extend() method is available on all Controls (and the base classes) and is used to define a new subclass. oDefinition).extend(sName. 203 . • The parameters to this function are the name and the definition of the new control type.Button. • Creating a new Control which inherits from Button: sap. © 2014 SAP AG. etc. o The definition part contains information about the control API.ui.ui. the control has and the implementation of the control methods. All rights reserved. • Some methods such as the getters and setters for the properties and aggregations or the methods for attaching/detaching event handlers are automatically created by UI5. public and private methods. event handler and the renderer: © 2014 SAP AG.Control Definition • The definition object for a custom control may contain metadata. 204 . All rights reserved. All rights reserved.Basic Example © 2014 SAP AG. 205 . width: { type: "sap. (undefined if not set) © 2014 SAP AG. properties: { title: "string".core. etc.CSSSize for a customdefined type defaultValue: The default value of the property. btnTxt: { defaultValue: "Search"}. defaultValue: "50px" } } • • • • string for a string property (default) int or float for number properties int[] for an array of integers. sap. defaultValue: true }. events and aggregations. string[] for an array of strings. All rights reserved. 206 .ui.core.CSSSize". showLogoutButton: { type: "boolean".Control Metadata • The metadata in the control definition consists of objects for the control properties.ui. Properties Example type: The data type of the Control property. commons.Control Metadata Events Aggregations Events are specified by the event name only. 207 .Button". so just give an empty object.ui. singularName : "worksetItem" } } events: { logout: {}.ux3. multiple: true. aggregations: { acceptButton: "sap. All rights reserved. close: { enablePreventDefault : true } } © 2014 SAP AG. Controls can enable events to be interrupted by the application. Aggregations and associations are defined by their name. a multiple flag and a singularName.ui. along with an object that can have a type. using the enablePreventDefault flag. In many cases there is nothing to configure about them. worksetItems: { type: "sap.NavigationItem". Control Methods • After the metadata is defined, you can add any method implementations to your new Control. The method names can be chosen freely, some method names must be avoided though: o o o • Names of methods that are provided by a super class. Methods starting with set, get, insert, add, remove or indexOf may collide with setters/getters for properties or aggregations you defined. Methods starting with attach, detach or fire may collide with methods created for events. There are some method names you may use but which have a special meaning: o on...: Methods starting with "on" are event handlers that are automatically bound to browser events. o init: Is the name of the initialization function called right after Control instantiation. o renderer: The name of the function that creates the HTML for the control. © 2014 SAP AG. All rights reserved. 208 Control Methods • Public / private methods o The convention is that private methods start with an underscore. All other methods are considered public. • init Method o The init() method is invoked by the UI5 core for each control instance right after the constructor. Use this to set up things like internal variables or sub-controls of a composite. This method is considered private and only to be called by the UI5 core. • onAfterRendering Method o The onAfterRendering() method is invoked after the controller's View is re-rendered. • Event handler methods o Methods that have a name starting with on are reserved for event handlers. For common events such as click or keydown, browser event handlers for these methods are registered automatically by the UI5 core. © 2014 SAP AG. All rights reserved. 209 Control Methods – Examples // public method divide: function(x, y) { if (this._checkForZero(y)) { throw new Error("Second parameter may not be zero"); } return x / y; }, // private method _checkForZero: function(y) { if (y === 0) { return true; } return false; }, © 2014 SAP AG. All rights reserved. // init method, invoked when control // is instantiated init: function() { this._bSearchTriggered = false; this._oSearchBtn = new sap.ui.commons.Button( this.getId() + "-searchBtn", { text: "Search" } ); }, // event handler onclick: function(e) { alert("Control " + this.getId() + " was clicked."); } 210 Control Renderer Example: • The renderer method is responsible for creating the HTML structure that makes up the control. It is different from the other methods, as it is a static one, so the this keyword is not available. Instead, a control instance and a RenderManager instance are given to the method. • If an existing renderer should be used without modification, you can give the name of this renderer class. © 2014 SAP AG. All rights reserved. renderer: function(oRm, oCtrl) { oRm.write("<div"); oRm.writeControlData(oCtrl); oRm.addStyle("width", oCtrl.getSize()); oRm.writeStyles(); oRm.addClass("myClass"); oRm.writeClasses(); oRm.write(">"); oRm.writeEscaped(oCtrl.getText()); oRm.write("</div>"); } Using an existing renderer: renderer: "sap.ui.commons.ButtonRenderer" 211 Control Renderer (Additional Information) • The newly created renderer type will inherit from the renderer of the parent Control. • So if your new Control extends TextField, the given function will be added to a class that inherits from sap.ui.commons.TextFieldRenderer (and will have access to that one's other functions). • However, your renderer method will override the parent renderer method, so no HTML will be written as long as your method is not taking care of it. • If an existing renderer should be used without modification, you can give the name of this renderer class: • renderer: "sap.ui.commons.ButtonRenderer" • However, a normal Control Renderer can also override or implement methods from its Renderer superclass • Or just separate out some helper functions. continued © 2014 SAP AG. All rights reserved. 212 All rights reserved. square: function(value) { return value * value. rm. • The keyword "this" actually refers to the Control Renderer type here.writeEscaped(this. } } © 2014 SAP AG.just like in a normal Control Renderer. 213 .write("<div>").getValue())).write("</div>"). but in this case these methods need to be packed together into an object. so it is used to access the other methods: renderer: { render: function(rm. rm. }. • The main rendering method is called "render" . so the extend method knows they should all go into the Control Renderer. oControl) { rm.square(oControl.Control Renderer (Additional Information) • This is possible as well here. Writing a Control Renderer Class • Extract the implementation from the control to a separat rendering class: Method Description write() Writes HTML output writeControlData() Writes ID and recognition data of control to HTML renderControl() Converts the specific control into HTML and adds the output to the HTML. All rights reserved. 214 . This is used to render child components © 2014 SAP AG. declare(„com. © 2014 SAP AG.HelloControlRenderer = { }.writeEscaped(oControl. // write the Control property 'name'.sap.writeControlData(oControl).write("<span"). with XSS protection oRm.HelloControlRenderer.write(">Hello "). oRm.HelloControlRenderer").sap.ui.sap.render = function(oRm. All rights reserved. oRm. }.write("</span>").Renderer Class Implementation jQuery. com. com. // required to make events work.sap.ui. writes the ID oRm. 215 .ui. oControl) { oRm.getName()). All rights reserved. © 2014 SAP AG.extend("com.Control. onAfterRendering : function() {} }).HelloControl ". 216 . { init : function() {}.ui.Using a renderer class sap.core. renderer : "com.sap.ui.sap.HelloControlRenderer".ui. All rights reserved. 217 .Example with Data Binding © 2014 SAP AG. All rights reserved.Example with Charts © 2014 SAP AG. 218 . Exercise 16: Notepad Controls Exercise 16 • Exercise 16: Add an Audioplayer Control to your Music Store from Exercise 12 and have the selected song play © 2014 SAP AG. All rights reserved. 219 . All rights reserved.0 and newer. IE 9 and newer) Next © 2014 SAP AG.js“ 2. Add a new column to the table and instantiate the new „Audioplayer“ control as row content 4.controller.6 and newer. Firefox 3. Open the index. Copy or extend your exercise 12 and navigate to „musicstore. 220 . Implement a new „AudioPlayer“ control before before your controller implementation 3.html in browser that can interpret the <audio> tag (Chrome 6 and newer.Exercise 16: Notepad Control / Part 1 1. Safari 5. All rights reserved.html in browser that can interpret the <audio> tag (Chrome 6 and newer. 221 . IE 9 and newer) Solution © 2014 SAP AG.Exercise 16 Solution– Notepad Control 1. Firefox 3. Implement a new „AudioPlayer“ control before before your controller implementation 3.6 and newer. Add a new column to the table and instantiate the new „Audioplayer“ control as row content 4.js“ 2. Open the index. Safari 5. Copy your exercise 12 and navigate to „musicstore.0 and newer.controller. 222 .Exercise 16 Solution • When a song is selected in the Table. All rights reserved. it can be played now: Back © 2014 SAP AG. 223 .Unit 2 – SAP SAPUI5 Development: Unit Lessons SAP SAPUI5 Components and Overview Lesson 2: SAPUI5 Developer Studio Lesson 3: Programming Applications Lesson 4: UI Controls and MVC Lesson 5: Databinding and Databinding . All rights reserved.OData Lesson 6: Resource Handling Lesson 7: Modularization Lesson 8: Localization Lesson 9: Notepad Controls Lesson 10: Components Lesson 11: Extending SAPUI5 Lesson 12: Styling. Theming and CVOM Charts Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files © 2014 SAP AG. Components . the Component Controller that also includes the metadata for runtime component. 225 .Components Overview • UI5 components are independent and reusable parts of the UI5 Application that may be developed by different development teams in different projects.ui. • A UI5 component consists of a folder that has a name of the component and that at least contains two files: o o • Component.core.core. All rights reserved.js .UIComponent o a Faceless Component does not (examples: data transfer helper)  Base class for all Faceless Components: sap.ui. © 2014 SAP AG.Component descriptor that contains the metadata for design time There are two types of components: o a UIComponent has a UI part (examples: custom button or a form)  Base class for all UI Components: sap.json .Component • Components can either inherit from their base classes or from other component in order to inherit and extend its functionality. 3. Set the methods the component should have: samples.extend("samples.button.Component.core.Button").js 1. return this.sap.require("sap.components.Creating a New Component – Component.Component").prototype.commons. 2.components.require("sap.button.declare("samples.Button("btn"). Set the metadata (properties.oButton. { metadata : { properties : { text: "string" } }}).ui.components. jQuery. All rights reserved.ui.UIComponent").createContent = function(){ this.sap.ui. aggregations. © 2014 SAP AG. jQuery. 226 .core.UIComponent.commons.oButton = new sap. events of the new component): sap.ui.button.Component". }. Define an new (UI)Component: jQuery.sap. "version": "0. "dependencies": { } © 2014 SAP AG.1. "keywords": [ "button".components.  The file is not loaded during the runtime of an application and thus not needed there.button".0".json  The component. "example" ].Creating a New Component – component. All rights reserved. { } "name": "samples.json file is needed for design time environments so they know the specifics of the component. "description": "Sample button components". 227 . settings: {text: "Hello World"} }).Using the New Component  Once the Component is defined as above.ui. { component: oComponent }).button". just like any other UI5 Component.components. var oComponent = sap.core. it can be used right away.ComponentContainer("CompCont". id: "Comp". Exercise 17 © 2014 SAP AG.createComponent({ name: "samples.getCore().ui.placeAt("content"). 228 . oCompCont. All rights reserved. var oComponentCont = new sap. All rights reserved. 229 . Create a new Button Component 3. Set its „text“ property 4. Replace the „Submit“ button in the „Enter Data“ panel with your new custom button Solution © 2014 SAP AG.Exercise 17: Components 1. Copy or extend your solution of Exercise 13 2. All rights reserved. 230 .Exercise 17 Solution Creating the new component Using the new component Replacing the old button Back © 2014 SAP AG. © 2014 SAP AG. All rights reserved. 231 .Exercise 17 Solution Solution continued in the Notes section below. All rights reserved. 232 . Theming and CVOM Charts Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files © 2014 SAP AG.OData Lesson 6: Resource Handling Lesson 7: Modularization Lesson 8: Localization Lesson 9: Notepad Controls Lesson 10: Components Lesson 11: Extending SAPUI5 Lesson 12: Styling.Unit 2 – SAP SAPUI5 Development: Unit Lessons SAP SAPUI5 Components and Overview Lesson 2: SAPUI5 Developer Studio Lesson 3: Programming Applications Lesson 4: UI Controls and MVC Lesson 5: Databinding and Databinding . Extending SAPUI5 . All rights reserved. an SVG-based graphical library to visualize data sets • Other libraries need to be loaded separately.Inclusion of External JS Libraries • If UI5 doesn’t provide controls or behaviours that other JavaScript libraries offer. 234 . a Microsoft driven oData library which handles requests and takes care of creating and handling requests in JSON and XML format o D3. jQuery UI o dataJS.g. these libraries can be included into the UI5 based pages • Some JS libraries are already included in UI5 and used by UI5 runtime and can be used without additional loading. another library of interest is o Flot. a <canvas>-based jQuery plug-in for displaying data sets © 2014 SAP AG.: o jQuery. e. o the library can be downloaded and made part of the application project: ►For pie chart support you need also the flot. we take a look at an example using Flot: o One can place the script tags for the library just behind the UI5 bootstrap script tag in the HTML <head> tag.js plugin  You can see the pie chart example here © 2014 SAP AG.Inclusion of External JS Libraries • To show how to load and use an external library.pie. All rights reserved. 235 . All rights reserved.HTML({ id: "pieContainer“.ui.attachAfterRendering(  HTML control’s content is only rendered when the page is loaded or after an event handler is finished  The HTML control provides an afterRendering event. //starts rendering when the placeholder is rendered oHTML.plot($("#pieContainer"). content: "<div id=pieContainer' style=\"height:500px. function(oEvent){ var data = […]. //chart data array $.Inclusion of External JS Libraries  Most libraries require a starting point or a placeholder  This HTML element can be provided by using the UI5 HTML control Exercise 18 // create the HTML control which will be a placeholder var oHTML = new sap. which indicates when the HTML control is finished rendering © 2014 SAP AG. data.core. // rendering pie chart { series: { pie: { show: true } } } }).width: 500px\"></div>" }). 236 . Instantiate an HTML control as a placeholder for the chart with a div element as content and a specific id (“flotContainer”) • new sap.flotcharts. 237 . Place these script tags after the UI5 bootstrap to load flot and flot stack (hint: include excanvas.org/flot/jquery.HTML Next © 2014 SAP AG. Create a new panel named „Flot Panel“ 4.flot. Math.js if you are using IE 8 or older) • <script src='http://www. Create two variables with random data • var aData = []. All rights reserved.push([i.core.flotcharts.js'></script> • <script src='http://www.flot. 5.min. Copy Project SAPUI5-Ex13 to SAPUI5-Ex18 2. i <= 10.ui.random(i)]). for (var i = 0.js'></script> 3. i += 1) aData.Exercise 18: jQuery flot / Part 1 1.stack.org/flot/jquery. 6 Solution © 2014 SAP AG. 238 . Specify a CSS height and width for the div element within the <style> tags 7.Exercise 18: jQuery flot / Part 2 6. { series: {properties for the series} }) 9.data: aData2} ]. [ {label: "Some data".data: aData}. Set the stack property for the series to true and show the bars with a width of 0. Use the AfterRendering event to call the flot chart method • chartHtml.plot($("#flotContainer"). Do the jQuery flot function call in the function attached to afterRendering: • $.attachAfterRendering(…) 8. {label: "Some more data". All rights reserved. All rights reserved. 239 .Exercise 18 Solution Back © 2014 SAP AG. 240 . All rights reserved.Exercise 18 Solution Note the continuation of solution code in the Notes section below © 2014 SAP AG. 241 .OData Lesson 6: Resource Handling Lesson 7: Modularization Lesson 8: Localization Lesson 9: Notepad Controls Lesson 10: Components Lesson 11: Extending SAPUI5 Lesson 12: Styling.Unit 2 – SAP SAPUI5 Development: Unit Lessons SAP SAPUI5 Components and Overview Lesson 2: SAPUI5 Developer Studio Lesson 3: Programming Applications Lesson 4: UI Controls and MVC Lesson 5: Databinding and Databinding . All rights reserved. Theming and CVOM Charts Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files © 2014 SAP AG. Styling and Theming . mixins. All rights reserved.css) SAPUI5 uses LESS to handle the CSS parameters (it also allows calculations. 243 ..) • UI5 Framework handles theme switching at runtime (see next slide) UI5 offers two main options to adjust themes: 1..UI5 Theming • Based on CSS and CSS Parameters • CSS files are separated by control at development time o Additionally: global.. Adjusting CSS directly with standard tools 2.css. shared.css • Every theme uses „base“ CSS plus specific theme related CSS files on top • Generator merges files and appends specific themes to base theme o o o o o Replaces CSS Parameter usages Optional compression/optimization Automatic right-to-left generation (For RTL languages like Hebrew) One CSS file per control library (library. Changing parameters for the main features of a theme using the Theme Designer • See general SAPUI5 Theming Concept © 2014 SAP AG. Switching Themes at Runtime • Themes can be applied via URL-parameters of via the bootstrap: © 2014 SAP AG. OR OR = = 244 . All rights reserved. css Files © 2014 SAP AG. All rights reserved. 245 .The library. . All rights reserved. /* text color can be referenced multiple times*/ [... /* text color is set to 'black' once*/ button { color: @sapUiTextColor.. 246 .] } h2 { color: @sapUiTextColor. reference often Parameters are mixed into the CSS of the controls The parameters are usually set in central files With the LESS generator the parameter values are inserted and CSS only files are generated • Example of a color parameter: @sapUiTextColor: #000000.] } © 2014 SAP AG. /* text color can be referenced multiple times*/ [.CSS Parameters • • • • • Some values (often: colors) used for different elements Parameters: write once. core.theming.core. All rights reserved.CSS Parameters II • Parameter values can be read at runtime with a JavaScript API o This allows transferring UI5 theme parameters to own HTML parts o Useful when one uses technology which cannot be influenced by CSS directly.Parameters").ui.theming. © 2014 SAP AG.ui.require("sap. like Canvas or WebGL jQuery.sap.Parameters.get("sapUiSemanticErrorColor"). 247 . var myColor = sap. All rights reserved. the custom CSS always overwrites the standard UI5 CSS o The parts to be overwritten can be determined using tools like Firebug in Firefox (or press F12 in all other browsers) o It is also important to know that the id given to a control is also the id that the topmost HTML element of this control gets. 2. Thus. It needs to be understood that the more specific selector wins. Using the addStyleClass method that every UI5 control has • One can add a CSS class to the top level HTML element of the UI5 control © 2014 SAP AG. this id can be used as a reference in CSS o The CSS precedence rules may sometimes lead to the impression that UI5 CSS cannot be overridden. 248 . There are two options to style specific elements: 1. One can add <style> or <link> tags in the HTML <head> tag to include new styles o These styles are always processed after the UI5 CSS from the themes o As the last processed CSS wins in case of multiple same CSS rules.Adjusting Styles • In some cases one needs to adjust only small parts of the theme. All rights reserved. 249 .Adjusting Styles – Examples Exercise 19 Example of custom CSS via <style> tag Example of addStyleClass method © 2014 SAP AG. Add a CSS rule which assigns the background-color “red” to the element with your ID • #myId „myId“ selects a control with the ID Solution © 2014 SAP AG. Add a <style> block 4. if it doesn’t already have one 3. Give an ID to “Submit” Button. All rights reserved. 250 .Exercise 19: Change the Button Styling 1. Open exercise 13 2. sapUiBtnStd. • But styling . 251 .myRedButton is not sufficient in this case (there are more specific selectors setting the background-color) • Use .addStyleClass(„myRedButton“). All rights reserved.sapUiBtnNorm.Exercise 19 Solution id of the button • Alternative solution: oButton.myRedButton instead Back © 2014 SAP AG.sapUiBtnS. 252 . All rights reserved.The Theme Designer • Parameters can be easily modified using the UI5 Theme Designer o Easy CSS-free theming/branding as long as mainly colors need to be changed o Live preview in real applications o Other SAP UI technologies like Web Dynpro are also covered © 2014 SAP AG. Supported Themes • Themes currently shipped with UI5: o o o o Blue Crystal (mobile and desktop) Gold Reflection Mobile Visual Identity (mobile devices only) High Contrast Black Blue Crystal Demo-Link for Blue Crystal Gold Reflection Demo-Link for Gold Reflection (switch to “Light Shell” Use webkit browser such as Google Chrome under: Home > Options > Design) to view © 2014 SAP AG. All rights reserved. Mobile Visual Identity Demo-Link for Mobile Visual Identity High Contrast Black Demo-Link for High Contrast Black Use webkit browser such as Google Chrome to view 253 . 254 .OData Lesson 6: Resource Handling Lesson 7: Modularization Lesson 8: Localization Lesson 9: Notepad Controls Lesson 10: Components Lesson 11: Extending SAPUI5 Lesson 12: Styling. All rights reserved.Unit 2 – SAP SAPUI5 Development: Unit Lessons SAP SAPUI5 Components and Overview Lesson 2: SAPUI5 Developer Studio Lesson 3: Programming Applications Lesson 4: UI Controls and MVC Lesson 5: Databinding and Databinding . Theming and CVOM Charts Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files © 2014 SAP AG. Theming and CVOM Charts .Styling. Overview • The sap. All rights reserved. • CVOM API Reference © 2014 SAP AG.viz.ui5 charting library provides a set of flexible chart controls that allow to easily represent business data. 256 . Bar Column Combination Bubble Scatter sap.ui5.ui5.viz.Column sap.Bubble sap.ui5.ui5.Combination sap.Pie sap.viz.viz.Line sap.CVOM Chart Types / Part 1 Line Pie Donut Bar sap.viz.viz.viz.ui5. All rights reserved.ui5. 257 .ui5.viz.viz.Donut sap.ui5.Scatter © 2014 SAP AG. viz.CVOM Chart Types / Part 2 Exercise 20 Stacked Column Stacked Column (%) Dual Bar Dual Line sap.DualLine Dual Combination Dual Column Dual Stacked Column Dual Stacked Column (%) sap.ui5.ui5.ui5. StackedColumn sap.ui5. All rights reserved. DualStackedColumn sap.viz.DualBar sap. DualStackedColumn100 © 2014 SAP AG. DualColumn sap.viz.viz.viz.ui5. StackedColumn100 sap.viz. 258 .ui5.ui5.viz.ui5.viz. DualCombination sap. Open your solution of exercise 18 2.core. measures and data path: • • • Dimensions: axis: 1. value: ‘{ProductSales}’ Data: path: ‘/Product_Sales_for_1997’ 5. name: ‘Name’. 259 .viz.FlattenedDataset 4. Set the dimensions. Instantiate a CVOM Donut Chart and set the dataset • sap.viz 3. All rights reserved.core. Extend the UI5 bootstrap to also load the CVOM Chart library • sap. Create a dataset after the code for the OData Table you generated in Exercise 13 • sap.Exercise 20: CVOM Donut Chart 1.viz. value: ‘{CategoryName}’ Measures: name: ‘Sales’.FlattenedDataset 7. Set the model on the dataset (same model that is set for the OData Table) 6. Add the CVOM Chart to the OData Panel Solution © 2014 SAP AG. Exercise 20 Solution • Code from the OData Exercise Back © 2014 SAP AG. 260 . All rights reserved. Theming and CVOM Charts Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files © 2014 SAP AG.Unit 2 – SAP SAPUI5 Development: Unit Lessons SAP SAPUI5 Components and Overview Lesson 2: SAPUI5 Developer Studio Lesson 3: Programming Applications Lesson 4: UI Controls and MVC Lesson 5: Databinding and Databinding . All rights reserved.OData Lesson 6: Resource Handling Lesson 7: Modularization Lesson 8: Localization Lesson 9: Notepad Controls Lesson 10: Components Lesson 11: Extending SAPUI5 Lesson 12: Styling. 261 . SAPUI5 Mobile . but for a perfect user experience on mobile. controls must be tailored to screen size. BlackBerry from build 10 (to be extended) o Only runs in webkit browsers like Google Chrome o NEW: now also available for a unified design on desktops with touch screen (Theme: Blue Crystal) • All core concepts of UI5 remain the same o Data Binding. 263 . touch interaction and UI paradigms • A dedicated UI5 control library called “sap.m” has been created o Contains 40 controls – number is growing o Entirely optimized for smartphones and tablets o Native-like visuals and interaction on Apple iOS and Android (but using the black-and-golden SAP color scheme) o Platform support: iOS from build 5. Theming.3.SAPUI5 Mobile • UI5 is intended to also run on tablets like iPad. MVC. All rights reserved. localization. … © 2014 SAP AG. control development model. Android from build 2. Android: 264 . All rights reserved.SAPUI5 Mobile Example Screens iOS: © 2014 SAP AG. fade.m.m.App control (and sap.Typical SAPUI5 Mobile Usage • Typical Mobile application structure: o Pages between which the user can navigate o Navigation can imply drilldown semantics • sap. flip) o Custom animations can be provided o Also takes care of setting up the screen to feel native-like (no zooming. 265 .Page controls are added and navigated between o Animation can be chosen (show.NavContainer) provides this navigation logic: o Typically used as root control o sap.makit Chart library as mobile-optimized alternative to CVOM charts © 2014 SAP AG.m.m.…) • sap.m. slide. All rights reserved.List control with different ListItem types plays a central role for data display • sap.Carousel control for swipe navigation between same-level pages • sap. Device.Device API • The sap.Device.Device.browser (information about the used browser) • sap.ui.ui.ui.Device. 266 .Device is the Device and Feature Detection API of the SAP UI5 Library.media (Event API for Screen width media queries) • sap.Device. Features that can be detected are: • sap.ui.ui.os (information about the operating system of the device) • sap. All rights reserved.ui.support (information about detected capabilities of the used browser or device) © 2014 SAP AG.orientation (Orientation Change Event API – portrait or landscape) • sap. 267 .SAPUI5 Mobile Example Code Exercise 21 MVI Theme : Blue Crystal Theme : © 2014 SAP AG. All rights reserved. Exercise 21: A Simple Mobile App 1. © 2014 SAP AG. Replace the entries in the data-sap-ui-libs parameter with sap. (hint: if you want to use the sap_mvi theme. the input variables and a „submit“ Button to the page. All rights reserved. you must add the data-sap-ui-xx-fakeOS parameter) 3. Add a function to the button to alert the values of the input fields. 8. 2.Input 5.Page 6. Add two labels. Solution 268 . Create a new SAPUI5-project WDE350-Ex21. Create a page: • new sap. Add the page to the app Variable.m.m and the theme with sap_bluecrystal within the bootstrap. 7. 4. Create an app variable as root container for your mobile app. Create 2 variables for input fields with empty values and placeholder text: • new sap.m. All rights reserved.Exercise 21 Solution (1) Back © 2014 SAP AG. 269 . 270 .Exercise 21 Solution (2) See solution details in the Notes section below. © 2014 SAP AG. All rights reserved. gif.properties o i18n_de. all file names shall start with an upper case letter • <img folder> … all image files go here (png. all view and view controller files go here.properties o i18n_en.css … plus potentially more stylesheets • <ext folder>… all reused third party java script goes here • <i18n folder> … all property files for localization go here o i18n.js • <css folder> … all CSS files go here (and potentially related images) o style.html © 2014 SAP AG. All rights reserved. jpg.. 271 . …) • <someNamespace> … all on-the-fly controls defined within the application go here o <controlName>.Best Practice for a Mobile Application • When creating reasonably complex applications a clean architecture is key for efficient development and maintainability.. Here is an example structure for a mobile application: <webapp_root_folder> • application.js • index. all helper classes go here • <view folder> .properties … • <model folder> • <util folder> . Optimizing UI5 Files . o Modules are loaded synchronously. 273 . our server side component instructs the browser to use a ModifiedSince approach for detecting resource changes. but still requires the same number of requests as the uncached mode. o This allows caching of the content. but also for our central installations. All rights reserved. • If configured. o So whenever we update our central installation (usually several times a day). © 2014 SAP AG.Modularization in Development Mode • UI5 has a built-in Modularization concept that allows to split larger JavaScript development into so called modules. • Modularization and Caching together form our development mode: you can modify a small file and – ideally – the browser has to reload only that module o We do not only use this internally for development. the browser should detect changes and reload the files. Reducing the Number of JavaScript Files sap-ui-core.06 MB.js: 18 requests.js • loads library.js: 99 requests.54 MB. 831ms sap-ui-core-all. but every module/control is only parsed when required (with sapui-core.js • loads the complete library. • loads control behaviour and rendering files when control is instantiated. all code is parsed • In the „opt“ mode. 1.js) © 2014 SAP AG. both advantages are combined: one request per library. All rights reserved. 439ms 274 .  only needed code is loaded  many requests sap-ui-core-all.js file for each used library. sap-ui-core. including the code for all controls  less requests  bigger filesize. 1. it is best practice to include some versionspecific into the requests URLs (cache buster).Configurable Caching With some configuration either in the web. All rights reserved. 275 . our resource handler can be configured to use a different caching strategy (e. Load resources/sap-ui-cachebuster/sap-ui-core.xml or the server configuration.g. timeto-life). • • When accessed via port 8080.js instead of resources/sap-ui-core. Our resource handler provides such a unique id and also provides a way to automatically convert a static URL request into a request with that ID. • • The central UI5 installations are double-configuration installations. © 2014 SAP AG.js to trigger this behavior. they use the caching-mode. • • • This avoids the ModifiedSince requests. but still wants the convenience of up-to-date checks. but when accessed via port 8090. When one doesn’t want to use the ModifiedSince requests. they use the development mode. All rights reserved. 276 .Appendix A: Glossary Term Description ABAP Advanced Business Application Programming AJAX Asynchronous JavaScript and XML BSP Business Server Page CDN Content Delivery Network CSS Cascading Stylesheets DOM Document Object Model EDM Entity Data Model EDMX XML file that defines an Entity Data Model HTML Hypertext Markup Language I18N Internationalisation JSON JavaScript Object Notation © 2014 SAP AG. Appendix A: Glossary Term Description MVC Model-View-Controller NGAP Next Generation ABAP Platform OData Open Data Protocol RIA Rich Internet Application SDK Software Development Kit UI User Interface UX User Experience XHR XML-Http-Request XML Extensible Markup Language XSS Cross-Site-Scripting © 2014 SAP AG. All rights reserved. 277 . Unit Summary After completing this unit. 278 . you should now be able to: • Develop applications using the SAP SAPUI5 framework © 2014 SAP AG. All rights reserved.