Sapx05 en Col95 Fv Show
Short Description
Descripción: SAP SAPUI5 User Experience Development...
Description
SAPX05 SAP SAPUI5 User Experience Development
SAP SAPGUI5 Training System: Windows 2008 R2, with latest SAP SAPUI5 Instructor Handbook Collection 95
© 2014 SAP AG. All rights reserved.
1
© 2014 SAP AG. All rights reserved.
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. Microsoft, Windows, Excel, Outlook, PowerPoint, Silverlight, and Visual Studio are registered trademarks of Microsoft Corporation. Apache Maven, Maven, Apache, the Apache feather logo, and the Apache Maven project logos are trademarks of The Apache Software Foundation. This course is not designed to teach candidates MAVEN technology. Existing knowledge of MAVEN is a pre-requisite. IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, z10, z/VM, z/OS, OS/390, zEnterprise, PowerVM, Power Architecture, Power Systems, POWER7, POWER6+, POWER6, POWER, PowerHA, pureScale, PowerPC, BladeCenter, System Storage, Storwize, XIV, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, AIX, Intelligent Miner, WebSphere, Tivoli, Informix, and Smarter Planet are trademarks or registered trademarks of IBM Corporation. Linux is the registered trademark of Linus Torvalds in the United States and other countries. Adobe, the Adobe logo, Acrobat, PostScript, and Reader are trademarks or registered trademarks of Adobe Systems Incorporated in the United States and other countries. Oracle and Java are registered trademarks of Oracle and its affiliates. UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group. Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems Inc. HTML, XML, XHTML, and W3C are trademarks or registered trademarks of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology. Apple, App Store, iBooks, iPad, iPhone, iPhoto, iPod, iTunes, Multi-Touch, Objective-C, Retina, Safari, Siri, and Xcode are trademarks or registered trademarks of Apple Inc. IOS is a registered trademark of Cisco Systems Inc.
Google App Engine, Google Apps, Google Checkout, Google Data API, Google Maps, Google Mobile Ads, Google Mobile Updater, Google Mobile, Google Store, Google Sync, Google Updater, Google Voice, Google Mail, Gmail, YouTube, Dalvik and Android are trademarks or registered trademarks of Google Inc. INTERMEC is a registered trademark of Intermec Technologies Corporation. Wi-Fi is a registered trademark of Wi-Fi Alliance. Bluetooth is a registered trademark of Bluetooth SIG Inc. Motorola is a registered trademark of Motorola Trademark Holdings LLC. Computop is a registered trademark of Computop Wirtschaftsinformatik GmbH. SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP BusinessObjects Explorer, StreamWork, SAP HANA, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries. Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects Software Ltd. Business Objects is an SAP company. Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL Anywhere, and other Sybase products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Sybase Inc. Sybase is an SAP company. Crossgate, m@gic EDDY, B2B 360°, and B2B 360° Services are registered trademarks of Crossgate AG in Germany and other countries. Crossgate is an SAP company. All other product and service names mentioned are the trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary. The information in this document is proprietary to SAP. No part of this document may be reproduced, copied, or transmitted in any form or for any purpose without the express prior written permission of SAP AG.
RIM, BlackBerry, BBM, BlackBerry Curve, BlackBerry Bold, BlackBerry Pearl, BlackBerry Torch, BlackBerry Storm, BlackBerry Storm2, BlackBerry PlayBook, and BlackBerry App World are trademarks or registered trademarks of Research in Motion Limited. © 2014 SAP AG. All rights reserved.
2
© 2014 SAP AG. Alle Rechte vorbehalten.
Weitergabe und Vervielfältigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer, ohne die ausdrückliche schriftliche Genehmigung durch SAP AG nicht gestattet. In dieser Publikation enthaltene Informationen können ohne vorherige Ankündigung geändert werden.
Google App Engine, Google Apps, Google Checkout, Google Data API, Google Maps, Google Mobile Ads, Google Mobile Updater, Google Mobile, Google Store, Google Sync, Google Updater, Google Voice, Google Mail, Gmail, YouTube, Dalvik und Android sind Marken oder eingetragene Marken von Google Inc.
Die von SAP AG oder deren Vertriebsfirmen angebotenen Softwareprodukte können Softwarekomponenten auch anderer Softwarehersteller enthalten.
INTERMEC ist eine eingetragene Marke der Intermec Technologies Corporation.
Microsoft, Windows, Excel, Outlook, PowerPoint, Silverlight und Visual Studio sind eingetragene Marken der Microsoft Corporation.
Bluetooth ist eine eingetragene Marke von Bluetooth SIG Inc.
Apache Maven, Maven, Apache, the Apache feather logo, and the Apache Maven project logos sind eingetragene Marken der Apache Software Foundation. IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, z10, z/VM, z/OS, OS/390, zEnterprise, PowerVM, Power Architecture, Power Systems, POWER7, POWER6+, POWER6, POWER, PowerHA, pureScale, PowerPC, BladeCenter, System Storage, Storwize, XIV, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, AIX, Intelligent Miner, WebSphere, Tivoli, Informix und Smarter Planet sind Marken oder eingetragene Marken der IBM Corporation. Linux ist eine eingetragene Marke von Linus Torvalds in den USA und anderen Ländern. Adobe, das Adobe-Logo, Acrobat, PostScript und Reader sind Marken oder eingetragene Marken von Adobe Systems Incorporated in den USA und/oder anderen Ländern. Oracle und Java sind eingetragene Marken von Oracle und/oder ihrer Tochtergesellschaften. UNIX, X/Open, OSF/1 und Motif sind eingetragene Marken der Open Group. Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame und MultiWin sind Marken oder eingetragene Marken von Citrix Systems, Inc. HTML, XML, XHTML und W3C sind Marken oder eingetragene Marken des W3C®, World Wide Web Consortium, Massachusetts Institute of Technology. Apple, App Store, iBooks, iPad, iPhone, iPhoto, iPod, iTunes, Multi-Touch, Objective-C, Retina, Safari, Siri und Xcode sind Marken oder eingetragene Marken der Apple Inc. IOS ist eine eingetragene Marke von Cisco Systems Inc. RIM, BlackBerry, BBM, BlackBerry Curve, BlackBerry Bold, BlackBerry Pearl, BlackBerry Torch, BlackBerry Storm, BlackBerry Storm2, BlackBerry PlayBook und BlackBerry App World sind Marken oder eingetragene Marken von Research in Motion Limited.
© 2014 SAP AG. All rights reserved.
Wi-Fi ist eine eingetragene Marke der Wi-Fi Alliance. Motorola ist eine eingetragene Marke von Motorola Trademark Holdings, LLC. Computop ist eine eingetragene Marke der Computop Wirtschaftsinformatik GmbH. SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP BusinessObjects Explorer, StreamWork, SAP HANA und weitere im Text erwähnte SAP-Produkte und -Dienstleistungen sowie die entsprechenden Logos sind Marken oder eingetragene Marken der SAP AG in Deutschland und anderen Ländern. Business Objects und das Business-Objects-Logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius und andere im Text erwähnte BusinessObjects-Produkte und Dienstleistungen sowie die entsprechenden Logos sind Marken oder eingetragene Marken der Business Objects Software Ltd. Business Objects ist ein Unternehmen der SAP AG. Sybase und Adaptive Server, iAnywhere, Sybase 365, SQL Anywhere und weitere im Text erwähnte Sybase-Produkte und -Dienstleistungen sowie die entsprechenden Logos sind Marken oder eingetragene Marken der Sybase Inc. Sybase ist ein Unternehmen der SAP AG. Crossgate, m@gic EDDY, B2B 360°, B2B 360° Services sind eingetragene Marken der Crossgate AG in Deutschland und anderen Ländern. Crossgate ist ein Unternehmen der SAP AG. Alle anderen Namen von Produkten und Dienstleistungen sind Marken der jeweiligen Firmen. Die Angaben im Text sind unverbindlich und dienen lediglich zu Informationszwecken. Produkte können länderspezifische Unterschiede aufweisen. Die in dieser Publikation enthaltene Information ist Eigentum der SAP. Weitergabe und Vervielfältigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer, nur mit ausdrücklicher schriftlicher Genehmigung durch SAP AG gestattet.
3
Course Topics
This course covers: • • • • • • • • • • • • • • • •
SAP User Experience Design Strategy Overview SAPUI5 Overview SAP UI Development Toolkit for HTML5 Programming Applications SAPUI5 Developer Studio Creating a SAPUI5 Project Model – View – Controller Databinding & Databinding - OData Resource Handling / Localization Notepad Controls Components Extending SAPUI5 Styling & Theming CVOM Charts SAPUI5 Mobile Optimizing SAPUI5
© 2014 SAP AG. All rights reserved.
4
Course Description
•
This course is designed to give participants the opportunity to gain an understanding of SAP SAPUI5 and how it pertains to SAP User Experience strategy
•
Participants will learn how to program applications using SAPUI5 by creating a new project in Eclipse
•
Additional topics in this course include: Model – View – Controller; Databinding; Databinding – oData; Resource Handling / Localization; Notepad Controls; Components; Extending SAPUI5; Styling & Theming; CVOM Charts; SAPUI5 Mobile; Optimizing SAPUI5
•
There will be hands-on exercises performed during the course to gain experience with SAP SAPUI5 so as to prepare the participant for projects
© 2014 SAP AG. All rights reserved.
5
Course Goals
This course will prepare you to: • Understand SAP’s User Experience strategy • Understand and use the SAPUI5 APIs • Create applications for mobile using SAP’s SAPUI5 framework
© 2014 SAP AG. All rights reserved.
6
Course Objectives
After completing this course, 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. All rights reserved.
7
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. All rights reserved.
8
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
Course Content Content: Unit 1 – SAP SAPUI5 Components and Overview Unit 2 – SAP SAPUI5 Development
© 2014 SAP AG. All rights reserved.
10
Recommended Course Outline and Schedule Preface Day 1: Welcome & Introductions UNIT 1 – SAP SAPUI5 Components and Overview •
Lesson 1: SAP SAPUI5 Components and Overview
Unit 2 – SAP SAPUI5 Development •
Lesson 2: SAPUI5 Developer Studio
•
Lesson 3: Programming Applications
•
Lesson 4: UI Controls and MVC
•
And associated lab exercises…
© 2014 SAP AG. All rights reserved.
11
Course Outline and Schedule Preface
Day 2: Unit 2 – SAP SAPUI5 Development (Continued) •
Lesson 5: Databinding and Databinding - OData
•
Lesson 6: Resource Handling
•
And associated lab exercises…
© 2014 SAP AG. All rights reserved.
12
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.
13
UNIT 1 SAP SAPUI5 Components and Overview
Unit 1 – SAP SAPUI5 Architecture and Overview: Unit Objectives
After completing this unit, you will be able to: •
Describe SAP SAPUI5 architecture, components and solution
© 2014 SAP AG. All rights reserved.
15
Unit 1 – SAP SAPUI5 Components and Overview: Unit Lessons SAP SAPUI5 Components and Overview Lesson 1: SAP SAPUI5 Components and Overview
© 2014 SAP AG. All rights reserved.
16
Lesson Objectives
After completing this lesson, 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
Introduction to SAP User experience Strategy
How to Achieve Design Innovation?
Human Values
(usability, desirability)
Business (viability)
© 2014 SAP AG. All rights reserved.
DESIGN INNOVATION
Technology (feasibility)
19
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, intuitive, and mobile experience. © 2014 SAP AG. All rights reserved.
20
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
SAP User Experience Strategy Existing Applications
Usage/Reach
New Applications
NEW © 2014 SAP AG. All rights reserved.
SAP Top use scenarios Fiori Core use Renovation scenarios (SAPUI5)
RENEW
Enablement Tools Specific (SAPUI5customer & Screen value Personas) use scenarios
ENABLE 22
SAP User Experience Strategy
NEW
RENEW
ENABLE
UX DESIGN SERVICES © 2014 SAP AG. All rights reserved.
23
SAP User Experience Strategy
NEW
RENEW
ENABLE
UX DESIGN SERVICES © 2014 SAP AG. All rights reserved.
24
Have you seen these consumer apps from SAP?
Recalls Plus
© 2014 SAP AG. All rights reserved.
PhotoTribe
Fan Experience
MyRunway
25
Provide Consumer-Grade UX for NEW Applications
SAP Fraud Management
© 2014 SAP AG. All rights reserved.
SAP Customer Engagement Intelligence 26
SAP User Experience Strategy
NEW
RENEW
ENABLE
UX DESIGN SERVICES © 2014 SAP AG. All rights reserved.
27
SAP Fiori – Keep Simple Things Simple
© 2014 SAP AG. All rights reserved.
28
SAP User Experience Design Principles
Role-based
Responsive
Simple
Coherent
Instant Value
De-compose into task-based experience
All sizes, devices, versions, channels
1-1-3 (1 user, 1 use case, 3 screens)
Apps that speak the same language
Low barrier to adoption
© 2014 SAP AG. All rights reserved.
29
SAP User Experience Strategy
NEW
RENEW
ENABLE
UX DESIGN SERVICES © 2014 SAP AG. All rights reserved.
30
ENABLE customer specific value scenarios Example: SAP Screen Personas for SAP GUI
• Allows ‘Do-it-Yourself’ to your specific needs
© 2014 SAP AG. All rights reserved.
31
Key Enablement Tools SAP Screen Personas
Floorplan Manager
(for SAP GUI screens)
(for FPM screens*)
NWBC & Side Panel
Theme Designer
(all screens)
(all screens)
© 2014 SAP AG. All rights reserved.
SAPUI5 Application Development Tools
32
SAP Key UI Tools & Technologies (Big Picture)
UI Theme Designer
SAP NetWeaver Portal
UI Clients
SAP NetWeaver Business Client
SAP GUI
SAPUI5 Application Development Tools
UI Tools
Flexible UI Designer
SAPUI5 WebDynpro ABAP/ Floorplan Manager
*
SAP Screen Personas
DYNPRO
UI Technologies
GATEWAY
Backend * Harmonized in Run & Design Time with WebUIF © 2014 SAP AG. All rights reserved.
33
Why focus on User Experience?
Great User Experience
• UX impacts Business Value Gain productivity Increase user adoption Decrease user errors Save training costs
© 2014 SAP AG. All rights reserved.
$ 34
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.
35
SAPUI5 Overview, Architecture and Components
SAP UI Development Toolkit for HTML5
•
SAP UI Development Toolkit for HTML5 o The official long name
•
SAPUI5 o The short name
© 2014 SAP AG. All rights reserved.
37
Main UI5 Characteristics
•
SAPUI5 is an extensible JavaScript-based HTML5 browser rendering library for Business Applications – – – – – – –
Well-designed API, easy to consume and use Extensible UI component model, including tooling support High performance, SAP product standard compliant Powerful theming support based on CSS Provides Ajax capabilities Based on open standards like OpenAjax, JavaScript, CSS, HTML 5, etc. Using and including the popular jQuery library
© 2014 SAP AG. All rights reserved.
38
UI5 Key Components
Client side Control libraries (JavaScript, CSS and image files) Core (JavaScript files) Test suite (HTML, 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. All rights reserved.
39
UI5 Browser Support
Internet Explorer
Firefox
Chrome
Safari
Version 8 and upwards
Version 10 and upwards Version 10 ESR and upwards
Version 1 and upwards
Version 3 and upwards
(with limitations)*
*Internet Explorer 8 is supported with graceful degradation for CSS3 features like rounded corners, text-shadows, etc.
© 2014 SAP AG. All rights reserved.
40
UI5 Release Plan
Development track Identified by a major and an odd minor version number, e.g. 1.5.1 The versions of this track are released internally and are not meant to be used in products shipped to customers.
Release track Identified by a major and an even minor version number, e.g. 1.4.1 The versions of this track are released externally. Only these versions are allowed to be used in production.
© 2014 SAP AG. All rights reserved.
41
UI5 Architecture Overview
© 2014 SAP AG. All rights reserved.
42
SAPUI 5 Architecture Overview
Themes
SAPUI5 Libraries
Controls
Data Binding
•
Core JavaScript framework including jQuery
•
Extension libraries
Desktop
Mobile
• •
jQuery.UI
Render Manager
UI
SAPUI5 Core
Optional server component
Desktop
Mobile
Control Base
•
„Helper“ assets like e.g.
•
• Event
Resources
Device
Utils
SAP jQuery Plug-ins
Controls Themes
Logger
•
Less (less.js) the dynamic style language Code minimizer
jQuery
(Static) Web Server
© 2014 SAP AG. All rights reserved.
Resource Handler (optional)
43
UI5 Control Libraries sap.ui.commons
sap.ui.ux3
Includes “bread and butter" controls like TextField, Button
Includes UX3 patterns, mainly available in “Gold Reflection” design, e.g.: Shell
sap.ui.table
sap.m
Includes the Table control
Includes controls for mobile devices
And more, like sap.viz, sap.ui.dev … © 2014 SAP AG. All rights reserved.
44
UI5 and Extensibility
UI5 allows application developers to Include their own JavaScript, 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.
© 2014 SAP AG. All rights reserved.
45
UI5 Knowledge and Test Resources
Documentation and Information
UI5 support and question channels
• UI5 Wiki
• SAPUI5 Community
• UI5 Mobile Wiki
• CSN Component:
• UI5 Tools Wiki
• CA-UI5 (UI5 Runtime)
• Demokit
• CA-UI5-MOB (UI5 Mobile Lib)
• API Documentation • General UI5 Documentation
Control and code testing • Test Suite
© 2014 SAP AG. All rights reserved.
UI5 Tools support and question channels • SAPUI5 Tools Community • CSN Component: • CA-UI5-TOL (UI5 Tools)
46
UI5 Application Example •
Showcase of SAP Applications built with UI5
© 2014 SAP AG. All rights reserved.
47
How to get UI5 running
•
UI5 mainly consists of JavaScript, 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, 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. All rights reserved.
48
Unit Summary
After completing this unit, you should now be able to: •
Describe SAP SAPUI5 architecture and components
© 2014 SAP AG. All rights reserved.
49
UNIT 2 SAP SAPUI5 Development
Unit 1 – SAP SAPUI5 Development: Unit Objectives
After completing this unit, you will be able to: •
Develop applications using SAP
© 2014 SAP AG. All rights reserved.
51
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.
52
Exercise: Lab Environment Setup 1
•
Launch Eclipse from Start All Programs eclipse eclipse.
•
When the Workspace Launcher dialog window appears, enter the workspace N/workspace and tick the check box Use this as the default and do not ask again.
•
If you change your default project location, make a note of it.
© 2014 SAP AG. All rights reserved.
53
Lab Environment Setup 2
•
Close the Welcome tab.
•
Go to File Import.
•
In the Import window that appears, select General Existing Projects into Workspace and then choose Next.
© 2014 SAP AG. All rights reserved.
54
Lab Environment Setup 3
•
On the current window, click Select root directory and click Browse…
•
On the next window, navigate to the Application (N:) drive SAPX05_95 and select as root directory.
•
Click OK. © 2014 SAP AG. All rights reserved.
55
Lab Environment Setup 4
•
Make sure that all project solutions are appearing in the Projects area are ticked, and press Finish
•
Your lab exercises will make reference to these project folders throughout
© 2014 SAP AG. All rights reserved.
56
Total View
• Note that these are solution project files for your exercises • Also note that there additional sample projects and demonstration projects • Next, you will prepare the FireFox and FireBug environment. You can test your exercises on the installed version of Google Chrome, if you prefer.
© 2014 SAP AG. All rights reserved.
57
Installing the Firebug Add-on in FireFox (1)
•
Launch FireFox using Start All Programs, 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.
•
Use the search field to search for the Firebug Addon.
•
Install it by means of the corresponding Install button:
© 2014 SAP AG. All rights reserved.
58
Installing the Firebug Add-on in FireFox (2)
•
Upon installation, note the new tab and the change in status:
•
Close all tabs.
© 2014 SAP AG. All rights reserved.
59
Setup for Debugging with FireBug
•
Make sure that your Firebug Console is activated/enabled by going to FireFox and click the FireBug and set to On for All Web Pages:
•
Enable the Console and click All, as you see in the screen shot example below:
© 2014 SAP AG. All rights reserved.
60
SAPUI5 Developer Studio
Overview
•
SAPUI5 Developer Studio is a set of tools for Eclipse that greatly simplify the development process for UI5 applications and controls, including:
o o o o o o
Wizards for project and view/controller creation Wizards for control development Code Completion for UI5 controls TeamProvider for NGAP and BSP repositories Application preview with an embedded Jetty server Proxy-servlet to prevent cross-site-scripting errors
© 2014 SAP AG. All rights reserved.
62
Installation
NOTE – the training system already has all relevant components installed
© 2014 SAP AG. All rights reserved.
63
Installation
•
Prerequisite: Install the latest Java Development Kit (currently Version 7), if it is not installed already.
•
Install the Plugin into a version of standard eclipse or into the NWDS.
•
If you want to use the SAPUI5 Repository Team Provider you should choose the 32bit version.
•
To setup SAPUI5 you have to install the plugins by using the update sites of your IDE.
•
Once Eclipse/NWDS has been (re)started, 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.
© 2014 SAP AG. All rights reserved.
64
Public Trial
•
A trial version of the SAPUI5 framework has been released in the SAP Community Network
•
http://scn.sap.com/community/de veloper-center/front-end
•
Includes static JavaScript-Files, war-Files and the Demokit
© 2014 SAP AG. All rights reserved.
65
Creating a UI5 Project with SAPUI5 Developer Studio
Creating a New SAPUI5 Project
In Eclipse , right-click on the project pane to bring up the context menu (or use the File New… entry from the Eclipse menu).
Choose New Project…
© 2014 SAP AG. All rights reserved.
67
Creating a New SAPUI5 Project
Select "SAPUI5 Application Project".
Click "Next".
© 2014 SAP AG. All rights reserved.
68
Creating a New SAPUI5 Project
Enter the name of the project – e.g. Hello_World.
Choose between „Desktop“ or „Mobile“ as the target device for your new project.
We‘ll use „Desktop“ for this exercise.
Leave the checkbox "create an initial View" checked.
Click "Next".
© 2014 SAP AG. All rights reserved.
69
Creating a New SAPUI5 Project
Enter the name of the initial view: e.g. "main".
Leave the rest of entries at default settings.
Click "Next".
© 2014 SAP AG. All rights reserved.
70
Creating a New SAPUI5 Project
The last window is a summary screen containing the project properties.
Click "Finish" to create the new project.
© 2014 SAP AG. All rights reserved.
71
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. All rights reserved.
72
The New Project IDE
© 2014 SAP AG. All rights reserved.
73
Adding a Shell to the View
© 2014 SAP AG. All rights reserved.
74
Adding the sap.ui.ux3 library
© 2014 SAP AG. All rights reserved.
75
Testing an Application (1)
Run on Server or Web App Preview – run on server is better, because it has a fixed port instead of a random one-time port used by Web App Preview. For testing purposes during class, you can select Web App Preview – note the port issue if you change to Google or FireFox
© 2014 SAP AG. All rights reserved.
76
Testing an Application (2)
© 2014 SAP AG. All rights reserved.
77
Web Application Preview – Jetty Disadvantages compared to testing on server:
•
•
Based on Internet Explorer, therefore does not display most CSS3 features.
•
Creates a random port which stops working when Web App View is closed, if link is copied into a browser for debugging, this link stops working as well.
•
Therefore, this is not recommended.
© 2014 SAP AG. All rights reserved.
78
Exercise 01: Create a simple SAPUI5 HelloWorld
1. In the SAPUI5 Developer Studio, create a new SAPUI5 Application Project with the name SAPUI5-Exc01-HelloWorld 2. Open the index.html and add the following lines between the script-Tag in the following position:
3. Save and run the application using the Web App Preview (Jetty)
© 2014 SAP AG. All rights reserved.
79
Exercise 1: Create a simple SAPUI5 HelloWorld
•
Results of test:
© 2014 SAP AG. All rights reserved.
80
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.
81
Programming Applications
SAPUI5 Bootstrap
•
UI5 pages always have to start with the bootstrap, 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, comma-separated. o data-sap-ui-theme: the theme o There are more attributes: data-sap-ui-language, data-sap-ui-rtl, … o Instead of putting the attributes in the script tag, many can also be added as URL parameters
© 2014 SAP AG. All rights reserved.
83
Runtime Behavior of Bootstrap
•
jQuery enrichment with plugins – namespace jQuery.sap
•
Creation global object sap
•
SAPUI5 core class and all dependencies are executed
•
Runtime configuration is determined
•
All libraries and modules declared in the config. and their dependencies are loaded
•
Stylesheet for the config. themes of each loaded libs are added to the page
•
Loading of libs is finished and document ready state initEvent of Core fired all registered eventhandlers are executed
© 2014 SAP AG. All rights reserved.
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.getCore().getConfiguration(); sap.ui.core.Configuration
© 2014 SAP AG. All rights reserved.
85
Configuration Fallbacks
1.
System defined defaults
2.
Server wide defaults, read from /sap-ui-config.json
Properties of the global configuration object window["sap-uiconfig"] 1. A configuration string in the data-sap-ui-config attribute of the bootstrap tag 3.
4.
Individual data-sap-ui-xyz attributes of the bootstrap tag
5.
Using URL parameters
6.
Setters in this Configuration object (only for some parameters)
© 2014 SAP AG. All rights reserved.
86
Configuration Attributes
Attribute
Type
Default
RT-Modification
Description
theme
string
Base
sap.ui.getCore.app lyTheme()
The theme to be used
inspect
boolean
false
when set to true, the sap-ui-debug.js module is included and provides some supportability features
formatLocal
string
undefined
Locale to use for formatting purpose, default is language locale
ConfigurationOptions
© 2014 SAP AG. All rights reserved.
87
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).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.
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. All rights reserved.
88
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. Bootstrap 2. Application 3. UI-Area
© 2014 SAP AG. All rights reserved.
89
Useful Core Functions sap.ui.getCore()
jQuery.sap.domById(id)
Gets any HTML element with id id If there is also a UI5 control with id id, the sap.ui.getCore().byId(id) element returned is the topmost HTML element of this UI5 control (the UI5 control Gets an instance of a UI5 control which was id is always used there) created with id id Similar to document.getElementById but Can be used to access removed controls gets rid of IE bug which also retrieves (even though the id doesn’t exist in the elements with the name of id DOM anymore) Gets a core instance
sap.ui.getCore().applyChanges()
jQuery.sap.byId(id)
Carries out and renders the changes for UI5 Returns the jQuery object of the DOM controls immediately, 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. All rights reserved.
90
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.
91
UI Controls
Overview
•
Working with controls
•
Working with Layouts
•
The UI-control gallery provides deep information on each UI-control with reference to the API.
© 2014 SAP AG. All rights reserved.
93
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.
94
Button •
Simple push button
•
attachPress assign event handler for push action
•
Lite property for a button with hover effect
© 2014 SAP AG. All rights reserved.
95
TextField
•
Single row Input
•
HTML or CSS input is escaped
•
Properties value, enabled, visible, valueState
•
Events change
•
Methods focus
© 2014 SAP AG. All rights reserved.
96
Image
•
HTML-wrapper for images
•
Properties: src, alt
•
Events: press
© 2014 SAP AG. All rights reserved.
97
AutoComplete
•
TextField with proposed values
•
Works with ListItems
•
Properties: items, selectedKey
•
Methods: addItem
© 2014 SAP AG. All rights reserved.
98
ComboBox
•
ComboBox provides a list of predefined entries
•
Properties: items, selectedKey
•
Events: change, liveChange
•
Methods: getLiveValue
© 2014 SAP AG. 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
Menu •
Class Menu and MenuItem
•
addItem add MenuItem object to Menu
•
addSubmenu adds a MenuItem as submenu
•
attachPress eventhandler
© 2014 SAP AG. All rights reserved.
101
Table
•
sap.ui.table
•
Table consists of Columns
•
Properties of Column: • Label, Template
© 2014 SAP AG. All rights reserved.
102
Shell
•
Part of sap.ui.ux3
•
Methods: setContent, attachWorksetItemSelected
© 2014 SAP AG. All rights reserved.
103
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. All rights reserved.
105
Example of Multiple UI Areas for Exercise 02
© 2014 SAP AG. All rights reserved.
106
Exercise 02: Create a Simple Application
•
Create new SAPUI5 project called WDE350-Ex02 with a initial view called “PersonData” in Eclipse and open the view.
•
Create a new sap.ui.commons.Panel and set its „text“ to „Enter Data“.
•
Create a MatrixLayout with two Labels, two TextFields and a Button:
new new new new
sap.ui.commons.layout.MatrixLayout (text: „First Name“ / „Last Name“) sap.ui.commons.Label sap.ui.commons.TextField sap.ui.commons.Button (text: „Submit“)
•
Add the Labels, TextFields and the Button to the layout with createRow().
•
Add the layout to the Panel using the addContent() method.
•
Add a press handler to the Button that displays the values of the TextFields: attachPress(function() {…}) getValue()
Solution © 2014 SAP AG. All rights reserved.
107
Exercise 02 Solution
•
© 2014 SAP AG. All rights reserved.
Expected outcome:
108
Exercise 03: Create Multiple Areas 1. Open your solution of exercise WDE350-Ex02. 2. Create 2 additional UI Areas above the „content“ UI Area and name them „header“ and „menu“. 3. Create an new
sap.ui.commons.ApplicationHeader,
set the Welcome Message setDisplayWelcome() and the Logoff setDisplayLogoff() to false and place it in the „header“ UI Area. 4. Create a Menubar with 2 Menu Items and place it in the „menu“ UI Area: • •
new sap.ui.commons.MenuBar new sap.ui.commons.MenuItem
© 2014 SAP AG. All rights reserved.
Solution
109
Exercise 03 Solution
© 2014 SAP AG. All rights reserved.
110
Exercise 04: Core Functions 1. Open your solution of exercise 03. 2. For getting the TextField value when the button is pressed: •
Do not use the TextField reference, but retrieve the TextField using its ID (you have to give an ID first):
•
sap.ui.getCore().byId(…).get Value()
•
Expected outcome:
3. 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.sap.domById(…)
Solution
• © 2014 SAP AG. All rights reserved.
111
Exercise 04 Solution
© 2014 SAP AG. All rights reserved.
112
MVC
Basic Model-View-Controller Concept
•
Views can be defined using o XML with HTML, mixed or standalone (sap.ui.core.mvc.XMLView) o JavaScript (sap.ui.core.mvc.JSView) o JSON (sap.ui.core.mvc.JSONView) o declarative HTML (sap.ui.core.mvc.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. All rights reserved.
114
File Location Logic
•
Controllers and views use the require/declare logic, 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. This applies to views as well. resources/sap/hcm/Address.controller.js © 2014 SAP AG. All rights reserved.
115
registerModulePath •
UI5 by default will try to load any required modules from its resource root URL, namely from the centrally deployed web application. This would fail for the modules contained in your web application.
•
Mixed location scenarios are supported with jQuery.sap.registerModulePath
•
Example of using registerModulePath:
© 2014 SAP AG. All rights reserved.
116
Controller Events
Currently there are 4 events defined in a controller: onInit
•
•
You can add handlers for any of these for to your controller class:
– Fired when the view is first instantiated
onBeforeRendering – Fired before the view is rendered
onAfterRendering – Fired when the view has been rendered (the HTML is injected into the document)
onExit – Fired when the controller is destroyed – Can be used to free resources
© 2014 SAP AG. All rights reserved.
117
Example of an JS View
© 2014 SAP AG. All rights reserved.
118
Example XML View
© 2014 SAP AG. All rights reserved.
119
Example JSON View
© 2014 SAP AG. All rights reserved.
120
Example HTML View
© 2014 SAP AG. All rights reserved.
121
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.boolean, float
Yes
Yes
Yes
Yes
Properties of other types (object)
Yes
No
No
No
Aggregation 1:1, 1:n, Association 1:1, 1:n
Yes
Yes
Yes
Yes
Single Event Listener Registration (maybe limited to some scope, e.g. controller/window)
Yes
Yes
Yes
Yes
Multiple Eventlisteners and/or without scope
Yes
No
No
No
Simple Data Binding (Path, default or named model, template approach)
Yes
Yes
Yes
Yes
Customized Data Binding (formatter, data type, factory approach)
Yes
No
No
No
Embedded HTML (without use of HTML control)
No
Yes
No
No
Dynamic control creation (e.g. based on model data, but outside the data binding features)
Yes
No
No
No
Code completion (Eclipse)
Yes
Yes, with limitations
No
No
Templating (Eclipse)
Yes
No
No
No
Validation
No
Yes
No
No
© 2014 SAP AG. All rights reserved.
122
Exercise 05: Multiple Views 1. Open your solution of exercise 04. 2. Create for each type a view. 3. Move your UI-code from the index.html to the PersonData.view.js file. 4. Create a view for each type: JS, XML, JSON: •
sap.ui.view({id: [sID], viewName: [sName], type: sap.ui.core.mvc.ViewType});
Continued
© 2014 SAP AG. All rights reserved.
123
Exercise 05: Multiple Views
5. Create a controller for each view: •
sap.ui.controller([sViewName],{/*function definition*/});
6. Create for each view a single button with a press event method: •
sap.ui.commons.Button({press: [fEventHandler]});
7. Instantiate a button event callback method for each view controller: •
btnPressCallback : function(){ alert(‘Button pressed!‘); }
© 2014 SAP AG. All rights reserved.
124
Solution for Exercise 05: JS View
JS View See Notes below for detail
Next © 2014 SAP AG. All rights reserved.
125
Solution for Exercise 05: XML View
XML View See Notes below for detail
Next © 2014 SAP AG. All rights reserved.
126
Solution for Exercise 05: JSON View
JSON View See Notes below for detail
Next © 2014 SAP AG. All rights reserved.
127
Exercise 05 Solution: Place Views
1.
Open the PersonData.view.js file.
2.
Create a new Panel.
3.
Instantiate each view type.
4.
Add the view instances to a layout of type HorizonalLayout.
5.
Add the layout to the panel.
NOTE – See notes below for details.
Back © 2014 SAP AG. All rights reserved.
128
Exercise 05 Solution: Place Views •
Expected UI Outcome: o
Click on of the buttons to view the results:
© 2014 SAP AG. All rights reserved.
129
Unit 2 – SAP SAPUI5 Development: Unit Lessons SAP SAPUI5 Components and Overview Lesson 2: SAPUI5 Developer Studio Lesson 3: Programming Applications Lesson 4: UI Controls and MVC Lesson 5: Databinding and Databinding - OData Lesson 6: Resource Handling Lesson 7: Modularization Lesson 8: Localization Lesson 9: Notepad Controls Lesson 10: Components Lesson 11: Extending SAPUI5 Lesson 12: Styling, Theming and CVOM Charts Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files © 2014 SAP AG. All rights reserved.
130
Databinding
UI5 Data Binding In UI5, DATA BINDING is used to bind UI5 controls to a data source that holds the application data, so that the controls are updated automatically whenever the application data is changed.
•
•
With TWO-WAY-BINDING the application data is updated whenever the value of a bound control changes, e.g. through user input.
application data
UI5 Control / Output
application data
John Doe
John Doe, 35
John Doe
John Doe Age: 36
John Doe, 35
Age: 35
Age: 35 application data has been updated
UI5 Control / Output
Resulting UI5 Control / Output
John Doe, 36
Resulting application data
John Doe
UI5 Control / Output has been updated
John Doe, 36
Age: 36
•
Data binding supports binding of simple controls like TextField and list type controls like.
•
See the complete documentation on how data binding works and how to implement it in an application.
© 2014 SAP AG. All rights reserved.
132
Data Binding: Model Types UI5 data binding supports three different model implementations:
JSON model supports data in a JavaScript Object Notation format supports two-way binding
XML model supports XML data supports two-way binding
OData model supports OData compliant data creates OData requests and handles responses includes the open source library dataJS to handle OData requests and data experimental two-way binding
•
Additionally, the ResourceModel helps binding translated texts
•
Applications can create their own Model implementations © 2014 SAP AG. All rights reserved.
133
Creating a Model Instance
•
To use data binding in a SAPUI5 applications you will need to instantiate the appropiate model first. The constructor takes the URL of the model data or the data itself as the first parameter.
JSON-Model:
XML-Model:
OData-Model:
© 2014 SAP AG. All rights reserved.
134
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. All rights reserved.
135
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, in the constructor with curly braces or using the bindProperty method
bindProperty method: • oControl.bindProperty("controlProperty", "modelProperty");
curly braces syntax: var oControl = new sap.ui.commons.TextView({ controlProperty: "{modelProperty}" });
(alternatively) by path: var oControl = new sap.ui.commons.TextView({ controlProperty: { path: “modelProperty” } }); © 2014 SAP AG. All rights reserved.
136
Example for Simple Control
© 2014 SAP AG. All rights reserved.
137
Exercise 06: Data Binding 1. Copy the solution of exercise 05 to SAPUI5-ex06 or extend your solution of exercise 05. 2. Create some JSON sample data. 3. Create JSON model instance / Set the data for the model / Set the model to the core. 4. Switch the controls in the „Enter Data“ panel from the VerticalLayout to a MatrixLayout and add 2 TextView controls: •
new sap.ui.commons.layout.MatrixLayout
•
new sap.ui.commons.TextView
5. Bind the data to the controls. 6. Update-function to the Button (optional).
solution © 2014 SAP AG. All rights reserved.
138
Exercise 06 Solution
Back © 2014 SAP AG. All rights reserved.
139
About Binding Paths {
}
company: { name: "ACME", info: { employees: 3 }, contacts: [ { name: "Barbara", phone: "873" },{ name: "Gerry", phone: "734" } ] }
© 2014 SAP AG. All rights reserved.
•
Absolute binding paths within this model: /company/name /company/info/employees /company/contacts (a collection!) /company/contacts/0/name
•
Relative binding paths within the "/company" context: name info/employees contacts
•
Relative binding paths within an aggregation binding of "/company/contacts": name phone 140
Aggregation Binding
•
Aggregation binding is used to bind a collection of values, like binding multiple rows to a table. To use aggregation you will have to use a control that acts as a template.
•
The aggregation binding can also be defined using the bindAggregation method of a control.
© 2014 SAP AG. All rights reserved.
141
Example of Aggregation Binding
© 2014 SAP AG. All rights reserved.
142
Exercise 07: Aggregation Binding 1. Copy the solution of exercise 06 to SAPUI-ex07 or extend your solution of exercise 06. 2. Create a new JSON model instance. 3. Set multiple first name options as data for the model and assign a key to each of them. 4. Replace the “first name” Textfield with a Combobox and the “first name” Textview with a Textfield: •
new sap.ui.commons.ComboBox
•
new sap.ui.core.ListItem
5. Bind the data to combo box. 6. Include a function to update the new Textfield with the chosen value from the Combobox (optional).
© 2014 SAP AG. All rights reserved.
Solution
143
Exercise 07 Solution
Back © 2014 SAP AG. All rights reserved.
144
Multiple Models / Named Models •
It is possible to set multiple models for an element or the core by specifying individual names for the models, which are used to identify them.
•
Property bindings for a named model:
•
Aggregation bindings for a named model:
© 2014 SAP AG. All rights reserved.
145
Extended Data Binding Syntax
•
Instead of only using the token name of a model property, can also use the extended data binding syntax o This enables you to use formatters and the type system for property binding and templates, filter and sorters for aggregation binding
•
To use the extended syntax, you supply an object literal for the bound property/aggregation.
Extended property binding:
© 2014 SAP AG. All rights reserved.
Extended aggregation binding:
146
Formatters
Exercise 8
•
For properties you can supply a formatter function which will be called with the value of the model property.
•
The return value of the formatter function is used as the value of the bound control:
© 2014 SAP AG. All rights reserved.
147
Exercise 08: Formatters 1. Open your solution of exercise 07. 2. Add a formatter to the Textview with the „Last Name“ data. 3. Create a function using the toUpperCase () Method inside the controller. 4. Capitalize the output in the Textview.
Solution
© 2014 SAP AG. All rights reserved.
148
Exercise 08 Solution
Back © 2014 SAP AG. All rights reserved.
149
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, input values in UI controls are parsed and converted back to the defined type in the model.
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. o constraints (optional): Constraints define how an input value entered in the UI should look like. When parsing the value will be validated against these constraints.
© 2014 SAP AG. All rights reserved.
150
Example – Date Type
© 2014 SAP AG. All rights reserved.
151
Exercise 09: Date Type 1. Open your solution of exercise 08. 2. Extend your model in the controller with a new attribute with the name date and initialize the attribute with the todays date. 3. Create a new subarea in your index.html called subheader. 4. Create a new panel with today‘s date in the format, DD.MM.YYYY, as its text. 5. Place the newly created panel at the subheader area. Solution
© 2014 SAP AG. All rights reserved.
152
Exercise 09 Solution •
•
PersonData.controller.js:
PersonData.view.js:
Back © 2014 SAP AG. All rights reserved.
153
Custom Types
© 2014 SAP AG. All rights reserved.
154
Sorters and Filters •
When using aggregation binding, you can provide initial sorting and filtering.
© 2014 SAP AG. All rights reserved.
155
Exercise 10: Sorting & Filtering 1. Open your solution of exercise 09. 2. Duplicate the „First Name“ ComboBox. 3. Sort the data in one of the ComboBoxes alphabetically: •
sap.ui.model.Sorter
•
sap.ui.model.Filter
•
sap.ui.model.FilterOperator
4. Filter the data in the other ComboBox by names between the letters A and M.
Solution © 2014 SAP AG. All rights reserved.
156
Exercise 10 Solution
Back © 2014 SAP AG. All rights reserved.
157
Calculated Fields •
Calculated Fields allow the binding of multiple properties in different models to a single property of a control. o E.g. - value property of text field may be bound to a property firstName and a property lastName in a model.
•
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. All rights reserved.
158
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. All rights reserved.
159
Example of Calculated Fields
© 2014 SAP AG. All rights reserved.
160
Exercise 11: Calculated Fields 1. Open your solution of exercise 10. 2. Create a new panel named „Calculated Fields“. 3. Create a dataset with first names, last names, gender and occupations.
4. Create a table with 3 columns: (you need to add the sap.ui.table library to the bootstrap) •
sap.ui.table.Table
•
sap.ui.table.Column
5. Display the first names in the first column, the last names in the second column and a combination of first name, last name, gender and occupation in the last column.
Solution © 2014 SAP AG. All rights reserved.
161
Exercise 11 Solution
Back © 2014 SAP AG. All rights reserved.
162
Master-Detail Relationship
•
•
A master-detail relationship is a 1:n type relationship Examples of a masterdetail relationship are: o A set of purchase orders and a set of line items belonging to each purchase order o An expense report with a set of expense line items o A department with a list of employees belonging to it
•
An application can use this master-detail relationship to enable users to navigate through the purchase order data and see the detail data for line items only related to the master purchase order selected © 2014 SAP AG. All rights reserved.
163
Example of Master-Detail
© 2014 SAP AG. All rights reserved.
164
Example of Master-Detail: Code Part 1
© 2014 SAP AG. All rights reserved.
165
Example of Master-Detail: Code Part 2
© 2014 SAP AG. All rights reserved.
166
Input Validation
•
To catch invalid user input, you can register the following handlers to the SAPUI5 Core. o attachFormatError o attachParseError o attachValidationError o attachValidationSuccess
•
Example:
© 2014 SAP AG. All rights reserved.
167
Exercise 12: Data Binding
•
Exercise 12
Exercise 12: Create a searchable Music store and populate it with data from iTunes
© 2014 SAP AG. All rights reserved.
168
Exercise 12: Data Binding with AJAX
1. Copy the project WDE350-Ex12-Template to WDE350-Ex12. 2. In createContent of the Shell View, add one more workset item (text: „Music Store“, key: „musicstore“) to the Shell. 3. Instantiate the new View and assign it to mContent.musicstore .
Next © 2014 SAP AG. All rights reserved.
169
Exercise 12: Data Binding with AJAX Part 2 4. In createContent of the musicstore View, create the following controls: • One sap.ui.commons.SearchField, calling the Controller‘s „doSearch“ method with the Controller being the „this“ context: search:[oController.onSearch, oController] • One sap.ui.table.Table (new control library “sap.ui.table” to be added to bootstrap!); use an extended binding object to bind and sort the Table rows: • One sap.ui.commons.layout.VerticalLayout with width set to “100%”
5. Add SearchField and Table to the layout and return it. 6. Implement both controller methods (empty for now): onSearch and onSelectionChange. 7. Test the UI and verify the Music Store comes up (empty table).
Next © 2014 SAP AG. All rights reserved.
170
Exercise 12: Data Binding with AJAX Part 3 8. Add three columns to the Table, binding them to certain attributes (artworkUrl30,trackName,artistName) – including an Image column (artworkUrl30). 9. In the controller, implement the „onInit“ method, create an empty JSONModel, assign it to „this.model“ and set it on the View: this.model = new sap.ui.model.json.JSONModel(); this.getView().setModel(this.model);
10. In onSearch, read the event parameter „query“, put it into an iTunes search URL and set the data on the JSONModel: var searchTerm = oEvent.getParameter("query"); var url = "http://itunes.apple.com/search?term=" + searchTerm + "&country=FR&media=music&entity=song&callback=?"; this.model.setData(data);
11. Open the Shell.view.js and implement the commented steps.
Next © 2014 SAP AG. All rights reserved.
171
Exercise 12 Solution •
Run the application, enter an artist or song name and press Enter. After a second, the Table will be populated with the search results from iTunes:
Back © 2014 SAP AG. All rights reserved.
172
Exercise 12 – Part 1 – Solution
See the Notes section below for the detailed steps
© 2014 SAP AG. All rights reserved.
173
Exercise 12 – Part 2 – Solution
See the Notes section below for the detailed steps
© 2014 SAP AG. All rights reserved.
174
Databinding – OData
OData – Open Data Protocol
•
Based on HTTP, 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, entries, etc. in either Atom or JSON format
•
OData URL structure:
http://services.odata.org/OData/OData.svc/Category(1)/Products?$top=2 Service Root URI
© 2014 SAP AG. All rights reserved.
Resource path
Query options
176
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.org/V3/OData/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, types, properties and relationships exposed by the OData service:
http://services.odata.org/V3/OData/OData.svc/$metadata •
Alternatively, this experimental API Explorer by the OData Service can be used: http://services.odata.org/ODataAPIExplorer/ODataAPIExplorer.html
© 2014 SAP AG. All rights reserved.
177
OData – System Query Options •
When accessing an OData service, 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,desc
$top
Selects only the first N items in a collection
/Products?$top=5
$skip
selects entries starting by N+1
/Products?$skip=2
$filter
filters entries based on the criteria
/Suppliers?$filter=Address/City eq 'Redmond'
$expand
expanded Entries are eagerly loaded and presented inline
/Categories?$expand=Products
$format
defines the format that the server must return
/Products?$format=json
$select
returns the subset of the specified properties
/Products?$select=Price,Name
© 2014 SAP AG. All rights reserved.
178
Adding OData Query Options •
SAPUI5 handles most of the URL parameters for OData services automatically. You do have the ability to add query options manually; either by adding them to service URL or passing a map of parameters when using bindElement or bindAggregation. Expand Parameter:
Select Parameter:
oControl.bindElement( "/Category(1)", { expand: "Products" } );
oControl.bindElement( "/Category(1)", { expand: "Products", select: "Name,ID,Products" });
oTable.bindRows({ path: "/Products", parameters: { expand: "Category" } });
© 2014 SAP AG. All rights reserved.
oTable.bindRows({ path: "/Products", parameters: { select: "Name,Category" } });
179
Exercise 13: Example Code for OData
© 2014 SAP AG. All rights reserved.
Exercise 13
180
Exercise 13: oData 1. Open your solution of exercise 11. 2. Create a new panel named „OData“. 3. Create a variable with the link to the OData service URL: •
http://services.odata.org/Northwind /Northwind.svc
4. Create a table with 5 columns, labeled: •
ID, First Name, Last Name, Title, Notes
5. Bind columns to these subsets: •
EmployeeID, FirstName, LastName, Title, Notes
6. Bind the rows to the Entity Set: „/Employees“
Solution © 2014 SAP AG. All rights reserved.
181
Exercise 13 Solution
Back © 2014 SAP AG. All rights reserved.
182
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.
183
Resource Handling
Overview Resource Handling •
The Resource Handling of SAPUI5 is separated in two parts:
Client-side Mechanisms • Modularization ► Require/Declare for JavaScript files • Localization ► Resource Bundles Both concepts are loading additional resources from a server where this server might be any kind of web server (simple, Java, ABAP …), independent of the server side technology.
Server-side Mechanisms •
•
•
SAPUI5 provides a Resource Handler for the Java server and the integration into the Eclipse IDE, aligned with the concept of the JavaServer Faces - Resource Handler, also supporting standard and test-relevant resources Additional features: ► Theme fallback ► Resource Bundle fallback SAPUI5 also provides a Resource Handler for the ABAP server which is used for SAPUI5 applications to serve the resources from the UI libraries properly.
• Both parts are not dependent on each other. Furthermore they are complementary. © 2014 SAP AG. All rights reserved.
185
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.
186
Modularization
Modularization using require •
The UI5 framework has built in support for modularizing larger JavaScript applications. o Instead of defining (and loading) one large chunk of JavaScript code, an application can be split into smaller parts, which then can be loaded at runtime when they are needed. These smaller, individual files are called Modules in UI5. o To load a module, the function jQuery.sap.require must be used. o In a module name all “.” are replaced by “/” and an “.js” extension is added to create a path. So sap.ui.commons.MessageBox will become sap/ui/commons/MessageBox.js
•
This is an example: jQuery.sap.require("sap.ui.commons.MessageBox"); function onPressButton() { sap.ui.commons.MessageBox.alert("Hello World!"); } © 2014 SAP AG. All rights reserved.
188
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.sap.declare function. This tells the UI5 runtime about the name of the module. UI5 runtime keeps track which modules are already loaded. o If a module is required (jQuery.sap.require) and it hasn’t been loaded before, it is loaded automatically. While it is carried out, it calls the declare method, so from now on UI5 knows that it has been loaded and when the next require comes about nothing needs to be done anymore. o The declare function checks if the parent namespace object exists and if not, creates it. // declaration of the module. Will ensure that the namespace 'my.useful' exists. jQuery.sap.declare("my.useful.SampleModule"); // list of dependencies of this module jQuery.sap.require("sap.ui.core.Core"); jQuery.sap.require("some.other.Module"); jQuery.sap.require("you.can.Also", "list.multiple.Modules", "if.you.Want"); // create the 'main' object of the module my.useful.SampleModule = {};
© 2014 SAP AG. All rights reserved.
189
registerModulePath •
UI5 by default will try to load any required modules from its resource root URL, namely from the centrally deployed web application. This would fail for the modules contained in your web application.
•
Mixed location scenarios are supported with jQuery.sap.registerModulePath
•
Example of using registerModulePath:
© 2014 SAP AG. All rights reserved.
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 - 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.
191
Localization
Localization / Resource Bundle •
Exercise 14
UI5 has a built-in localization concept, which is aligned to the ResourceBundle concept in Java. o
You can get the URL for a resource with this:
var sUrl = sap.ui.resource("sap.ui.table","messagebundle.properties");
•
Get the resource bundle for a given language (if no locale is given, English is loaded by default): jQuery.sap.require("jquery.sap.resources"); var oBundle = jQuery.sap.resources({url : sUrl, locale: sLocale});
•
And then access the texts in the resource bundle: var sText = oBundle.getText(sKey);
© 2014 SAP AG. All rights reserved.
193
Exercise 14: Localization /Resource Bundle 1.
Copy Project WDE350-02- to WDE350-14
2.
Create a new folder i18n to your WebContent-folder
3.
Add three empty files to that folder • i18n.properties • i18n_de.properties • i18n_fr.properties
4.
Add a property for firstname, lastname, submit and the panel header to each i18n-file and translate to English, German and French
Solution
5. In createContent, use the resource bundle to init localization var oBundle = jQuery.sap.resources({ url : "i18n/i18n.properties", locale: sap.ui.getCore().getConfiguration().getLanguage() }); 4.
6.
Change the text property of the UI-elements panel, firstname, lastname and submit to make use of localization: text: oBundle.getText(“XXX”) Test your page with appended URL parameter, e.g.: ?sap-ui-language=fr
© 2014 SAP AG. All rights reserved.
194
Exercise 14 Solution
property in the i18n files
index.html
Back © 2014 SAP AG. All rights reserved.
195
Localization with Resource Model
Exercise 15
•
With the ResourceModel, there is a wrapper for resource bundles that exposes the localized texts as a model for data binding.
•
A ResourceModel can be instantiated with a bundleName or a bundleUrl which points to a resource bundle. When using the bundle name the file must have the .properties suffix.
•
Example: var oModel = new sap.ui.model.resource.ResourceModel({ bundleUrl: "myBundle.properties", // will use myBundle_en.properties bundleLocale: "en“ // optional, default is current language, so better omit it }); var oControl = new sap.ui.commons.Button({ id : "myButton", text : "{i18n>MY_BUTTON_TEXT}“ // this points to a named model }); // attach the resource model with the symbolic name "i18n"
sap.ui.getCore().setModel(oModel, "i18n"); © 2014 SAP AG. All rights reserved.
196
Exercise 15: Localization /Resource Model 1.
Copy your solution of Exercise 2 to SAPUI5-Ex15
2.
Within the controller of the PersonData implement/uncomment the onInit method
3.
Create a • •
4.
new sap.ui.model.resource.ResourceModel with bundleUrl: "i18n/i18n.properties" (the current language is automatically used)
Set this ResourceModel as model on the View or (globally) on the Core, but set it as named model (name: “i18n”) • ….setModel(oModel, "i18n");
5.
Now use data binding to bind the translated texts
© 2014 SAP AG. All rights reserved.
Solution 197
Exercise 15 Solution
PersonData.controller.js
PersonData.view.js
Back © 2014 SAP AG. All rights reserved.
198
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.
199
Notepad Controls
What is a Control?
•
An object that defines the appearance and behavior of a screen area.
•
Typically has properties like "text" or "width" that modify the appearance or relate to the data displayed by the Control.
•
It can aggregate other Controls: o This means it is a sort of container or layout Control when the application can add the child controls to use – or a composite Control if the Control itself decides what the child Controls are and just re-uses these available components.
•
It can also have associated Controls that are not part or children of this Control, but rather loosely related.
•
A Control can fire well-defined events. o Typically, 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. Examples would be triggerSearch in a SearchField or collapse in a Panel. © 2014 SAP AG. All rights reserved.
201
UI5 Controls Overview
•
There are two approaches to develop UI5 Controls, either with tool support, or just as part of a plain JS file.
•
This section deals with creating custom controls in JavaScript with the extend method.
•
Since an IDE is not needed to create new controls with the extend method these controls have been named "Notepad Controls".
•
Technically, this functionality is not restricted to Controls.
•
Arbitrary objects derived from sap.ui.base.Object can be created or extended.
© 2014 SAP AG. All rights reserved.
202
The extend Method •
The extend() method is available on all Controls (and the base classes) and is used to define a new subclass.
•
Creating a new control: sap.ui.core.Control.extend(sName, oDefinition);
•
Creating a new Control which inherits from Button: sap.ui.commons.Button.extend(sName, oDefinition);
•
The parameters to this function are the name and the definition of the new control type. o The definition part contains information about the control API, which properties, aggregations, events, etc. the control has and the implementation of the control methods.
•
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. © 2014 SAP AG. All rights reserved.
203
Control Definition
•
The definition object for a custom control may contain metadata, public and private methods, event handler and the renderer:
© 2014 SAP AG. All rights reserved.
204
Basic Example
© 2014 SAP AG. All rights reserved.
205
Control Metadata
•
The metadata in the control definition consists of objects for the control properties, events and aggregations. Properties
Example
type: The data type of the Control property.
properties: { title: "string", btnTxt: { defaultValue: "Search"}, showLogoutButton: { type: "boolean", defaultValue: true }, width: { type: "sap.ui.core.CSSSize", defaultValue: "50px" } }
• • • •
string for a string property (default) int or float for number properties int[] for an array of integers, string[] for an array of strings, etc. sap.ui.core.CSSSize for a customdefined type
defaultValue: The default value of the property. (undefined if not set)
© 2014 SAP AG. All rights reserved.
206
Control Metadata Events
Aggregations
Events are specified by the event name only. In many cases there is nothing to configure about them, so just give an empty object.
Aggregations and associations are defined by their name, along with an object that can have a type, a multiple flag and a singularName.
Controls can enable events to be interrupted by the application, using the enablePreventDefault flag.
aggregations: { acceptButton: "sap.ui.commons.Button", worksetItems: { type: "sap.ui.ux3.NavigationItem", multiple: true, singularName : "worksetItem" } }
events: { logout: {}, close: { enablePreventDefault : true } }
© 2014 SAP AG. All rights reserved.
207
Control Methods •
After the metadata is defined, you can add any method implementations to your new Control. The method names can be chosen freely, some method names must be avoided though: o o o
•
Names of methods that are provided by a super class. Methods starting with set, get, insert, add, remove or indexOf may collide with setters/getters for properties or aggregations you defined. Methods starting with attach, detach or fire may collide with methods created for events.
There are some method names you may use but which have a special meaning: o on...: Methods starting with "on" are event handlers that are automatically bound to browser events. o init: Is the name of the initialization function called right after Control instantiation. o renderer: The name of the function that creates the HTML for the control.
© 2014 SAP AG. All rights reserved.
208
Control Methods •
Public / private methods o The convention is that private methods start with an underscore. All other methods are considered public.
•
init Method o The init() method is invoked by the UI5 core for each control instance right after the constructor. Use this to set up things like internal variables or sub-controls of a composite. This method is considered private and only to be called by the UI5 core.
•
onAfterRendering Method o The onAfterRendering() method is invoked after the controller's View is re-rendered.
•
Event handler methods o Methods that have a name starting with on are reserved for event handlers. For common events such as click or keydown, browser event handlers for these methods are registered automatically by the UI5 core.
© 2014 SAP AG. All rights reserved.
209
Control Methods – Examples
// public method divide: function(x, y) { if (this._checkForZero(y)) { throw new Error("Second parameter may not be zero"); } return x / y; }, // private method _checkForZero: function(y) { if (y === 0) { return true; } return false; },
© 2014 SAP AG. All rights reserved.
// init method, invoked when control // is instantiated init: function() { this._bSearchTriggered = false; this._oSearchBtn = new sap.ui.commons.Button( this.getId() + "-searchBtn", { text: "Search" } ); }, // event handler onclick: function(e) { alert("Control " + this.getId() + " was clicked."); }
210
Control Renderer Example: •
The renderer method is responsible for creating the HTML structure that makes up the control. It is different from the other methods, as it is a static one, so the this keyword is not available. Instead, a control instance and a RenderManager instance are given to the method.
• If an existing renderer should be used without modification, you can give the name of this renderer class. © 2014 SAP AG. All rights reserved.
renderer: function(oRm, oCtrl) { oRm.write(""); oRm.writeEscaped(oCtrl.getText()); oRm.write(""); }
Using an existing renderer: renderer: "sap.ui.commons.ButtonRenderer"
211
Control Renderer (Additional Information)
• The newly created renderer type will inherit from the renderer of the parent Control. • So if your new Control extends TextField, the given function will be added to a class that inherits from sap.ui.commons.TextFieldRenderer (and will have access to that one's other functions). • However, your renderer method will override the parent renderer method, so no HTML will be written as long as your method is not taking care of it. • If an existing renderer should be used without modification, you can give the name of this renderer class: • renderer: "sap.ui.commons.ButtonRenderer" •
However, a normal Control Renderer can also override or implement methods from its Renderer superclass
•
Or just separate out some helper functions. continued © 2014 SAP AG. All rights reserved.
212
Control Renderer (Additional Information)
•
This is possible as well here, but in this case these methods need to be packed together into an object, so the extend method knows they should all go into the Control Renderer.
•
The main rendering method is called "render" - just like in a normal Control Renderer.
•
The keyword "this" actually refers to the Control Renderer type here, so it is used to access the other methods:
renderer: { render: function(rm, oControl) { rm.write(""); rm.writeEscaped(this.square(oControl.getValue())); rm.write(""); }, square: function(value) { return value * value; } }
© 2014 SAP AG. All rights reserved.
213
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
Renderer Class Implementation jQuery.sap.declare(„com.sap.ui.HelloControlRenderer"); com.sap.ui.HelloControlRenderer = { }; com.sap.ui.HelloControlRenderer.render = function(oRm, oControl) { oRm.write("Hello "); // write the Control property 'name', with XSS protection oRm.writeEscaped(oControl.getName()); oRm.write(""); };
© 2014 SAP AG. All rights reserved.
215
Using a renderer class
sap.ui.core.Control.extend("com.sap.ui.HelloControl ", { init : function() {}, renderer : "com.sap.ui.HelloControlRenderer", onAfterRendering : function() {} });
© 2014 SAP AG. All rights reserved.
216
Example with Data Binding
© 2014 SAP AG. All rights reserved.
217
Example with Charts
© 2014 SAP AG. All rights reserved.
218
Exercise 16: Notepad Controls Exercise 16
•
Exercise 16: Add an Audioplayer Control to your Music Store from Exercise 12 and have the selected song play
© 2014 SAP AG. All rights reserved.
219
Exercise 16: Notepad Control / Part 1
1. Copy or extend your exercise 12 and navigate to „musicstore.controller.js“ 2. Implement a new „AudioPlayer“ control before before your controller implementation 3. Add a new column to the table and instantiate the new „Audioplayer“ control as row content 4. Open the index.html in browser that can interpret the tag (Chrome 6 and newer, Firefox 3.6 and newer, Safari 5.0 and newer, IE 9 and newer)
Next © 2014 SAP AG. All rights reserved.
220
Exercise 16 Solution– Notepad Control 1. Copy your exercise 12 and navigate to „musicstore.controller.js“ 2. Implement a new „AudioPlayer“ control before before your controller implementation 3. Add a new column to the table and instantiate the new „Audioplayer“ control as row content 4. Open the index.html in browser that can interpret the tag (Chrome 6 and newer, Firefox 3.6 and newer, Safari 5.0 and newer, IE 9 and newer)
Solution © 2014 SAP AG. All rights reserved.
221
Exercise 16 Solution •
When a song is selected in the Table, it can be played now:
Back © 2014 SAP AG. All rights reserved.
222
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.
223
Components
Components Overview •
UI5 components are independent and reusable parts of the UI5 Application that may be developed by different development teams in different projects.
•
A UI5 component consists of a folder that has a name of the component and that at least contains two files: o o
•
Component.js - the Component Controller that also includes the metadata for runtime component.json - 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.ui.core.UIComponent o
a Faceless Component does not (examples: data transfer helper)
Base class for all Faceless Components: sap.ui.core.Component
•
Components can either inherit from their base classes or from other component in order to inherit and extend its functionality.
© 2014 SAP AG. All rights reserved.
225
Creating a New Component – Component.js 1. Define an new (UI)Component: jQuery.sap.require("sap.ui.core.UIComponent"); jQuery.sap.require("sap.ui.commons.Button"); jQuery.sap.declare("samples.components.button.Component");
2. Set the metadata (properties, aggregations, events of the new component): sap.ui.core.UIComponent.extend("samples.components.button.Component", { metadata : { properties : { text: "string" } }});
3. Set the methods the component should have: samples.components.button.Component.prototype.createContent = function(){ this.oButton = new sap.ui.commons.Button("btn"); return this.oButton; };
© 2014 SAP AG. All rights reserved.
226
Creating a New Component – component.json The component.json file is needed for design time environments so they know the specifics of the component. The file is not loaded during the runtime of an application and thus not needed there. {
}
"name": "samples.components.button", "version": "0.1.0", "description": "Sample button components", "keywords": [ "button", "example" ], "dependencies": { }
© 2014 SAP AG. All rights reserved.
227
Using the New Component Once the Component is defined as above, it can be used right away, just like any other UI5 Component. var oComponent = sap.ui.getCore().createComponent({ name: "samples.components.button", id: "Comp", settings: {text: "Hello World"} }); var oComponentCont = new sap.ui.core.ComponentContainer("CompCont", { component: oComponent }); oCompCont.placeAt("content");
Exercise 17 © 2014 SAP AG. All rights reserved.
228
Exercise 17: Components 1. Copy or extend your solution of Exercise 13 2. Create a new Button Component 3. Set its „text“ property 4. Replace the „Submit“ button in the „Enter Data“ panel with your new custom button
Solution © 2014 SAP AG. All rights reserved.
229
Exercise 17 Solution
Creating the new component
Using the new component
Replacing the old button
Back © 2014 SAP AG. All rights reserved.
230
Exercise 17 Solution
Solution continued in the Notes section below.
© 2014 SAP AG. All rights reserved.
231
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.
232
Extending SAPUI5
Inclusion of External JS Libraries •
If UI5 doesn’t provide controls or behaviours that other JavaScript libraries offer, 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, e.g.: o jQuery, jQuery UI o dataJS, a Microsoft driven oData library which handles requests and takes care of creating and handling requests in JSON and XML format o D3, an SVG-based graphical library to visualize data sets
•
Other libraries need to be loaded separately, another library of interest is o Flot, a -based jQuery plug-in for displaying data sets
© 2014 SAP AG. All rights reserved.
234
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 tag. o the library can be downloaded and made part of the application project: ►For pie chart support you need also the flot.pie.js plugin
You can see the pie chart example here
© 2014 SAP AG. All rights reserved.
235
Inclusion of External JS Libraries Most libraries require a starting point or a placeholder This HTML element can be provided by using the UI5 HTML control
Exercise 18
// create the HTML control which will be a placeholder var oHTML = new sap.ui.core.HTML({ id: "pieContainer“, content: "
View more...
Comments
