sapui5 training
TRANSCRIPT
-
8/16/2019 Sapui5 Training
1/101
SAPUI5 Training
SAP UI
1
-
8/16/2019 Sapui5 Training
2/101
Agenda
SAPUI5 Overview
Runtime Resources
Programming Applications
SAPUI5 Developer Studio
Creating a SAPUI5 Project
Resource Handling / Localization
MVC
Databinding
Styling & Theming
Extending SAPUI5
Notepad Controls
CVOM Charts
Optimizing SAPUI5
-
8/16/2019 Sapui5 Training
3/101
SAP UI5 Overview
SAP UI
3
-
8/16/2019 Sapui5 Training
4/101
SAP UI Development Toolkit for HTML5
SAP UI Development Toolkit for HTML5The official long name
SAPUI5The short name
UI5Internal name
For official communication the upper two versions have to be used.
UI5 used to be named "Phoenix", it was changed to SAPUI5 in the summer of 2011 beca
Phoenix was not suitable to be used publicly.
-
8/16/2019 Sapui5 Training
5/101
Main UI5 Characteristics
SAPUI5 is an extensible JavaScript-based HTML5 browser
rendering library for Business Applications.
Supports RIA like client-side features based on JavaScript
Supports an extensibility concept regarding custom controls
Allows change of themes for customer branding in an effective mann
Allows usage of own JavaScript and HTML
Uses the jQuery library as a foundation
Fully supports SAP Product standards
Open AJAX compliant and can be used together with/uses other stanJS libs
Can be used from various platforms (Java, ABAP, etc)
Produced in a release independent code line to enable short shipmencycles
-
8/16/2019 Sapui5 Training
6/101
UI5 Browser Support
Internet
ExplorerVersion 9Version 8
Chrome
Latest version
Firefox
Version 3.6 andlatest version
Safari
Latest versio
Internet Explorer 8 is supported with graceful degradation for CSS3 featulike rounded corners, text-shadows, etc.
-
8/16/2019 Sapui5 Training
7/101
UI5 Release Plan and Strategy
Development track
Identified by a major and anodd minor version number,e.g. 1.5.1
The versions of this track arereleased internally and arenot meant to be used inproducts shipped tocustomers.
Release track
Identified by a major aneven minor version nume.g. 1.4.1
The versions of this tracreleased externally. Onlthese versions are allowto be used in productio
-
8/16/2019 Sapui5 Training
8/101
UI5 Architecture Overview
UI5 Core
UI5 Core includes base, core and mmodules
Dependency / Class-Loader to loadcontrol libraries
Render manager creates HTML strinfor the instantiated controls
The UI5 Core includes other JavaSclibraries
jQuery jQuery UI
data.js
-
8/16/2019 Sapui5 Training
9/101
UI5 Control Libraries
sap.ui.commons
Includes “bread and butter"controls like TextField,
TextView, Button
sap.ui.ux3
Includes UX3 patterns, mainlyavailable in “Gold
Reflection” design
e.g.: Shell, ExAct and ThingInspector
http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/3529http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/3529http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/9436http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/9436
-
8/16/2019 Sapui5 Training
10/101
UI5 Control Libraries
sap.ui.table
Includes DataTable control
sap.ui.dev
Experimental controls
not included in all UI5offerings
http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/3529http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/3529http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/9436http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/9436
-
8/16/2019 Sapui5 Training
11/101
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 functi
-
8/16/2019 Sapui5 Training
12/101
UI5 Knowledge and Test Resources
Documentation and
Information
UI5 Wiki
Demo kit
API Documentation
SAPUI5 Versions
Control and code testing
Test Suite
UI5 Tools support and question
SAPUI5 Tools Communi
https://sapui5.hana.ondemand.com/sdk/#docs/guide/2bfac839aa21483f89403dc4ab090724.htmlhttps://sapui5.hana.ondemand.com/sdk/#docs/guide/2bfac839aa21483f89403dc4ab090724.htmlhttps://sapui5.hana.ondemand.com/sdk/https://sapui5.hana.ondemand.com/sdk/https://sapui5.hana.ondemand.com/sdk/#docs/api/symbols/sap.ui.htmlhttps://sapui5.hana.ondemand.com/sdk/#docs/api/symbols/sap.ui.htmlhttps://sapui5.hana.ondemand.com/sdk/#versioninfo.htmlhttps://sapui5.hana.ondemand.com/sdk/#versioninfo.htmlhttps://sapui5.hana.ondemand.com/sdk/explored.htmlhttps://sapui5.hana.ondemand.com/sdk/explored.htmlhttp://scn.sap.com/community/developer-center/front-endhttp://scn.sap.com/community/developer-center/front-endhttp://scn.sap.com/community/developer-center/front-endhttps://sapui5.hana.ondemand.com/sdk/explored.htmlhttps://sapui5.hana.ondemand.com/sdk/#versioninfo.htmlhttps://sapui5.hana.ondemand.com/sdk/#docs/api/symbols/sap.ui.htmlhttps://sapui5.hana.ondemand.com/sdk/https://sapui5.hana.ondemand.com/sdk/#docs/guide/2bfac839aa21483f89403dc4ab090724.html
-
8/16/2019 Sapui5 Training
13/101
Exercise – Create a Simple Application
Create a MatrixLayout with two Labels, two TextFields and a Butto
new sap.ui.commons.layout.MatrixLayout
new sap.ui.commons.Label
new sap.ui.commons.TextField
new sap.ui.commons.Button
Add the Labels, the TextFields and the Button to the layout with tcreateRow() method
Bonus: Add a press handler to the Button that displays the values
the TextFields.
attachPress(function() {…})
getValue()
-
8/16/2019 Sapui5 Training
14/101
Solution to Exercise
var oLayout = newsap.ui.commons.layout.MatrixLayout({width: "100%",widths: ["20%", "80%"]
});var oLabel1 = new sap.ui.commons.Label({text: "Given Name"
});var oTF1 = newsap.ui.commons.TextField({id: "given-name",width: "100%"
});var oLabel2 = new sap.ui.commons.Label({text: "Last Name"
});var oTF2 = newsap.ui.commons.TextField({id: "last-name",width: "100%"
});
var oButton = new
sap.ui.commons.Button({
text: "Submit"
});
// add rows with label/textfield totable
oLayout.createRow(oLabel1, oTextField1);
oLayout.createRow(oLabel2, oTextField2);
oLayout.createRow(null, oButton);
oLayout.placeAt("content");
// add handler to alert textfield values
oButton.attachPress(function() {
var msg = "TextField1: "
+ oTF1.getValue() + "\n"
+ "TextField2: " + oTF2.getValue();alert(msg);
});
-
8/16/2019 Sapui5 Training
15/101
Runtime Resources
-
8/16/2019 Sapui5 Training
16/101
How to get UI5 resources
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 softw
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 browse
These options are available for referencing the UI5 runtime files:
CDN (content delivery network)
Runtime libraries (wars and jars)
SDK
-
8/16/2019 Sapui5 Training
17/101
Public Trial
A trial version of the SAPUI5 framework has been released in the SAP Community Netw
http://scn.sap.com/community/developer-center/front-end
Not the latest version
includes static JavaScript-Files, war-Files and the Demokit
http://scn.sap.com/community/developer-center/front-endhttp://scn.sap.com/community/developer-center/front-endhttp://scn.sap.com/community/developer-center/front-end
-
8/16/2019 Sapui5 Training
18/101
CDN - Content Delivery Network
The content delivery network provides a ready-to-consume nightly-build versionof UI5. You can include UI5 in any HTML file with the following script tag without
actually deploying UI5.
The above example shows the URL which points you to the nightly built, which
includes the newest features but also the newest bugs. To use a stable release,set the src of the script to:
https://sapui5.hana.ondemand.com/sdk/resources/sap-ui-core.js
https://sapui5.hana.ondemand.com is an external server and you cannot shipyour product referencing this CDN!
-
8/16/2019 Sapui5 Training
19/101
Programming Applications
-
8/16/2019 Sapui5 Training
20/101
UI5 bootstrap
UI5 pages always have to start with the bootstrap, to initializes the UI5 runtime.
Attributes of the script tag are evaluated and used to configure the runtime data-sap-ui-libs: the controls libraries to be used, comma-separated
data-sap-ui-theme: the theme
There are more attributes: data-sap-ui-language, data-sap-ui-rtl, …
Instead of putting the attributes in the script tag, they can also be added as URL pa
https://sapui5.hana.ondemand.com/sdk/docs/guide/a04b0d10fb494d1cb722b9e341b584ba.htmlhttps://sapui5.hana.ondemand.com/sdk/docs/guide/91f17d636f4d1014b6dd926db0e91070.htmlhttps://sapui5.hana.ondemand.com/sdk/docs/guide/91f17d636f4d1014b6dd926db0e91070.htmlhttps://sapui5.hana.ondemand.com/sdk/docs/guide/a04b0d10fb494d1cb722b9e341b584ba.html
-
8/16/2019 Sapui5 Training
21/101
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)
When using just one UI area
all controls are connected
via the UI5 event manager
var btn = new
sap.ui.commons.Button({text: "Hello World"
});btn.placeAt("content");
-
8/16/2019 Sapui5 Training
22/101
Removal of controls
Remove removes the control from the tree – it is removed from the UI – yet the
still lives and can be reused at a later point in time Destroy removes the control from the tree and the UI but also the control inst
is freed.
If you want to reuse a control at a later point in time you should keep a reference in a
remove it.
If you don’t need the control anymore, you should destroy it in order to free the resou
-
8/16/2019 Sapui5 Training
23/101
Useful Core functions
sap.ui.getCore()
get a core instance
sap.ui.getCore().byId(id)
gets an instance of a UI5 control whichwas created with id id
can be used to retrieve removedcontrols (even though the id doesn’texist in the DOM anymore)
sap.ui.getCore().applyChanges()
carries out and renders the changes forUI5 controls directly, so before theruntime would do it
jQuery.sap.domById(id)
gets any HTML element If there is also a UI5 con
element returned is theelement of this UI5 cont
The topmost HTML elemcontrol always has the iUI5 control
jQuery.sap.byId(id)
returns the jQuery objeelement with the specif
similar to document.getgets rid of IE bug whichelements with the name
-
8/16/2019 Sapui5 Training
24/101
Exercise – getCore().byId()
• Open in your browser https://sapui5.hana.ondemand.com/sdk/#test-resources/sap/ui/commons/demokit/MatrixLayout.html
• Instantiate a MatrixLayout
• new sap.ui.commons.layout.MatrixLayout
• Add a TextField and a Button control to the MatrixLayout
• new sap.ui.commons.TextField
• new sap.ui.commons.Button
• Add a press event to the button control
• Get the TextField value when the button is pressed
• sap.ui.getCore().byId().getValue()
https://sapui5.hana.ondemand.com/sdk/#test-resources/sap/ui/commons/demokit/MatrixLayout.htmlhttps://sapui5.hana.ondemand.com/sdk/#test-resources/sap/ui/commons/demokit/MatrixLayout.htmlhttps://sapui5.hana.ondemand.com/sdk/#test-resources/sap/ui/commons/demokit/MatrixLayout.htmlhttps://sapui5.hana.ondemand.com/sdk/#test-resources/sap/ui/commons/demokit/MatrixLayout.html
-
8/16/2019 Sapui5 Training
25/101
Solution to Exercise
var oMatrix = new sap.ui.commons.layout.MatrixLayout();
var oTextField = new sap.ui.commons.TextField({width: "200px",
id: "myTextField"
});
var oButton = new sap.ui.commons.Button({
text: "get text",
press: function(oEvent){
alert(sap.ui.getCore().byId(" myTextField").getValue();
}
});
oMatrix.createRow(oTextField, oButton);
oMatrix.placeAt("content");
-
8/16/2019 Sapui5 Training
26/101
SAPUI5 Developer Studio
-
8/16/2019 Sapui5 Training
27/101
Overview
SAPUI5 Developer Studio is a set of tools for Eclipse that greatly simplify the developm
UI5 applications and controls, including: 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
More detailed information about the SAPUI5 Developer Studio is available in the SAPUI5
tools.hana.ondemand.com
https://tools.hana.ondemand.com/https://tools.hana.ondemand.com/
-
8/16/2019 Sapui5 Training
28/101
Installation
Prerequisite: Install the latest Java Development Kit 6, if it is not installed already.
Download and install one of the preconfigured IDEs. If you want to use the SAPUI5 RepoProvider you should choose the 32bit version.
It is also possible to setup Eclipse on your own by using one of the available update sit
Once Eclipse has been (re)started, the SAPUI5 Eclipse tools should be available. One wsuccessful installation is to check whether you can create a UI Library Project / SAPUI5
Project.
The full installation information is available in the Tools Wiki at:http://scn.sap.com/community/developer-center/front-end/blog/2013/06/01/how-tdevelopment-environment-for-sapui5
http://java.sun.com/javase/downloads/index.jsphttp://www.eclipse.org/downloads/packages/release/kepler/sr2https://tools.hana.ondemand.com/http://scn.sap.com/community/developer-center/front-end/blog/2013/06/01/how-to-install-a-basic-development-environment-for-sapui5http://scn.sap.com/community/developer-center/front-end/blog/2013/06/01/how-to-install-a-basic-development-environment-for-sapui5http://scn.sap.com/community/developer-center/front-end/blog/2013/06/01/how-to-install-a-basic-development-environment-for-sapui5http://scn.sap.com/community/developer-center/front-end/blog/2013/06/01/how-to-install-a-basic-development-environment-for-sapui5https://tools.hana.ondemand.com/http://www.eclipse.org/downloads/packages/release/kepler/sr2http://java.sun.com/javase/downloads/index.jsp
-
8/16/2019 Sapui5 Training
29/101
Creating a UI5 Project with SAPUI5
Developer Studio
-
8/16/2019 Sapui5 Training
30/101
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…
-
8/16/2019 Sapui5 Training
31/101
Creating a new SAPUI5 Project
Select "SAPUI5 Application
Project" in the Wizard. Click "Next".
-
8/16/2019 Sapui5 Training
32/101
Creating a new SAPUI5 Project
Enter the name of the project.
Leave the checkbox "create an initial View"checked.
Click "Next".
-
8/16/2019 Sapui5 Training
33/101
Creating a new SAPUI5 Project
Enter the name of the initial view.
Click "Next".
-
8/16/2019 Sapui5 Training
34/101
Creating a new SAPUI5 Project
The last screen shows you a summary of the
project properties. Click "Finish" to create the new project.
-
8/16/2019 Sapui5 Training
35/101
The new Project
-
8/16/2019 Sapui5 Training
36/101
Adding a control to the view
-
8/16/2019 Sapui5 Training
37/101
Web Application Preview - Jetty
-
8/16/2019 Sapui5 Training
38/101
Web Application Preview - Jetty
-
8/16/2019 Sapui5 Training
39/101
Exercise – Create new UI5 Project
In the SAPUI5 Developer Studio, create a new SAPUI5 Application Project.
Use "Training" as the project name
create an initial JavaScript view named "shell"
Create new folders for JavaScript (/js) and Stylesheets (/css)
Create two empty files; "js/app.js" and "css/style.css"
Modify the head of the index.html to include js/app.js and css/style.css
Add a shell control to the shell.view.js and return it
In the app.js file, get a handle on the Shell control:
var oShell = sap.ui.getCore().byId("main-shell");
Create a Button control and use it in the shell:
var oButton = new sap.ui.commons.Button({text: "Hello"});oShell.setContent(oButton);
-
8/16/2019 Sapui5 Training
40/101
Resource Handling
-
8/16/2019 Sapui5 Training
41/101
Localization
UI5 has a built in localization concept, which is aligned to the ResouceBunconcept in Java
One can get the current languagevar sLocale = sap.ui.getCore().getConfiguration().getLanguage();
Get the resource bundle for a given language (if no locale is given, English isloaded 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);
You can get the URL for a resource with this:
var sUrl = sap.ui.resource("sap.ui.table", "messagebundle.properties");
d d l
https://sapui5.hana.ondemand.com/sdk/#docs/guide/91f217c46f4d1014b6dd926db0e91070.htmlhttps://sapui5.hana.ondemand.com/sdk/#docs/guide/91f217c46f4d1014b6dd926db0e91070.html
-
8/16/2019 Sapui5 Training
42/101
Loading JS modules using require
The UI5 framework has built in support for modularizing larger JavaScriptapplications.
Instead of defining (and loading) one large chunk of JavaScript code, an application can binto smaller parts, which then can be loaded at runtime when they are needed. These smaindividual files are called Modules in UI5.
To load a module, the function jQuery.sap.require must be used.
In a module name all “.” are replaced by “/” and an “.js” extension is added to create a pSo 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("Hi World!");
}
d l d l
https://sapui5.hana.ondemand.com/sdk/docs/guide/91f23a736f4d1014b6dd926db0e91070.htmlhttps://sapui5.hana.ondemand.com/sdk/docs/guide/91f23a736f4d1014b6dd926db0e91070.html
-
8/16/2019 Sapui5 Training
43/101
Modularization using declare
// 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 = {};
In order to create your own JavaScript Module you need to “declare” the mo
A file becomes a module by calling the jQuery.sap.declare function. This tells the U
runtime about the name of the module. UI5 runtime keeps track which modules are
already loaded.
If a module is required (jQuery.sap.require) and it hasn’t been loaded before, it is automatically. While it is carried out, it calls the declare method, so from now on U
knows that it has been loaded and when the next require comes about nothing nee
be done anymore
The declare function checks if the parent namespace object exists and if not, crea
E i L li i
-
8/16/2019 Sapui5 Training
44/101
Exercise - Localization
Create a new folder "i18n" in the WebContent folder
Add four empty files to that folder i18n.properties, i18n_de.propert
i18n_fr.properties and i18n_zh.properties
Add a property to each i18n-file
MSG_HELLO_WORLD=Hello World!
MSG_HELLO_WORLD=Hallo Welt!
MSG_HELLO_WORLD=Bonjour tout le monde!
MSG_HELLO_WORLD=\u60A8\u597D\u4E16\u754C
-
8/16/2019 Sapui5 Training
45/101
MVC
B i MVC t
-
8/16/2019 Sapui5 Training
46/101
Basic MVC concept
UI5 provides an MVC concept
Views can contain
• XML and HTML (mixed or standalone) sap.ui.core.mvc.XMLView
• JavaScript sap.ui.core.mvc.JSView
• JSON sap.ui.core.mvc.JSONView
Controller
• Can be bound to view
•
Can be standalone (application controller) Model: Data binding can be used on the views
Find an “MVC in 22 seconds” example here.
B i Vi / C ll
https://sapui5.hana.ondemand.com/sdk/docs/guide/91f233476f4d1014b6dd926db0e91070.htmlhttp://scn.sap.com/docs/DOC-48653http://scn.sap.com/docs/DOC-48653https://sapui5.hana.ondemand.com/sdk/docs/guide/91f233476f4d1014b6dd926db0e91070.html
-
8/16/2019 Sapui5 Training
47/101
Basic View / Controller concept
Address.controller.js:
Address.view.xml:
sap.ui.controller("sap.hcm.Address", {onInit: function() {
this.counter = 0;},sayHello: function() {
alert("Said hello "+ this.counter++ + " times.");
}});
-
8/16/2019 Sapui5 Training
48/101
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 alreaapplication sources
sap.ui.controller("sap.hcm.Address", {
// controller logic goes here
});
If this is not the case then UI5 tries to load this definition from a file that by default isUI5 resources folder. This applies to views as well.
resources/sap/hcm/Address.controller.js
C t ll E t
-
8/16/2019 Sapui5 Training
49/101
Controller Events
Currently there are 4 events defined in acontroller:
onInit
fired when the view is first instanciated
onBeforeRendering
Fired before the view is rerendered
Not before the first rendering though, then onInit iscalled
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
You can add handlers fofor to your controller cl
sap.ui.controller("sap.hcm.Addr
onInit: function()
onBeforeRendering: function()
onAfterRendering: function()
onExit: function()
myOwnMethod: function()
});
E l XML Vi
-
8/16/2019 Sapui5 Training
50/101
Example XML View
Example JSON View
-
8/16/2019 Sapui5 Training
51/101
Example JSON View
{
"Type":"sap.ui.core.mvc.JsonView","controllerName":"sap.hcm.Address",
"content": [{
"Type": "sap.ui.commons.Button",
"id": "MyButton",
"text": "Say Hello",
"press": "sayHello"}]
}
Example JS View
-
8/16/2019 Sapui5 Training
52/101
sap.ui.jsview("sap.hcm.Address", {
getControllerName: function() {return "sap.hcm.Address";},
createContent: function(oController) {var oButton = new sap.ui.commons.Button({ text: "Say Hello" });/* closure, so controller is known in event handler */oButton.attachPress(function() {oController.sayHello();
})return oButton;}
});
-
8/16/2019 Sapui5 Training
53/101
Databinding
UI5 Data Binding
-
8/16/2019 Sapui5 Training
54/101
UI5 Data Binding
In UI5, data binding is used to bind UI5 controls to a data source that holds thdata, so that the controls are updated automatically whenever the applicatio
changed.
With two-way-binding the application data is updated whenever the value of
changes, e.g. through user input.
Data binding supports binding of simple controls like TextField and list typ
DataTable and DropdownBox.
See the complete documentation on how data binding works and how to iman application.
Data Binding Model Implementations
https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/91f0f3cd6f4d1014b6dd926db0e91070.htmlhttps://sapui5.netweaver.ondemand.com/sdk/#docs/guide/91f0f3cd6f4d1014b6dd926db0e91070.html
-
8/16/2019 Sapui5 Training
55/101
g p
UI5 data binding supports three different model implementati
JSON model
supportsdata in aJavaScriptObjectNotationformat
supportstwo waybinding
XML model
supports XML data supports two way
binding
OData model
supports ODatacompliant data
creates ODatarequests and han
OData responses
includes the opesource library da
to handle OData
requests and dat
Additionally there is support to use the ResourceModel with UI5 data bindin
Creating a Model Instance
http://www.odata.org/http://datajs.codeplex.com/http://datajs.codeplex.com/http://www.odata.org/
-
8/16/2019 Sapui5 Training
56/101
g
To use data binding in a SAPUI5 applications you will need to instantiate appropiate model first. The constructor takes the URL of the model data
the data itself as the first parameter.
JSON-Model:var oModel = new sap.ui.model.json.JSONModel(dataUrl);
XML-Model:var oModel = new sap.ui.model.xml.XMLModel(dataUrl);
OData-Model:var oModel = new sap.ui.model.odata.ODataModel(dataUrl [, useJSON,
user, pass] );
Assigning the Model
-
8/16/2019 Sapui5 Training
57/101
g g
After the model has been created you can assign the model to the Core or specific consetModel method.
The relevant model for a control is the one which is nearest to it on the path up to thethere is no model in the root path found the one attached to the core becomes the re
//global model
sap.ui.getCore().setModel(oModel);
//model on UI area level
var oMainArea = sap.ui.getCore().getUIArea("main");
oMainArea.setModel(oModel);
//bind a model to a specific control
var oTable = sap.ui.getCore().byId("table");
oTable.setModel(oModel);
Localization with Data Binding
-
8/16/2019 Sapui5 Training
58/101
g
With the ResourceModel, there is a wrapper for resource bundles that exposes the locamodel for data binding.
A ResourceModel can be instantiated with a bundleName or a bundleUrl which points bundle. When using the bundle name the file must have the .properties suffix.
Example:var oModel = new sap.ui.model.resource.ResourceModel({bundleName: "myBundle", // will use the file myBundle_en.propertieslocale: "en"
});var oControl = new sap.ui.commons.Button({id : "myButton",text : "{i18n>MY_BUTTON_TEXT}"
});// attach the resource model with the symbolic name "i18n"sap.ui.getCore().setModel(oModel, "i18n");
About Binding Paths
-
8/16/2019 Sapui5 Training
59/101
g
Absolute binding paths within this model
/company/name
/company/info/employees
/company/contacts
Relative binding paths within the "/compacontext:
name
info/employees
contacts
Relative binding paths within an aggregatbinding of "/company/contacts":
name
phone
{company: {
name: "ACME",info: {employees: 3
},contacts: [{name:
"Barbara",phone: "873"
},{name: "Gerry",phone: "734"
}]}
}
Property Binding
-
8/16/2019 Sapui5 Training
60/101
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 bracbindProperty method.
Curly braces syntax:
var oControl = new sap.ui.commons.TextView({
controlProperty: "{modelProperty}"
});
bindProperty method:
oControl.bindProperty("controlProperty", "modelProperty");
Aggregation Binding
-
8/16/2019 Sapui5 Training
61/101
Aggregation binding is used to bind a collection of values, like binding multiple rows toaggregation you will have to use a control that acts as a template.
var oItemTemplate = new sap.ui.core.ListItem({ text: "{aggrProperty}" });
var oComboBox = new sap.ui.commons.ComboBox({
items: { path:"/modelAggregation", template: oItemTemplate }
});
The aggregation binding can also be defined using the bindAggregation method of a
oComboBox.bindAggregation( "items", "/modelAggregation", oItemTemplate );
Example for Simple Control
-
8/16/2019 Sapui5 Training
62/101
// JSON sample data
var data = {
firstName: "John", lastName: "Doe",
birthday: { day: 01, month: 05, year: 1982 },
address:[{ city: "Heidelberg" }], enabled: true
};
var oModel = new sap.ui.model.json.JSONModel(); // create JSON model instanc
oModel.setData(data); // set the data for the model
sap.ui.getCore().setModel(oModel); // assign the model to the core
var oTxt = new sap.ui.commons.TextField("txtField", {
value: "{/firstName}" // binding syntax using curly braces});
// generic bind method bindProperty(control property, model property)
oTxt.bindProperty("enabled", "/enabled");
Example of Aggregation Binding
-
8/16/2019 Sapui5 Training
63/101
a p e o gg egat o B d g
var dataObject = { data : [ //create test data
{index: 0, level: "Warning", description: "HAL: I'm sorry, Dave."},
{index: 1, level: "Warning", description: "Windows Boot Manager has a problem."},
// ... shortened example
]};
//create JSON model
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(dataObject);
sap.ui.getCore().setModel(oModel);
//create the template control that will be repeated and will display the data
var oRowTemplate = new sap.ui.commons.Message("rowTemplate", {
text: "{description}",
type: "{level}"
});
//create the RowRepeater control
var oRowRepeater = new sap.ui.commons.RowRepeater("rowRepeater", {
rows : { path: "/data", template: oRowTemplate } // bind row aggregation
});
Extended Data Binding Syntax
-
8/16/2019 Sapui5 Training
64/101
Extended property binding:
{
path:
"/path/to/model/property",
formatter: fnCallback,
type: oType
}
Extended aggregation binding:
{
path: "/path/to/aggregatio
template: oItemTemplate,
sorter: oSorter,
filters:
[oFilter1,oFilter2,oFilter3]
}
Instead of just using the token name of a model property you can also use theextended data binding syntax. This enables you to use formatters and the typ
system for property binding and templates, filter and sorters for aggregationbinding.
To use the extended syntax you supply an object literal for the boundproperty/aggregation.
Formatters
-
8/16/2019 Sapui5 Training
65/101
For properties you can supply a formatter function which will be called with the value property. The return value of the formatter function is used as the value of the bound
var oTextField = new sap.ui.commons.TextField({
value: {
path: "/path/to/property"
formatter: upperCase
}
});
function upperCase(sVal) {return sVal.toUpperCase();
}
Sorter and Filter
-
8/16/2019 Sapui5 Training
66/101
When using aggregation binding, you can provide initial sorting and filter
var oSorter = new sap.ui.model.Sorter("name", true); // sort descen
var oFilter1 = new sap.ui.model.Filter("name",sap.ui.model.FilterOperator.StartsWith, "M");var oFilter2 = new sap.ui.model.Filter("name",sap.ui.model.FilterOperator.Contains, "Doe");var oFilter3 = new sap.ui.model.Filter("name",sap.ui.model.FilterOperator.BT, "A","G"); // name between A and G
var oComboBox = new sap.ui.commons.ComboBox({items: {path: "/path/to/aggregation",
template: oItemTemplate,sorter: oSorter,filters: [oFilter1,oFilter2,oFilter3]
}});
Type Systemsince 1.4.0
-
8/16/2019 Sapui5 Training
67/101
Data binding supports the definition of types which can be handed over when binding pproperties with a defined type will automatically be formatted when displayed in the
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:
format options: Format options define how a value is formatted and displayed in the U
constraints (optional): Constraints define how an input value entered in the UI should
parsing the value will be validated against these constraints.
Type System Example
-
8/16/2019 Sapui5 Training
68/101
var oFloat = new sap.ui.model.type.Float(
{ // format options
minFractionDigits: 2,maxFractionDigits: 2
},
{ // contraints
maximum: 10
});
var oText = new sap.ui.commons.TextField({
value: {
path: "/sliderValue",
type: oFloat
}
});
Input Validation
-
8/16/2019 Sapui5 Training
69/101
To catch invalid user input, you can register the following handlers to the SAPUI5 Core.
attachFormatError
attachParseError attachValidationError
attachValidationSuccess
Example:
sap.ui.getCore().attachValidationError(function(oEvent) {var oElement = oEvent.getParameter("element");
if (oElement.setValueState) {oElement.setValueState(sap.ui.core.ValueState.Warning);}
});
OData - Open Data Protocol
-
8/16/2019 Sapui5 Training
70/101
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 eithe
Atom or JSON format
OData URL structure:
http://services.odata.org/OData/OData.svc/Category(1)/Produ$top=2
Service Root URI Resource path Query o
Example code for OData
-
8/16/2019 Sapui5 Training
71/101
// create OData model from URLvar oModel = new sap.ui.model.odata.ODataModel(uri, true);var oTable = new sap.ui.table.DataTable({ // create Table UIcolumns : [{label: "Name", template: "Description", sortProperty:
"Description" },{label: "Amount", template: "Amount", sortProperty: "Amount" }
]});oTable.setModel(oModel); // bind model to TableoTable.bindAggregation( "rows", "InvoiceSpendOfVendorGroups" );oTable.placeAt("content"); // place model onto UI
// the backend OData service URL
var uri =
"http://ldai1bld.wdf.sap.corp:50069/sap/imsample/st/odata_server2/exact?
sap-client=005";
-
8/16/2019 Sapui5 Training
72/101
Styling and Theming
Adjusting styles
-
8/16/2019 Sapui5 Training
73/101
In some cases one needs to adjust parts of the theme using CSS
One can add or tags in the HTML tag to include new style These styles are always processed after the UI5 CSS from the themes
As the last processed CSS wins in case of multiple same CSS rules, the custom CSS athe standard UI5 CSS
The parts to be overwritten can be determined using tools like Firebug
It is also important to know that the id given to a control is also the id that the topof this control gets. Thus, this id can be used as a reference in CSS
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
See an example here
UI5 Theming
https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/9d87f925dfbb4e99b9e2963693aa00ef.htmlhttps://sapui5.netweaver.ondemand.com/sdk/#docs/guide/9d87f925dfbb4e99b9e2963693aa00ef.html
-
8/16/2019 Sapui5 Training
74/101
See general concept
Based on CSS
In addition: CSS Parameters (see next slide)
CSS files are separated by control at development time
Additionally: global.css, shared.css
Every theme uses „base“ theme CSS plus specific theme relatedCSS files on top
Generator merges files and appends specific themes to basetheme
Replaces CSS Parameter usages
Optional compression/optimization
Automatic right-to-left generation (For RTL languages like Hebrew
One CSS file per control library (library.css)
UI5 Framework handles theme switching at runtime
UI5 Theming: CSS Parameters
-
8/16/2019 Sapui5 Training
75/101
UI5 offers two main options to adjust themes
Adjusting standard CSS directly with standard tools
Changing parameters for the main features of a theme
Parameters
Some values (often: colors) used for different elements
Parameters: write once, reference often
Parameters are mixed into the CSS of the controls.
The parameters are set in central files (Those defined in global.css/shared.css areavailable globally / in whole control library)
Using the Java based generator the parameters values are inserted and CSS only filare generated (note: Generator step is needed when using CSS parameters, this is nthe case if one wants to change the CSS only files)
@-sap-parameters {
sapUiTextColor: #000000; /* text color is 'black' */
[...]
}
button {
color: -sap-par(sapUiTextColor); /* current text color */
[...]
}
UI5 Theming: CSS Parameters II
-
8/16/2019 Sapui5 Training
76/101
Original parameters can be read at runtime with a JavaScript API
This allows tranfering UI5 theme parameters to own HTML parts
Especially useful when one uses technology which cannot be influenced by CSS dire
Canvas
WebGL
jQuery.sap.require("sap.ui.core.theming.Parameters");
var myColor = sap.ui.core.theming.Parameters.get("sapUiSemanticCriticalColor"))
Control Style and Themes: Supported themes Themes shipped with UI5:
-
8/16/2019 Sapui5 Training
77/101
Gold Reflection
Blue Crystal
Older Themes that arenot used anymore
Platinum:specification
Ux Target Design:specification
See all these themesshowcased in an example
https://help.hana.ondemand.com/theme_designer/frameset.htm?8c37f394f895469cac9b957744d781a1.htmlhttps://help.hana.ondemand.com/theme_designer/frameset.htm?8c37f394f895469cac9b957744d781a1.html
-
8/16/2019 Sapui5 Training
78/101
Extending UI5
Inclusion of external JS libraries
-
8/16/2019 Sapui5 Training
79/101
If UI5 doesn’t provide controls or behaviours that other JavaScript libraries offer, theseincluded into the UI5 based pages
Some JS libraries are already included in UI5 and used by UI5 runtime and can be used witho
jQuery, jQuery UI
dataJS, a Microsoft driven oData library which handles requests and takes care of creating and hand
and XML format
Other libraries need to be loaded separately, currently other libraries of interest are
Flot, a based jQuery plug in for displaying data sets using plot graphics
Protovis, an SVG based graphical library to visualize data sets
Inclusion of external JS libraries
http://datajs.codeplex.com/http://datajs.codeplex.com/http://code.google.com/p/flot/http://code.google.com/p/flot/http://mbostock.github.com/protovis/http://mbostock.github.com/protovis/http://mbostock.github.com/protovis/http://code.google.com/p/flot/http://datajs.codeplex.com/
-
8/16/2019 Sapui5 Training
80/101
To show how to load and use an external library, we take a look at anexample using jQuery flot
One can place the script tags for the library just behind the UI5 bootstrap script tagthe HTML tag
the library can be download and made part of the application project
For pie chart support you need also the flot.pie.js plugin
You can see a working pie chart example here
Inclusion of external JS libraries
http://code.google.com/p/flot/downloads/listhttps://sapui5.hana.ondemand.com/sdk/test-resources/sap/viz/Charting.htmlhttps://sapui5.hana.ondemand.com/sdk/test-resources/sap/viz/Charting.htmlhttp://code.google.com/p/flot/downloads/list
-
8/16/2019 Sapui5 Training
81/101
Most libraries require anstaring point or aplaceholder
This HTML element canbe provided by using thecore’s HTML control
HTML control’s contentis only rendered whenthe page is loaded orafter an event handler isfinished
The HTML controlprovides anafterRendering event,which indicates whenthe HTML control isfinished rendering
// create the HTML control which will be a placeholder
var oHTML = new sap.ui.core.HTML({
id: "pieContainer“,
content: "
-
8/16/2019 Sapui5 Training
82/101
Notepad Controls
Since 1.4.0
Overview
-
8/16/2019 Sapui5 Training
83/101
There are two approaches to develop UI5 Controls, either with tool support, oeditor. This section deals with creating custom controls with the extend meth
Since an IDE is not needed to create new controls with the extend method the
been named "Notepad Controls".
Technically, this functionality is not restricted to Controls. Arbitrary objects dsap.ui.base.Object can be created or extended.
The extend Method
-
8/16/2019 Sapui5 Training
84/101
The extend() method is available on all Controls (and the base classes) and i
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 ty
part contains information about the control API, which properties, aggregations, event
has and the implementation of the control methods.
Some methods such as the getters and setters for the properties and aggregations or tattaching/detaching event handlers are automatically created by UI5.
Basic Example
-
8/16/2019 Sapui5 Training
85/101
// set the name of the new Control type to "my.Hello"sap.ui.core.Control.extend( "my.Hello", {metadata: { // the Control API
properties: {name: "string" // setter and getter are created behind the scenes}
},renderer: function( oRm, oControl ) {// the part creating the HTMLoRm.write( "Hello " );// write the Control property 'name', with XSS protectionoRm.writeEscaped( oControl.getName() );oRm.write( "" );
}});
new my.Hello({ name: "UI5" }).placeAt( "content" );
Control Definition
-
8/16/2019 Sapui5 Training
86/101
The definition object for a custom control may contain metadata, public and private mhandler and the renderer.
sap.ui.core.Control.extend("TestControl", {metadata: { // defines the properties, aggregations, events
properties: {},
events: {},
aggregations: {}
},
publicMethod: function() {}, // all methods are public
_privateMethod: function() {}, // private methods are prefixed with _
init: function() {} // called when control is instantiated
onclick: function(e) {}, // event handlerrenderer: function(rm, oControl) {} // creates the html for the control
});
Control Metadata
-
8/16/2019 Sapui5 Training
87/101
Properties
type: The data type of the Controlproperty.
string for a string property (default)
int or float for number properties
int[] for an array of integers, string[] foran array of strings, etc.
sap.ui.core.CSSSize for a custom-definedtype
defaultValue: The default value ofthe property. (undefined if not set)
Example
properties: {title: "string",btnTxt: { defaultValue:
"Search" },showLogoutButton: {type: "boolean",defaultValue: true
},
width: {type: "sap.ui.core.CSSSidefaultValue: "50px"
}}
The metadata in the control definition consists of objects for the con
properties, events and aggregations.
Control Metadatacontinued
-
8/16/2019 Sapui5 Training
88/101
Events
Events are specified by the eventname only. In many cases there isnothing to configure about them,so just give an empty object.
Controls can enable events to beinterrupted by the application,using the enablePreventDefaultflag.
events: {logout: {},
close: {enablePreventDefault : true
}}
Aggregations
Aggregations and associations are
defined by their name, along withobject that can have a type, amultiple flag and a singularNam
aggregations: {acceptButton:
"sap.ui.commons.Button",worksetItems: {type:
"sap.ui.ux3.NavigationItem",
multiple: true,singularName : "worksetItem"}
}
Control Methods
-
8/16/2019 Sapui5 Training
89/101
After the metadata is defined, you can add any method implementations to your new method names can be chosen freely, some method names must be avoided though:
Names of methods that are provided by a super class.
Methods starting with set, get, insert, add, remove or indexOf may collide with setters/getter
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:
on...: Methods starting with "on" are event handlers that are automatically bound to browser even
init: Is the name of the initialization function called right after Control instantiation.
renderer: The name of the function that creates the HTML for the control.
Control Methodscontinued
-
8/16/2019 Sapui5 Training
90/101
Public / private methods
The convention is that private methods start with an underscore. All other methods ar
public.
init Method
The init() method is invoked by the UI5 core for each control instance right after the
this to set up things like internal variables or sub-controls of a composite. This method
private and only to be called by the UI5 core.
Event handler methods
Methods that have a name starting with on are reserved for event handlers. For commclick or keydown, browser event handlers for these methods are registered automatic
core.
Control MethodsExamples
-
8/16/2019 Sapui5 Training
91/101
// public method
divide: function(x, y) {
if (this._checkForZero(y)) {
throw new Error("Second parameter may notbe zero");
}
return x / y;
},
// private method
_checkForZero: function(y) {
if (y === 0) {
return true;}
return false;
},
// init method, invoked when
// is instantiated
init: function() {
this._bSearchTriggered = fthis._oSearchBtn =
new sap.ui.commons.Butto
this.getId() + "-searc
{ text: "Search" }
);
},
// event handler
onclick: function(e) {alert("Control " + this.ge
+ " was clicked.");
}
Control Renderer
-
8/16/2019 Sapui5 Training
92/101
The renderer method isresponsible for creating theHTML structure that makes up
the control. It is differentfrom the other methods, as itis a static one, so the thiskeyword is not available.Instead, a control instance anda RenderManager instance aregiven to the method.
If an existing renderer shouldbe used without modification,you can give the name of thisrenderer class.
Example:
renderer: function(oRm, oCtrl) {oRm.write("");oRm.writeEscaped(oCtrl.getText(oRm.write("");
}
Using an existing renderer:
renderer:"sap.ui.commons.ButtonRenderer"
-
8/16/2019 Sapui5 Training
93/101
CVOM Charts
CVOM Chart Types
Events
-
8/16/2019 Sapui5 Training
94/101
Bar
sap.viz.ui5.Bar
Line
sap.viz.ui5.Line
Pie
sap.viz.ui5.Pie
Combination
sap.viz.ui5.Combination
Events
selectData ( oControlEvent )
CVOM API Reference
Exercise – CVOM Pie Chart
• Extend the UI5 bootstrap to the CVOM Chart library
https://sapui5.hana.ondemand.com/sdk/test-resources/sap/viz/Charting.htmlhttps://sapui5.hana.ondemand.com/sdk/test-resources/sap/viz/Charting.htmlhttps://sapui5.hana.ondemand.com/sdk/test-resources/sap/viz/Charting.html
-
8/16/2019 Sapui5 Training
95/101
• sap.service.visualization
• Create an array with test data and set it to a JSON Model
• new sap.ui.model.json.JSONModel();
• Bind the model to a DataTable
• new sap.ui.table.DataTable();
• Define a SimpleDMDataset and set it to the DataTable
• new sap.service.visualization.dataset.SimpleDMDataset();
• Instantiate a Pie CVOM Chart
• new sap.service.visualization.chart.Bar();
Solution to Exercise
-
8/16/2019 Sapui5 Training
96/101
var oChartData = [ { Country : "Canada", profit: 341.25, revenue:410.87 },{ Country : "China", profit: 133.82, revenue:338.29},{ Country : "France", profit: 348.76, revenue:487.66 },{ Country : "Germany", profit: 217.29, revenue:470.23 },
{ Country : "India", profit: 117.00, revenue:170.93 },{ Country : "United States", profit: 609.16, revenue:905.08 }];
var oDataTable = new sap.ui.table.DataTable();var oControl = new sap.ui.commons.TextView().bindProperty( "text","Country");
oDataTable.addColumn(new sap.ui.table.Column({label : new sap.ui.commons.Label({ text: "Country"}),template : oControl
}));
oControl = new sap.ui.commons.TextView().bindProperty ("text","profit");
oDataTable.addColumn(new sap.ui.table.Column({label : new sap.ui.commons.Label({ text: "profit"}),template : oControl
}));
Solution to Exercise
-
8/16/2019 Sapui5 Training
97/101
oControl = new sap.ui.commons.TextView().bindProperty( "text","revenue");
oDataTable.addColumn(new sap.ui.table.Column({label : new sap.ui.commons.Label({ text: "revenue"}),
template : oControl}));
var oJSONModel = new sap.ui.model.json.JSONModel();
oJSONModel.setData({ chartData: oChartData });
oDataTable.setModel(oJSONModel);oDataTable.bindRows("chartData");
var oDataset = new sap.service.visualization.dataset.SimpleDMDataset();
oDataset.setDataTable(oDataTable);
-
8/16/2019 Sapui5 Training
98/101
Optimizing UI5 Files
Reducing the number of JavaScript files
-
8/16/2019 Sapui5 Training
99/101
sap-ui-core.js
loads library.js file for each used library.
loads control behaviour and rendering files whencontrol is instantiated.
only needed code is loaded
many requests
sap-ui-core-all.js
loads the complete library, including the code for all
controls less requests
bigger filesize
sap-ui-core.js: 99 requests, 1,06 MB, 831ms
sap-ui-core-all.
Configure UI5 download tool
-
8/16/2019 Sapui5 Training
100/101
The download tool creates merged js files with all
desired modules.
You can mix such a merged file with the dynamicon-demand approach: load a big file with the
most common modules and let UI5 load the others
on demand.
Please be aware, that the above tool link creates
the download configuration for the nightly build.
Usage:
Load your application page and
navigate through it (, to load al
modules)
Press CTRL-ALT-SHIFT-P(UI5 Technical Info)
Expand the list of loaded modu
select and copy it
Paste your module list into the
white
text area on the right hand side
Download and Save the custommodules
Package the custom module int
application and load it in your p
instead
of the sap-ui-core.js
-
8/16/2019 Sapui5 Training
101/101
Thank you!