Professional Documents
Culture Documents
June 2013
TIP CORE UI
Agenda
SAPUI5 Overview
Resource Handling
Programming Applications
Modularization
Localization
SAPUI5 Mobile
Databinding
Extending SAPUI5
Databinding OData
Components
Notepad Controls
CVOM Charts
Resource Repositories
Optimizing SAPUI5
SAPUI5 Overview
SAPUI5
The short name
UI5
Internal name
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.
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.
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.
Application
CLIENT
Application
SERVER
sap.ui.ux3
Includes UX3 patterns, mainly available in
Gold Reflection design, e.g.: Shell
sap.ui.table
sap.m
10
This way UI5 development groups should not become a bottleneck for application
groups in need of a certain functionality.
11
UI5 Wiki
SAPUI5 Community
CSN Component:
Demokit
API Documentation
General UI5 Documentation
SNIPPIX
12
13
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
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
17
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
18
Exercise 2
http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/11571
2013 SAP AG. All rights reserved.
21
Exercise 3
sap.ui.getCore()
jQuery.sap.domById(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
24
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:
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/.
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
30
32
Click "Next".
33
Click "Next".
34
Click "Next".
35
36
37
38
39
40
41
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
42
Exercise 4
Exercise 5
43
MVC
Controller
bound to a view or standalone
can also be used by multiple views
49
Exercise 6
address.controller.js
address.view.xml
50
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:
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
54
Example JS View
55
56
57
Exercise 7
58
JS View
XML View
JSON View
HTML View
Yes
Yes
Yes
Yes
Yes
No
No
No
Yes
Yes
Yes
Yes
Yes
No
No
No
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
No
No
No
Yes
Yes
Yes
Yes
Yes
No
No
No
No
Yes
No
No
Yes
No
No
No
Yes
Yes, with
limitations
No
No
Templating (Eclipse)
Yes
No
No
No
Validation
No
Yes
No
No
64
Databinding
John Doe
John Doe, 35
Age: 35
application data
has been updated
John Doe
Age: 36
John Doe
John Doe, 35
Age: 35
Resulting
UI5 Control / Output
John Doe, 36
Resulting
application data
John Doe
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
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
67
XML-Model:
OData-Model:
68
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");
(alternatively) by path:
var oControl = new sap.ui.commons.TextView({
controlProperty: { path: modelProperty }
});
2013 SAP AG. All rights reserved.
70
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.
74
http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/60875
2013 SAP AG. All rights reserved.
75
79
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.
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.
84
Exercise 11
85
Custom Types
88
Exercise 12
When using aggregation binding, you can provide initial sorting and filtering.
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
92
93
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:
97
Example of Master-Detail
http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/30500
2013 SAP AG. All rights reserved.
98
http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/30500
2013 SAP AG. All rights reserved.
99
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:
101
Exercise 14
102
Databinding - OData
Resource path
Query options
109
$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
Parameter Description
Example
$orderby
/Products?$orderby=Rating,desc
$top
/Products?$top=5
$skip
/Products?$skip=2
$filter
/Suppliers?$filter=Address/City
eq 'Redmond'
$expand
$format
/Products?$format=json
$select
/Products?$select=Price,Name
111
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" }
});
oTable.bindRows({
path: "/Products",
parameters:
{ select: "Name,Category" }
});
112
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"
117
sap.ui.core.Control.extend(sName, oDefinition);
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.
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
properties: {
title: "string",
btnTxt: { defaultValue:
"Search"},
showLogoutButton: {
type: "boolean",
defaultValue: true
},
width: {
type: "sap.ui.core.CSSSize",
defaultValue: "50px"
}
}
121
Control Metadata
Events
Aggregations
aggregations: {
acceptButton:
"sap.ui.commons.Button",
worksetItems: {
type:
"sap.ui.ux3.NavigationItem",
multiple: true,
singularName : "worksetItem"
}
}
events: {
logout: {},
close: {
enablePreventDefault : true
}
}
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:
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.
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
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:
"sap.ui.commons.ButtonRenderer"
126
http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/64805
2013 SAP AG. All rights reserved.
127
http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/42676
2013 SAP AG. All rights reserved.
128
Exercise 16
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)
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
135
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
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).
137
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
Server-side Mechanisms
Both parts are not dependent on each other. Furthermore they are complementary.
2013 SAP AG. All rights reserved.
140
Modularization
This is an example:
<script>
jQuery.sap.require("sap.ui.commons.MessageBox");
function onPressButton() {
sap.ui.commons.MessageBox.alert("Hello World!");
}
</script>
142
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
144
Localization
Exercise 17
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});
146
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
UI5 Theming
Based on CSS and CSS Parameters
Generator merges files and appends specific themes to base theme
153
Switching Themes
Themes can be applied via URL-parameters of via the bootstrap:
OR
OR
154
155
CSS Parameters
156
CSS Parameters II
Parameter values can be read at runtime with a JavaScript API
jQuery.sap.require("sap.ui.core.theming.Parameters");
var myColor =
sap.ui.core.theming.Parameters.get("sapUiSemanticErrorColor");
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.
USE THESE METHODS WITH CAUTION MIGHT PRODUCE UNWANTED RESULTS WITH
FUTURE SAPUI5 THEME UPDATES!
2013 SAP AG. All rights reserved.
158
Exercise 19
Example of custom
CSS via <style> tag
Example of
addStyleClass method
159
162
Supported Themes
Exercise 20
Gold Reflection
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)
169
Android:
170
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:
172
Exercise 21
MVI Theme :
http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/2378
2013 SAP AG. All rights reserved.
173
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
<model folder>
<view folder> .. all view and view controller files go here; all file names shall start with an upper case letter
index.html
More information about best Practice for Building Mobile Apps
2013 SAP AG. All rights reserved.
176
Extending SAPUI5
178
179
Exercise 22
Inclusion of external JS libraries
oHTML.attachAfterRendering(
function(oEvent){
var data = []; //chart data array
$.plot($("#pieContainer"), data, // rendering pie
chart
{ series: {
pie: {
show: true
}
}
}
});
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
Components can either inherit from their base classes or from other component in
order to inherit and extend its functionality.
185
sap.ui.core.UIComponent.extend("samples.components.button.Componen
t", { metadata : {
properties : {
text: "string"
}
}});
samples.components.button.Component.prototype.createContent = function()
{ this.oButton = new sap.ui.commons.Button("btn");
return this.oButton; };
186
187
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.
Demo
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
193
Exercise 24
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
sap.viz.ui5.
DualCombination
sap.viz.ui5.
DualColumn
sap.viz.ui5.
DualStackedColumn
sap.viz.ui5.
DualStackedColumn100
194
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.
198
199
many requests
sap-ui-core-all.js
less requests
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.
202
Thank you!
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.
204
Appendix A: Glossary
Term
Description
ABAP
AJAX
BSP
CDN
CSS
Cascading Stylesheets
DOM
EDM
EDMX
HTML
I18N
Internationalisation
JSON
205
Appendix A: Glossary
Term
Description
MVC
Model-View-Controller
NGAP
OData
RIA
SDK
UI
User Interface
UX
User Experience
XHR
XML-Http-Request
XML
XSS
Cross-Site-Scripting
206