SAPX05-en-Col95-Fv-Show.pdf

March 26, 2018 | Author: Chinna Selva | Category: Java Script, Eclipse (Software), J Query, Web Browser, Firefox
Share
Report this link


Comments



Description

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