Sapui5 Training

8/16/2019 Sapui5 Training

1/101

SAPUI5 Training

SAP UI

1


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


3/101

SAP UI5 Overview

SAP UI

3


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.


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


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.


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/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


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


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


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


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


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()


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);

});


15/101

Runtime Resources


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


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


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!


19/101

Programming Applications


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


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");


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


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


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


25/101


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");


26/101

SAPUI5 Developer Studio


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/


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


29/101

Creating a UI5 Project with SAPUI5

Developer Studio


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…


31/101


Select "SAPUI5 Application

Project" in the Wizard. Click "Next".


32/101


Enter the name of the project.

Leave the checkbox "create an initial View"checked.

Click "Next".


33/101


Enter the name of the initial view.

Click "Next".


34/101


The last screen shows you a summary of the

project properties. Click "Finish" to create the new project.


35/101

The new Project


36/101

Adding a control to the view


37/101

Web Application Preview - Jetty


38/101

Web Application Preview - Jetty


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);


40/101

Resource Handling


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


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


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


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


45/101

MVC

B i MVC t


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


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.");

}});


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


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


50/101

Example XML View

Example JSON View


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


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;}

});


53/101

Databinding

UI5 Data Binding


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


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/


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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";


72/101

Styling and Theming

Adjusting styles


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


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


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


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:


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


78/101

Extending UI5

Inclusion of external JS libraries


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


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/


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


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


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: "


82/101

Notepad Controls

Since 1.4.0

Overview


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


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


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


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


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


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


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


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


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


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"


93/101

CVOM Charts

CVOM Chart Types

Events


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


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();



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

}));



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);


98/101

Optimizing UI5 Files

Reducing the number of JavaScript files


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


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


101/101

Thank you!

Documents

Sapui5 Training