You are on page 1of 148

SAPUI5 Overview

June 2013
TIP CORE UI

Agenda

SAPUI5 Overview

Resource Handling

Programming Applications

Modularization

SAPUI5 Developer Studio

Localization

Creating a SAPUI5 Project

Styling & Theming

Model Viewer Controller

SAPUI5 Mobile

Databinding

Extending SAPUI5

Databinding OData

Components

Notepad Controls

CVOM Charts

Resource Repositories

Optimizing SAPUI5

2013 SAP AG. All rights reserved.

SAPUI5 Overview

SAP UI Development Toolkit for


HTML5
SAP UI Development Toolkit for HTML5
The official long name

SAPUI5
The short name

UI5
Internal 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
because the name Phoenix was not suitable to be used publicly.

2013 SAP AG. All rights reserved.

Main UI5 Characteristics


SAPUI5 is an extensible JavaScript-based HTML5 browser rendering library
for Business Applications.

well-designed API, easy to consume and use


extensible UI component model, including tooling support
high performance, SAP product standard compliant
powerful theming support based on CSS
provides Ajax capabilities
based on open standards like OpenAjax, Javascript, CSS, HTML 5, etc.
using and including the popular jQuery library

2013 SAP AG. All rights reserved.

UI5 Key Components


Run Time
Control libraries (JavaScript, CSS and image files)
Core (JavaScript files)
Test suite (HTML, JavaScript files)

Design Time (optional)

Application development tools in Eclipse


Control development tools in Eclipse
Resource handler in Java and ABAP
Theming generator

2013 SAP AG. All rights reserved.

UI5 Browser Support

Internet Explorer

Firefox

Chrome

Safari

Version 8 and
upwards

Version 10 and
upwards
Version 10 ESR
and upwards

Version 1 and
upwards

Version 3 and
upwards

(with limitations)*

*Internet Explorer 8 is supported with graceful degradation for CSS3 features like
rounded corners, text-shadows, etc.

2013 SAP AG. All rights reserved.

UI5 Release Plan


Development track
Identified by a major and an odd minor version number,
e.g. 1.5.1
The versions of this track are released internally and
are not meant to be used in products shipped to
customers.

Release track
Identified by a major and an even minor version
number, e.g. 1.4.1
The versions of this track are released externally. Only
these versions are allowed to be used in
production.

2013 SAP AG. All rights reserved.

UI5 Architecture Overview

Application
CLIENT

Application
SERVER

2013 SAP AG. All rights reserved.

UI5 Control Libraries


sap.ui.commons
Includes bread and butter" controls like TextField, Button

sap.ui.ux3
Includes UX3 patterns, mainly available in
Gold Reflection design, e.g.: Shell

sap.ui.table

sap.m

Includes the Table control

Includes controls for mobile devices

And more, like sap.viz, sap.ui.dev


2013 SAP AG. All rights reserved.

10

UI5 and Extensibility


UI5 allows application developers to
Include their own JavaScript, HTML and CSS into UI5 based pages
Include other JavaScript libraries where UI5 is lacking controls or functionality
Create composite controls from existing UI5 controls
Write new UI libraries and new controls
Write plug-ins for the UI5 core

This way UI5 development groups should not become a bottleneck for application
groups in need of a certain functionality.

2013 SAP AG. All rights reserved.

11

UI5 Knowledge and Test Resources


Documentation and Information

UI5 support and question channels

UI5 Wiki

SAPUI5 Community

UI5 Mobile Wiki

CSN Component:

UI5 Tools Wiki

CA-UI5 (UI5 Runtime)

Demokit

CA-UI5-MOB (UI5 Mobile Lib)

API Documentation
General UI5 Documentation

Control and code testing


Test Suite

UI5 Tools support and question channels


SAPUI5 Tools Community
CSN Component:
CA-UI5-TOL (UI5 Tools)

SNIPPIX

2013 SAP AG. All rights reserved.

12

UI5 Application Example


Hello World Example in SNIPPIX

2013 SAP AG. All rights reserved.

13

UI5 Application Example


Showcase of SAP Applications built with UI5

2013 SAP AG. All rights reserved.

14

UI5 Runtime
UI5 mainly consists of JavaScript, CSS and image files that run in a browser.
Apart from this main offering the runtime files UI5 has many more optional
pieces of software.
Runtime documentation

2013 SAP AG. All rights reserved.

Eclipse development tools

Sample apps

15

Programming Applications

SAPUI5 bootstrap
UI5 pages always have to start with the bootstrap, to load the UI5 runtime.

Attributes of the script tag are evaluated and used to configure the runtime
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, many can also be added as URL
parameters

2013 SAP AG. All rights reserved.

17

Application script and UI Area

Exercise 1

After the bootstrap script tag an "application script" can follow in which the UI5
application is written
You create your controls like layouts and TextFields
Display your controls in an HTML element called "UI area" by invoking the placeAt
method (there can be multiple UI areas)

1. Bootstrap
2. Application
3. UI-Area

2013 SAP AG. All rights reserved.

18

Example of Multiple UI Areas

Exercise 2

http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/11571
2013 SAP AG. All rights reserved.

21

Useful Core functions

Exercise 3

sap.ui.getCore()

jQuery.sap.domById(id)

Gets a core instance

Gets any HTML element with id id


If there is also a UI5 control with id id, the
element returned is the topmost HTML
element of this UI5 control (the UI5 control
id is always used there)
Similar to document.getElementById
but gets rid of IE bug which also retrieves
elements with the name of id

sap.ui.getCore().byId(id)
Gets an instance of a UI5 control which was
created with id id
Can be used to access removed controls
(even though the id doesnt exist in the
DOM anymore)

sap.ui.getCore().applyChanges( jQuery.sap.byId(id)
)
Returns the jQuery object of the DOM
Carries out and renders the changes for UI5
element with the specified id
controls immediately, before the runtime
Similar to jQuery(#myId) or $
would do it (use carefully!!)
(#myId) but handles escaping of dots
and adds the hash character

2013 SAP AG. All rights reserved.

24

Internals about UI5 Rendering


UI5 control tree(s) are only rendered when the HTML page is finished loading
Only then the UI areas do actually exist in the browsers DOM
This corresponds with jQuerys $(document).ready() function

UI5 largely uses HTML strings to render its controls


Historically using innerHTML for changing HTML was much faster than changing the DOM
for the same purpose.

Changes to controls (add/remove properties) are not directly carried out

Onload at initialization (placeAt calls are buffered until then)


After control event handlers have finished their work
After application logic has finished changing controls (UI5 registers a timeout)
When core method applyChanges() is triggered

2013 SAP AG. All rights reserved.

27

SAPUI5 Developer
Studio

Overview
SAPUI5 Developer Studio is a set of tools for Eclipse that greatly simplify the
development process for UI5 applications and controls, including:

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 Wiki at http://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5.tools/.

2013 SAP AG. All rights reserved.

29

Installation
Prerequisite: Install the latest Java Development Kit (currently Version 7), if it is not
installed already.
Download and install one of the preconfigured IDEs. If you want to use the SAPUI5
Repository Team Provider you should choose the 32bit version.

It is also possible to setup Eclipse on your own by using one of the available
update sites for Eclipse.
Once Eclipse has been (re)started, the SAPUI5 Eclipse tools should be available.
One way to confirm a successful installation is to check whether you can create a UI
Library Project / SAPUI5 Application Project.
The full installation information is available in the Tools Wiki at:
http://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5/wiki/Documentation/Tools/download

2013 SAP AG. All rights reserved.

30

Creating a UI5 Project


with SAPUI5 Developer
Studio

Creating a new SAPUI5 Project

In Eclipse right-click on the


project pane to bring up the
context menu
(or use the File New
entry from the Eclipse menu).

Choose New Project

2013 SAP AG. All rights reserved.

32

Creating a new SAPUI5 Project

Select "SAPUI5 Application


Project" in the Wizard.

Click "Next".

2013 SAP AG. All rights reserved.

33

Creating a new SAPUI5 Project

Enter the name of the project.

Choose between Desktop or


Mobile as the target device for your
new project.

Leave the checkbox "create an initial


View" checked.

Click "Next".

2013 SAP AG. All rights reserved.

34

Creating a new SAPUI5 Project

Enter the name of the initial view.

Click "Next".

2013 SAP AG. All rights reserved.

35

Creating a new SAPUI5 Project

The last screen shows you a


summary of the project properties.

Click "Finish" to create the new


project.

2013 SAP AG. All rights reserved.

36

The new Project

2013 SAP AG. All rights reserved.

37

Adding a shell to the view

2013 SAP AG. All rights reserved.

38

Adding the sap.ui.ux3 library

2013 SAP AG. All rights reserved.

39

Testing the Application

2013 SAP AG. All rights reserved.

40

Testing the Application

2013 SAP AG. All rights reserved.

41

Web Application Preview - Jetty


Disadvantages compared to testing on server:

Based on Internet Explorer, therefore does not display most CSS3 features

Creates a random port which stops working when Web App View is closed, if link is copied
into a browser for debugging, this link stops working as well

Use therefore not recommended

2013 SAP AG. All rights reserved.

42

Exercises Developer Studio

Exercise 4

Create a new SAP UI5 Application


project and add a UX3-Shell to it

Exercise 5

Add content to the UX3-Shell

2013 SAP AG. All rights reserved.

43

MVC

Basic Model-View-Controller Concept


Views can be defined using
XML with HTML, mixed or standalone
(sap.ui.core.mvc.XMLView)
JavaScript
(sap.ui.core.mvc.JSView)
JSON
(sap.ui.core.mvc.JSONView)
declarative HTML
(sap.ui.core.mvc.HTMLView)

Controller
bound to a view or standalone
can also be used by multiple views

Model: Data binding can be used on the views


Find an MVC in 22 seconds example here.
2013 SAP AG. All rights reserved.

49

View and Controller

Exercise 6

address.controller.js

address.view.xml

2013 SAP AG. All rights reserved.

50

File Location Logic


Controllers and views use the require/declare logic, so if a controller is referenced
like this:

UI5 then checks if you already have defined the controller like this in one of your
already processed application sources

If this is not the case then UI5 tries to load this definition from a file that by default is
located in your UI5 resources folder. This applies to views as well.
resources/sap/hcm/Address.controller.js
2013 SAP AG. All rights reserved.

53

Controller Events
Currently there are 4 events defined
in a controller:

You can add handlers for any of


these for to your controller class:

onInit
Fired when the view is first instantiated

onBeforeRendering
Fired before the view is rendered

onAfterRendering
Fired when the view has been rendered (the
HTML is injected into the document)

onExit
Fired when the controller is destroyed
Can be used to free resources

2013 SAP AG. All rights reserved.

54

Example JS View

2013 SAP AG. All rights reserved.

55

Example XML View

2013 SAP AG. All rights reserved.

56

Example JSON View

2013 SAP AG. All rights reserved.

57

Example HTML View

2013 SAP AG. All rights reserved.

Exercise 7

58

View Type Comparison


Feature

JS View

XML View

JSON View

HTML View

Controls from Standard and Custom Libraries

Yes

Yes

Yes

Yes

Self-contained registration of custom library


locations

Yes

No

No

No

Properties of types string, int.boolean, float

Yes

Yes

Yes

Yes

Properties of other types (object)

Yes

No

No

No

Aggregation 1:1, 1:n, Association 1:1, 1:n

Yes

Yes

Yes

Yes

Single Event Listener Registration (maybe


limited to some scope, e.g. controller/window)

Yes

Yes

Yes

Yes

Multiple Eventlisteners and/or without scope

Yes

No

No

No

Simple Data Binding (Path, default or named


model, template approach)

Yes

Yes

Yes

Yes

Customized Data Binding (formatter, data type,


factory approach)

Yes

No

No

No

Embedded HTML (without use of HTML control)

No

Yes

No

No

Dynamic control creation (e.g. based on model


data, but outside the data binding features)

Yes

No

No

No

Code completion (Eclipse)

Yes

Yes, with
limitations

No

No

Templating (Eclipse)

Yes

No

No

No

Validation

No

Yes

No

No

2013 SAP AG. All rights reserved.

64

Databinding

UI5 Data Binding


In UI5, DATA BINDING is used to bind UI5
controls to a data source that holds the
application data, so that the controls are
updated automatically whenever the
application data is changed.
application data

John Doe

UI5 Control / Output

John Doe, 35

Age: 35
application data
has been updated

John Doe
Age: 36

With TWO-WAY-BINDING the application


data is updated whenever the value of a
bound control changes, e.g. through user
input.
application data

John Doe

UI5 Control / Output

John Doe, 35

Age: 35
Resulting
UI5 Control / Output

John Doe, 36

Resulting
application data

John Doe

UI5 Control / Output


has been updated

John Doe, 36

Age: 36

Data binding supports binding of simple controls like TextField and list type controls like.
See the complete documentation on how data binding works and how to implement it in an application.
2013 SAP AG. All rights reserved.

66

Data Binding: Model Types


UI5 data binding supports three different model implementations.

JSON model
supports data in a
JavaScript Object
Notation format
supports two-way
binding

XML model
supports XML data
supports two-way
binding

OData model
supports OData compliant
data
creates OData requests and
handles responses
includes the open source
library dataJS to handle
OData requests and data
experimental two-way binding

Additionally, the ResourceModel helps binding translated texts.


Applications can create their own Model implementations.
2013 SAP AG. All rights reserved.

67

Creating a Model Instance


To use data binding in a SAPUI5 applications you will need to instantiate the
appropiate model first. The constructor takes the URL of the model data or the data
itself as the first parameter.
JSON-Model:

XML-Model:

OData-Model:

2013 SAP AG. All rights reserved.

68

Assigning the Model


After the model has been created you can assign the model to the Core or specific
controls with the setModel method.
The relevant model for a control is the one which is nearest to it on the path up to
the root (UI area). If there is no model in the root path found, the one attached to the
core becomes the relevant model.

2013 SAP AG. All rights reserved.

69

Property Binding
Most of the properties of a control can be bound to model properties.
There are two ways to bind properties to the model, in the constructor with curly
braces or using the bindProperty method.
bindProperty method:
oControl.bindProperty("controlProperty", "modelProperty");

curly braces syntax:


var oControl = new sap.ui.commons.TextView({
controlProperty: "{modelProperty}"
});

(alternatively) by path:
var oControl = new sap.ui.commons.TextView({
controlProperty: { path: modelProperty }
});
2013 SAP AG. All rights reserved.

70

Example for Simple Control

Exercise 8

http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/9282
2013 SAP AG. All rights reserved.

71

Aggregation Binding
Aggregation binding is used to bind a collection of values, like binding multiple
rows to a table. To use aggregation you will have to use a control that acts as a
template.

The aggregation binding can also be defined using the bindAggregation method
of a control.

2013 SAP AG. All rights reserved.

74

Example of Aggregation BindingExercise 9

http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/60875
2013 SAP AG. All rights reserved.

75

About Binding Paths


{
company: {
name: "ACME",
info: {
employees: 3
},
contacts: [
{
name:
"Barbara",
phone: "873"
},{
name: "Gerry",
phone: "734"
}
]
}
}
2013 SAP AG. All rights reserved.

Absolute binding paths within this model:


/company/name
/company/info/employees
/company/contacts
(a
collection!)
/company/contacts/0/name

Relative binding paths within the "/company"


context:
name
info/employees
contacts

Relative binding paths within an aggregation


binding of "/company/contacts":
name
phone
78

Multiple Models / Named Models


It is possible to set multiple models for an element or the core by specifying
individual names for the models, which are used to identify them.

Property bindings for a named model:

Aggregation bindings for a named model:

2013 SAP AG. All rights reserved.

79

Extended Data Binding Syntax


Instead of just using the token name of a model property you can also use the
extended data binding syntax. This enables you to use formatters and the type
system for property binding and templates, filter and sorters for aggregation binding.
To use the extended syntax you supply an object literal for the bound
property/aggregation.
Extended property binding:

2013 SAP AG. All rights reserved.

Extended aggregation binding:

80

Formatters

Exercise 10

For properties you can supply a formatter function which will be called with the value
of the model property. The return value of the formatter function is used as the value
of the bound control.

2013 SAP AG. All rights reserved.

81

Type System
Data binding supports the definition of types which can be handed over when
binding properties. Bound properties with a defined type will automatically be
formatted when displayed in the UI, input values in UI controls are parsed and
converted back to the defined type in the model.
For each Type you can define the following parameters in the constructor:
format options:
Format options define how a value is formatted and displayed in the UI.
constraints (optional):
Constraints define how an input value entered in the UI should look like. When
parsing the value will be validated against these constraints.

2013 SAP AG. All rights reserved.

84

Example Date Type

2013 SAP AG. All rights reserved.

Exercise 11

85

Custom Types

2013 SAP AG. All rights reserved.

88

Sorters and Filters

Exercise 12

When using aggregation binding, you can provide initial sorting and filtering.

2013 SAP AG. All rights reserved.

89

Calculated Fields
The Calculated Fields feature allows the binding of multiple properties in different
models to a single property of a control. For example the value property of text
field may be bound to a property firstName and a property lastName in a
model.
The application can access these values in a formatter function and can decide
how they should be processed or combined together:
Property Declaration

Formatter Function

2013 SAP AG. All rights reserved.

92

Calculated Fields Extended Syntax


The extended syntax for calculated fields can be used in declarative views such as
html and xml views. Because it is still experimental, it needs to be switched on via
the configuration flag xx-bindingSyntax=complex within the bootstrap.

Now you can mix the text and calculated fields:

2013 SAP AG. All rights reserved.

93

Example of Calculated Fields

Exercise 13

http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/76601
2013 SAP AG. All rights reserved.

94

Master-Detail Relationship
A master-detail relationship is a
1:n type relationship.
Examples of a master-detail
relationship are:

a set of purchase orders and a set


of line items belonging to each
purchase order

an expense report with a set of


expense line items

a department with a list of


employees belonging to it

An application can use this master-detail relationship to enable users to navigate


through the purchase order data and see the detail data for line items only related to
the master purchase order selected.
2013 SAP AG. All rights reserved.

97

Example of Master-Detail

http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/30500
2013 SAP AG. All rights reserved.

98

Example of Master-Detail: Code Part


1

http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/30500
2013 SAP AG. All rights reserved.

99

Example of Master-Detail: Code Part


2

http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/30500
2013 SAP AG. All rights reserved.

100

Input Validation
To catch invalid user input, you can register the following handlers to the SAPUI5
Core.

attachFormatError

attachParseError

attachValidationError

attachValidationSuccess

Example:

2013 SAP AG. All rights reserved.

101

Exercise Data Binding

Exercise 14

2013 SAP AG. All rights reserved.

Create a searchable Musicstore and


populate it with data from iTunes

102

Databinding - OData

OData - Open Data Protocol

Based on HTTP, Atom Pub format and JSON

Enables provision of data services based REST principles

Released under open specification promises by Microsoft

Defines data queries using URLs constructed with specific rules

Defines data formats representing resources like collections, entries, etc. in


either Atom or JSON format

OData URL structure:


http://services.odata.org/OData/OData.svc/Category(1)/Products?
$top=2
Service Root URI

2013 SAP AG. All rights reserved.

Resource path

Query options

109

OData - Service Document &


Metadata
Service Document
The service document (returned at the OData service root) gives you the titles and
urls for each service feed:
http://services.odata.org/V3/OData/OData.svc/

$metadata
The $metadata entry for an OData service return a EDMX file (Entity Data Model
XML) that contains a complete description of the feeds, types, properties and
relationships exposed by the OData service:
http://services.odata.org/V3/OData/OData.svc/$metadata
Alternatively, this experimental API Explorer by the OData Service can be used:
http://services.odata.org/ODataAPIExplorer/ODataAPIExplorer.html
2013 SAP AG. All rights reserved.

110

OData - System Query Options


When accessing an OData service, you can supply some system query options to
influence the returned entries.

Parameter Description

Example

$orderby

Orders entries by the entity supplied

/Products?$orderby=Rating,desc

$top

Selects only the first N items in a


collection

/Products?$top=5

$skip

selects entries starting by N+1

/Products?$skip=2

$filter

filters entries based on the criteria

/Suppliers?$filter=Address/City
eq 'Redmond'

$expand

expanded Entries are eagerly loaded /Categories?$expand=Products


and presented inline

$format

defines the format that the server


must return

/Products?$format=json

$select

returns the subset of the specified


properties

/Products?$select=Price,Name

2013 SAP AG. All rights reserved.

111

Adding OData Query Options


SAPUI5 handles most of the URL parameters for OData services automatically. You
do have the ability to add query options manually; either by adding them to service
URL or passing a map of parameters when using bindElement or
bindAggregation.
Expand Parameter:

Select Parameter:

oControl.bindElement(
"/Category(1)",
{ expand: "Products" }
);

oControl.bindElement(
"/Category(1)", {
expand: "Products",
select: "Name,ID,Products"
});

oTable.bindRows({
path: "/Products",
parameters:
{ expand: "Category" }
});

2013 SAP AG. All rights reserved.

oTable.bindRows({
path: "/Products",
parameters:
{ select: "Name,Category" }
});
112

Example code for OData

Exercise 15

http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/63664
2013 SAP AG. All rights reserved.

113

Notepad Controls

Overview
There are two approaches to develop UI5 Controls, either with tool support,
or just as part of a plain JS file. This section deals with creating custom
controls in JavaScript with the extend method.
Since an IDE is not needed to create new controls with the extend
method these controls have been named "Notepad Controls".
Technically, this functionality is not restricted to Controls. Arbitrary objects
derived from sap.ui.base.Object can be created or extended.
Snippix-Example "New Control in 19 Seconds"

2013 SAP AG. All rights reserved.

117

The extend Method


The extend() method is available on all Controls (and the base classes)
and is used to define a new subclass.
Creating a new control:

sap.ui.core.Control.extend(sName, oDefinition);

Creating a new Control which inherits from Button:

sap.ui.commons.Button.extend(sName, oDefinition);

The parameters to this function are the name and the definition of the new control
type. The definition part contains information about the control API, which
properties, aggregations, events, etc. the control has and the implementation of the
control methods.
Some methods such as the getters and setters for the properties and aggregations
or the methods for attaching/detaching event handlers are automatically created by
UI5.
2013 SAP AG. All rights reserved.

118

Control Definition
The definition object for a custom control may contain metadata, public and private
methods, event handler and the renderer.

2013 SAP AG. All rights reserved.

119

Basic Example

http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/3357
2013 SAP AG. All rights reserved.

120

Control Metadata
The metadata in the control definition consists of objects for the control
properties, events and aggregations.
Properties

Example

type: The data type of the Control


property.

properties: {
title: "string",
btnTxt: { defaultValue:
"Search"},
showLogoutButton: {
type: "boolean",
defaultValue: true
},
width: {
type: "sap.ui.core.CSSSize",
defaultValue: "50px"
}
}

string for a string property (default)


int or float for number properties
int[] for an array of integers,
string[] for an array of strings,
etc.
sap.ui.core.CSSSize for a
custom-defined type

defaultValue: The default value of


the property. (undefined if not set)
2013 SAP AG. All rights reserved.

121

Control Metadata
Events

Aggregations

Events are specified by the event


name only. In many cases there is
nothing to configure about them, so
just give an empty object.

Aggregations and associations are


defined by their name, along with an
object that can have a type, a
multiple flag and a singularName.

Controls can enable events to be


interrupted by the application, using
the enablePreventDefault flag.

aggregations: {
acceptButton:
"sap.ui.commons.Button",
worksetItems: {
type:
"sap.ui.ux3.NavigationItem",
multiple: true,
singularName : "worksetItem"
}
}

events: {
logout: {},
close: {
enablePreventDefault : true
}
}

2013 SAP AG. All rights reserved.

122

Control Methods
After the metadata is defined, you can add any method implementations to your
new Control. The method names can be chosen freely, some method names must
be avoided though:

Names of methods that are provided by a super class.

Methods starting with set, get, insert, add, remove or indexOf may collide with
setters/getters for properties or aggregations you defined.

Methods starting with attach, detach or fire may collide with methods created for
events.

There are some method names you may use but which have a special meaning:

on...: Methods starting with "on" are event handlers that are automatically bound to
browser events.

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.

2013 SAP AG. All rights reserved.

123

Control Methods
Public / private methods
The convention is that private methods start with an underscore. All other methods
are considered public.
init Method
The init() method is invoked by the UI5 core for each control instance right after
the constructor. Use this to set up things like internal variables or sub-controls of a
composite. This method is considered private and only to be called by the UI5 core.
onAfterRendering Method
The onAfterRendering() method is invoked after the controller's View is
re-rendered.
Event handler methods
Methods that have a name starting with on are reserved for event handlers. For
common events such as click or keydown, browser event handlers for these
methods are registered automatically by the UI5 core.
2013 SAP AG. All rights reserved.

124

Control Methods - Examples


// public method
divide: function(x, y) {
if (this._checkForZero(y)) {
throw new Error("Second
parameter may not be zero");
}
return x / y;
},
// private method
_checkForZero: function(y) {
if (y === 0) {
return true;
}
return false;
},

// init method, invoked when


control
// is instantiated
init: function() {
this._bSearchTriggered = false;
this._oSearchBtn =
new sap.ui.commons.Button(
this.getId() + "searchBtn",
{ text: "Search" }
);
},
// event handler
onclick: function(e) {
alert("Control " + this.getId()
+ " was clicked.");
}

2013 SAP AG. All rights reserved.

125

Control Renderer
Example:
The renderer method is
responsible for creating the HTML
structure that makes up the
control. It is different from the
other methods, as it is a static
one, so the this keyword is not
available. Instead, a control
instance and a RenderManager
instance are given to the method.

renderer: function(oRm, oCtrl) {


oRm.write("<div");
oRm.writeControlData(oCtrl);
oRm.addStyle("width",
oCtrl.getSize());
oRm.writeStyles();
oRm.addClass("myClass");
oRm.writeClasses();
oRm.write(">");
oRm.writeEscaped(oCtrl.getText());
oRm.write("</div>");
}

Using an existing renderer:


If an existing renderer should be
used without modification, you
can give the name of this
renderer class.
2013 SAP AG. All rights reserved.

renderer:
"sap.ui.commons.ButtonRenderer"
126

Example with Data Binding

http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/64805
2013 SAP AG. All rights reserved.

127

Example with Charts

http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/42676
2013 SAP AG. All rights reserved.

128

Exercise Notepad Controls

Exercise 16

2013 SAP AG. All rights reserved.

Add an Audioplayer Control to your


Music store from Exercise 14 and
have the selected song play

129

Resource Repositories

Overview
In order to get UI5 running on a web page, the UI5 resources need to be
loaded by the browser.
These options are available for referencing the UI5 runtime files:
CDN (content delivery network)
Runtime libraries (wars and jars)
SDK (repository / drop)

2013 SAP AG. All rights reserved.

134

Public Trial
A trial version of the SAPUI5
framework has been released in
the SAP Community Network

http://scn.sap.com/community/dev
eloper-center/front-end

Current version: 1.12.1

Includes static JavaScript-Files,


war-Files and the Demokit

2013 SAP AG. All rights reserved.

135

CDN - Content Delivery Network


The content delivery network provides a ready-to-consume nightly-build version of
UI5. You can include UI5 in any HTML file with the following script tag without
actually deploying UI5.
<script
id="sap-ui-bootstrap"
src="http://veui5infra.dhcp.wdf.sap.corp:8080/sapui5/resources/sap-uicore.js"
data-sap-ui-theme="sap_goldreflection"
data-sap-ui-libs="sap.ui.commons">
</script>

The above example shows the URL which points you to the nightly built, including
the newest features but also the newest bugs. To use a stable release, set the src
of the script to:
http://vesapui5.dhcp.wdf.sap.corp:8080/sapui5-1.12/resources/sap-uicore.js

veui5infra.dhcp.wdf.sap.corp is an internal server and you cannot ship your


2013 SAP AG. All
rights reserved.
product
referencing
this CDN!

136

SDK repository/drop
The SDKs contain almost everything that UI5 has to offer:
Runtime, documentation, Eclipse development Tools,
sample apps and can be downloaded from http
://veui5infra.dhcp.wdf.sap.corp:1080/repository/drop/
The latest public version is located in the latest-release
directory.
The latest version, including internal releases is always
available in the latest-milestone folder.
The zip file contains a readme.html file which explains the
different parts of the SDK
Please be aware that an SDK drop also may contain stuff
that is not intended and will not be shipped (e.g. snippix).

2013 SAP AG. All rights reserved.

137

Maven Nexus Repository


In the Nexus repository you can find the runtime files for all versions of UI5,
from lightweight releases in war packages or zip files to nightly builds.

URL

js

http://nexus.wdf.sap.corp:8081/nexus/index.html#nexus-search;quick~sapui5

war

Direct download
http://nexus.wdf.sap.corp:8081/nexus/service/local/repositories/deploy.milestones/co
ntent/com/sap/ui5/sapui5/1.8.0/sapui5-1.8.0-static.zip

http://nexus.wdf.sap.corp:8081/nexus/service/local/artifact/maven/redirect?
r=deploy.milestones&g=com.sap.ui5&a=sapui5&v=1.8.0&e=war

Maven snapshots
http://nexus:8081/nexus/service/local/artifact/maven/redirect?
r=deploy.snapshots&g=com.sap.ui5&a=sapui5&v=1.9.0SNAPSHOT&e=zip&c=static
http://nexus:8081/nexus/service/local/artifact/maven/redirect?
r=deploy.snapshots&g=com.sap.ui5&a=sapui5&v=1.9.0-SNAPSHOT&e=war
2013 SAP AG. All rights reserved.

x
x
138

Resource Handling

Overview Resource Handling


The Resource Handling of SAPUI5 is separated in two parts:
Client-side Mechanisms
Modularization
Require/Declare for
JavaScript files
Localization
Resource Bundles
Both concepts are loading additional
resources from a server where this server
might be any kind of web server (simple,
Java, ABAP ), independent of the server
side technology.

Server-side Mechanisms

SAPUI5 provides a Resource Handler for


the Java server and the integration into the
Eclipse IDE, aligned with the concept of
the JavaServer Faces - Resource Handler,
also supporting standard and test-relevant
resources
Additional features:
Theme fallback
Resource Bundle fallback
SAPUI5 also provides a Resource Handler
for the ABAP server which is used for
SAPUI5 applications to serve the
resources from the UI libraries properly.

Both parts are not dependent on each other. Furthermore they are complementary.
2013 SAP AG. All rights reserved.

140

Modularization

Modularization using require


The UI5 framework has built in support for modularizing larger JavaScript
applications.
Instead of defining (and loading) one large chunk of JavaScript code, an application can be
split into smaller parts, which then can be loaded at runtime when they are needed. These
smaller, individual files are called Modules in UI5.
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 path.
So sap.ui.commons.MessageBox will become sap/ui/commons/MessageBox.js

This is an example:
<script>
jQuery.sap.require("sap.ui.commons.MessageBox");
function onPressButton() {
sap.ui.commons.MessageBox.alert("Hello World!");
}
</script>

2013 SAP AG. All rights reserved.

142

Modularization using declare


In order to create your own JavaScript Module you need to declare the
module
A file becomes a module by calling the jQuery.sap.declare function. This tells the UI5
runtime about the name of the module. UI5 runtime keeps track which modules are already
loaded.
If a module is required (jQuery.sap.require) and it hasnt been loaded before, it is
loaded automatically. While it is carried out, it calls the declare method, so from now on
UI5 knows that it has been loaded and when the next require comes about nothing
needs to be done anymore
The declare function checks if the parent namespace object exists and if not, creates it
// declaration of the module. Will ensure that the namespace 'my.useful' exists.
jQuery.sap.declare("my.useful.SampleModule");
// list of dependencies of this module
jQuery.sap.require("sap.ui.core.Core");
jQuery.sap.require("some.other.Module");
jQuery.sap.require("you.can.Also", "list.multiple.Modules", "if.you.Want");
// create the 'main' object of the module
my.useful.SampleModule = {};
2013 SAP AG. All rights reserved.

143

registerModulePath
UI5 by default will try to load any required modules from its resource root URL, namely
from the centrally deployed web application. This would fail for the modules
contained in your web application.
Mixed location scenarios are supported with jQuery.sap.registerModulePath

Example of using registerModulePath:

2013 SAP AG. All rights reserved.

144

Localization

Localization / Resource Bundle

Exercise 17

UI5 has a built-in localization concept, which is aligned to the ResourceBundle


concept in Java
You can get the URL for a resource with this:
var sUrl =
sap.ui.resource("sap.ui.table","messagebundle.properties");

Get the resource bundle for a given language (if no locale is given, English is loaded
by default)
jQuery.sap.require("jquery.sap.resources");
var oBundle = jQuery.sap.resources({url : sUrl, locale:
sLocale});

And then access the texts in the resource bundle


var sText = oBundle.getText(sKey);
2013 SAP AG. All rights reserved.

146

Localization with Resource Model

Exercise 18

With the ResourceModel, there is a wrapper for resource bundles that exposes the
localized texts as a model for data binding.
A ResourceModel can be instantiated with a bundleName or a bundleUrl which
points to a resource bundle. When using the bundle name the file must have the
.properties suffix.
Example:
var oModel = new sap.ui.model.resource.ResourceModel({
bundleUrl: "myBundle.properties", // will use myBundle_en.properties
bundleLocale: "en // optional, default is current language, so better
omit it

});
var oControl = new sap.ui.commons.Button({
id : "myButton",
text : "{i18n>MY_BUTTON_TEXT}
// this points to a named model
});
// attach the resource model with the symbolic name "i18n"

sap.ui.getCore().setModel(oModel, "i18n");
2013 SAP AG. All rights reserved.

149

Styling and Theming

UI5 Theming
Based on CSS and CSS Parameters
Generator merges files and appends specific themes to base theme

Replaces CSS Parameter usages


Automatic right-to-left generation (For RTL languages like Hebrew)
One CSS file per control library (library.css)
SAPUI5 uses LESS to handle the CSS parameters (it also allows calculations,
mixins,...)

UI5 Framework handles theme switching at runtime (see next slide)

UI5 offers two main options to adjust themes:


1. Adjusting CSS directly with standard tools
2. Changing parameters for the main features of a theme using the Theme
Designer
See general SAPUI5 Theming Concept
2013 SAP AG. All rights reserved.

153

Switching Themes
Themes can be applied via URL-parameters of via the bootstrap:

2013 SAP AG. All rights reserved.

OR

OR

154

The library.css files

2013 SAP AG. All rights reserved.

155

CSS 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 usually set in central files
With the LESS generator the parameter values are inserted and CSS only files are
generated

Example of a color parameter:


@sapUiTextColor: #000000; /* text color is set to 'black' once*/
button {
color: @sapUiTextColor; /* text color can be referenced multiple times*/
[...]
}
h2 {
color: @sapUiTextColor; /* text color can be referenced multiple times*/
[...]
}
2013 SAP AG. All rights reserved.

156

CSS Parameters II
Parameter values can be read at runtime with a JavaScript API

This allows transferring UI5 theme parameters to own HTML parts


Useful when one uses technology which cannot be influenced by CSS directly,
like Canvas or WebGL

jQuery.sap.require("sap.ui.core.theming.Parameters");
var myColor =
sap.ui.core.theming.Parameters.get("sapUiSemanticErrorColor");

2013 SAP AG. All rights reserved.

157

Adjusting Styles
In some cases one needs to adjust only small parts of the theme. There are
two options to style specific elements:
1. One can add <style> or <link> tags in the HTML <head> tag to include
new styles
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 always
overwrites the standard UI5 CSS
The parts to be overwritten can be determined using tools like Firebug in Firefox (or press F12 in all
other browsers)
It is also important to know that the id given to a control is also the id that the topmost HTML element
of this control gets. Thus, this id can be used as a reference in CSS
The CSS precedence rules may sometimes lead to the impression that UI5 CSS cannot be overridden.
It needs to be understood that the more specific selector wins.

2. Using the addStyleClass method that every UI5 control has


One can add a CSS class to the top level HTML element of the UI5 control

USE THESE METHODS WITH CAUTION MIGHT PRODUCE UNWANTED RESULTS WITH
FUTURE SAPUI5 THEME UPDATES!
2013 SAP AG. All rights reserved.

158

Adjusting Styles - Examples

Exercise 19

Example of custom
CSS via <style> tag

Example of
addStyleClass method

2013 SAP AG. All rights reserved.

159

The Theme Designer


Parameters can be easily modified using the UI5 Theme Designer

Easy CSS-free theming/branding as long as mainly colors need to be changed


Live preview in real applications
Other SAP UI technologies like Web Dynpro are also covered

2013 SAP AG. All rights reserved.

162

Supported Themes

Exercise 20

Themes currently shipped with UI5:

Blue Crystal (mobile and desktop) only with sap.m


Gold Reflection only with sap.ui.commons, sap.ui.ux3, sap.ui.table, sap.viz
Mobile Visual Identity (mobile devices only) only with sap.m
High Contrast Black only with sap.ui.commons, sap.ui.ux3, sap.ui.table, sap.viz
Blue Crystal

Gold Reflection

Demo-Link for Blue Cry


stal

Demo-Link for Gold Refl


ection

Use webkit browser


( switch to Light Shell
such as Google Chrome under: Home > Options
to view
> Design )
2013 SAP AG. All rights reserved.

Mobile Visual Identity

High Contrast Black

Demo-Link for Mobile Vis Demo-Link for High Cont


ual Identity
rast Black
Use webkit browser
such as Google Chrome
to view
163

SAPUI5 Mobile
The sap.m library, available since SAPUI5 version 1.8

SAPUI5 Mobile
UI5 is intended to also run on tablets like iPad, but for a perfect user experience on
mobile, controls must be tailored to screen size, touch interaction and UI paradigms
A dedicated UI5 control library called sap.m has been created
Contains 40 controls number is growing
Entirely optimized for smartphones and tablets
Native-like visuals and interaction on Apple iOS and Android with the MVI Theme
(but using the black-and-golden SAP color scheme)
Platform support:
iOS from build 5, Android from build 2.3, BlackBerry from build 10 (to be extended)
MVI Theme only runs in webkit browsers like Google Chrome
NEW: now also available for a unified design on desktops with touch screen
(Theme: Blue Crystal)

All core concepts of UI5 remain the same


Data Binding, MVC, Theming, localization, control development model,

2013 SAP AG. All rights reserved.

169

SAPUI5 Mobile Example Screens


iOS:

Android:

sap.m Explored app (use Chrome browser!)


2013 SAP AG. All rights reserved.

170

Typical SAPUI5 Mobile Usage


Typical Mobile application structure:
Pages between which the user can navigate
Navigation can imply drilldown semantics
sap.m.App control (and sap.m.NavContainer) provides this navigation logic
Typically used as root control
sap.m.Page controls are added and navigated between
Animation can be chosen (show, slide, fade, flip)
Custom animations can be provided
Also takes care of setting up the screen to feel native-like (no zooming,)
sap.m.Carousel control for swipe navigation between same-level pages
sap.m.List control with different ListItem types plays a central role for data display
sap.makit Chart library as mobile-optimized alternative to CVOM charts

2013 SAP AG. All rights reserved.

171

Device API
The sap.ui.Device is the Device and Feature Detection API of the SAP UI5
Library. Features that can be detected are:

sap.ui.Device.os (information about the operating system of the device)

sap.ui.Device.browser (information about the used browser)

sap.ui.Device.orientation (Orientation Change Event API portrait or landscape)

sap.ui.Device.media (Event API for Screen width media queries)

sap.ui.Device.support (information about detected capabilities of the used browser or


device)

Link to the Device Test Page with multiple detection features

2013 SAP AG. All rights reserved.

172

SAPUI5 Mobile Example Code

Exercise 21
MVI Theme :

Blue Crystal Theme :

http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/2378
2013 SAP AG. All rights reserved.

173

Best Practice for Mobile Applications


When creating reasonably complex applications a clean architecture is key for efficient
development and maintainability. Here is an example structure for a mobile application:
<webapp_root_folder>

application.js

<css folder> all CSS files go here (and potentially related images)
o style.css plus potentially more stylesheets

<ext folder> all reused third party java script goes here

<i18n folder> all property files for localization go here


o i18n.properties
o i18n_de.properties
o i18n_en.properties

<model folder>

<util folder> .. all helper classes go here

<view folder> .. all view and view controller files go here; all file names shall start with an upper case letter

<img folder> all image files go here (png, jpg, gif, )

<someNamespace> all on-the-fly controls defined within the application go here


o <controlName>.js

index.html
More information about best Practice for Building Mobile Apps
2013 SAP AG. All rights reserved.

176

Extending SAPUI5

Inclusion of external JS libraries


If UI5 doesnt provide controls or behaviours
that other JavaScript libraries offer, these
libraries can be included into the UI5 based
pages
Some JS libraries are already included in UI5 and
used by UI5 runtime and can be used without
additional loading, e.g.:
jQuery, jQuery UI
dataJS, a Microsoft driven OData library which
handles requests and takes care of creating and
handling requests in JSON and XML format
D3, an SVG-based graphical library to visualize
data sets

Other libraries need to be loaded separately,


another library of interest is
Flot, a <canvas>-based jQuery plug-in for displaying
data sets

2013 SAP AG. All rights reserved.

178

Inclusion of external JS libraries


To show how to load and use an
external library, we take a look at an
example using Flot
One can place the script tags for the
library just behind the UI5 bootstrap
script tag in the HTML <head> tag
the library can be downloaded and
made part of the application project
For pie chart support you need also the
flot.pie.js plugin

You can see the pie chart example here

2013 SAP AG. All rights reserved.

179

Exercise 22
Inclusion of external JS libraries

Most libraries require a starting


point or a placeholder

// create the HTML control which will be a


placeholder
var oHTML = new sap.ui.core.HTML({
id: "pieContainer,

This HTML element can be


provided by using the UI5 HTML
control

content: "<div id=pieContainer'


style=\"height:500px;width:
500px\"></div>"
});
//starts rendering when the placeholder is rendered

HTML controls content is only


rendered when the page is
loaded or after an event handler
is finished

oHTML.attachAfterRendering(
function(oEvent){
var data = []; //chart data array
$.plot($("#pieContainer"), data, // rendering pie
chart
{ series: {

The HTML control provides an


afterRendering event, which
indicates when the HTML control
is finished rendering

pie: {
show: true
}
}
}
});

2013 SAP AG. All rights reserved.

180

Components

Overview
UI5 components are independent and reusable parts of the UI5 Application
that may be developed by different development teams in different projects.
A UI5 component consists of a folder that has a name of the component and that
at least contains two files:

Component.js - the Component Controller that also includes the metadata for runtime
component.json - Component descriptor that contains the metadata for design time

There are two types of components:

a UIComponent has a UI part (examples: custom button or a form)


Base class for all UI Components: sap.ui.core.UIComponent
a Faceless Component does not (examples: data transfer helper)
Base class for all Faceless Components: sap.ui.core.Component

Components can either inherit from their base classes or from other component in
order to inherit and extend its functionality.

2013 SAP AG. All rights reserved.

185

Creating a new Component


Component.js
1. Define an new (UI)Component:
jQuery.sap.require("sap.ui.core.UIComponent");
jQuery.sap.require("sap.ui.commons.Button");
jQuery.sap.declare("samples.components.button.Component
");

2. Set the metadata (properties, aggregations, events of the new component)

sap.ui.core.UIComponent.extend("samples.components.button.Componen
t", { metadata : {
properties : {
text: "string"
}
}});

3. Set the methods the component should have

samples.components.button.Component.prototype.createContent = function()
{ this.oButton = new sap.ui.commons.Button("btn");
return this.oButton; };

2013 SAP AG. All rights reserved.

186

Creating a new Component


component.json
The component.json file is needed for design time environments so they know the
specifics of the component.
The file is not loaded during the runtime of an application and thus not needed
there.
{
"name": "samples.components.button",
"version": "0.1.0",
"description": "Sample button components",
"keywords": [
"button",
"example"
],
"dependencies": { }
}

2013 SAP AG. All rights reserved.

187

Using the new Component

Exercise 23

Once the Component is defined as above, it can be used right away, just like any
other UI5 Component.
var oComponent = sap.ui.getCore().createComponent({
name: "samples.components.button",
id: "Comp",
settings: {text: "Hello World"}
});
var oComponentCont = new
sap.ui.core.ComponentContainer("CompCont", {
component: oComponent
});
oCompCont.placeAt("content");

http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/69596
2013 SAP AG. All rights reserved.

188

CVOM Charts
Library re-built for UI5 version 1.8

Overview
The sap.viz.ui5 charting library provides a set of flexible chart controls that
allow to easily represent business data.

CVOM API Reference


2013 SAP AG. All rights reserved.

Demo

Snippix Example for line chart


192

CVOM Chart Types / Part 1


Line

Pie

Donut

Bar

sap.viz.ui5.Line

sap.viz.ui5.Pie

sap.viz.ui5.Donut

sap.viz.ui5.Bar

Column

Combination

Bubble

Scatter

sap.viz.ui5.Column

sap.viz.ui5.Combinatio
n

sap.viz.ui5.Bubble

sap.viz.ui5.Scatter

2013 SAP AG. All rights reserved.

193

CVOM Chart Types / Part 2

Exercise 24

Stacked Column

Stacked Column (%)

Dual Bar

Dual Line

sap.viz.ui5.
StackedColumn

sap.viz.ui5.
StackedColumn100

sap.viz.ui5.DualBar

sap.viz.ui5.DualLine

Dual Combination

Dual Column

Dual Stacked Column

Dual Stacked Column


(%)

sap.viz.ui5.
DualCombination

sap.viz.ui5.
DualColumn

sap.viz.ui5.
DualStackedColumn

sap.viz.ui5.
DualStackedColumn100

2013 SAP AG. All rights reserved.

194

Optimizing UI5 Files

Modularization in Development
Mode
If Modules are configured, our server side component instructs the browser to use a
ModifiedSince approach for detecting resource changes. This allows caching of the
content, but still requires the same number of requests as the uncached mode
Modularization and Caching together form our development mode: you can modify a
small file and ideally the browser has to reload only that module. We do not only
use this internally for development, but also for our central installations. So
whenever we update our central installation (usually several times a day), the
browser should detect changes and reload the files.

2013 SAP AG. All rights reserved.

198

Minimized JavaScript Files


Minimization means that unnecessary characters like whitespace, line breaks and
comments are removed from the source code. This considerably reduces the file
size.
During nightly build, we produce optimized versions of our libraries. These include
minimized versions of our JavaScript files, the CSS files are not minimized.
So instead of installing
sapui5.war, one can install sapui5-opt.war.
sapui5-light.zip, one can install sapui5-opt-light.zip
The opt version currently can be found in the Nexus repository only, it is not
deployed to our central VMWare machines.
opt additionally contains the non-minimized debug version of all files. In the CtrlAlt-Shift-P Dialog you can toggle the debug mode.

2013 SAP AG. All rights reserved.

199

Reducing the number of JavaScript


files
sap-ui-core.js

loads library.js file for each used library.

loads control behaviour and rendering files when


control 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, all code is parsed

In the opt mode, both advantages are


combined: one request per library, but
every module/control is only parsed
when required (with sap-ui-core.js)
2013 SAP AG. All rights reserved.

sap-ui-core.js: 99 requests, 1,06 MB, 831ms

sap-ui-core-all.js: 18 requests, 1,54 MB, 439ms


200

UI5 Download Configurator Tool


The download tool creates merged js
files with all desired modules.
You can mix such a merged file with the
dynamic on-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 all used modules)
Press CTRL-ALT-SHIFT-P
(UI5 Technical Info)
Expand the list of loaded modules, select
and copy it
Start the merge tool
Paste your module list into the empty white
text area on the right hand side
Download and Save the custom modules
Package the custom module into your
application and load it in your page instead
of the sap-ui-core.js

http://veui5infra.dhcp.wdf.sap.corp:8080/sapui5-internal/download/
2013 SAP AG. All rights reserved.

201

Configurable Caching
With some configuration either in the web.xml or the server configuration, our
resource handler can be configured to use a different caching strategy (e.g. time-tolife). This avoids the ModifiedSince requests.
The central UI5 installations are double-configuration installations. When accessed
via port 8080, they use the development mode, but when accessed via port 8090,
they use the caching-mode.
When one doesnt want to use the ModifiedSince requests, but still wants the
convenience of up-to-date checks, it is best practice to include some versionspecific into the requests URLs (cache buster). Our resource handler provides such
a unique id and also provides a way to automatically convert a static URL request
into a request with that ID.
Load resources/sap-ui-cachebuster/sap-ui-core.js instead of
resources/sap-ui-core.js to trigger this behavior.

2013 SAP AG. All rights reserved.

202

Thank you!

Andreas Kunz, TIP Core UI - andreas.kunz@sap.com


Jrg Meyer, AI Dev FIN jo.meyer@sap.com

2013 SAP AG. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG.
The information contained herein may be changed without prior notice.
Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.
National product specifications may vary.
These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or
warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group
products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing
herein should be construed as constituting an additional warranty.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in
Germany and other countries.
Please see http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark for additional trademark information and notices.

2013 SAP AG. All rights reserved.

204

Appendix A: Glossary
Term

Description

ABAP

Advanced Business Application Programming

AJAX

Asynchronous JavaScript and XML

BSP

Business Server Page

CDN

Content Delivery Network

CSS

Cascading Stylesheets

DOM

Document Object Model

EDM

Entity Data Model

EDMX

XML file that defines an Entity Data Model

HTML

Hypertext Markup Language

I18N

Internationalisation

JSON

JavaScript Object Notation

2013 SAP AG. All rights reserved.

205

Appendix A: Glossary
Term

Description

MVC

Model-View-Controller

NGAP

Next Generation ABAP Platform

OData

Open Data Protocol

RIA

Rich Internet Application

SDK

Software Development Kit

UI

User Interface

UX

User Experience

XHR

XML-Http-Request

XML

Extensible Markup Language

XSS

Cross-Site-Scripting

2013 SAP AG. All rights reserved.

206

You might also like