SAP UI5 – GETTING STARTED
WITH SAPUI5
Applies to:
SAP UI5
Summary
The objective of this document is to give brief introduction about SAP UI5
Author : Sachin Thadani
Company : SAP
Created on : 22 Nov 2014
Author Bio
Sachin Thadani is a Consultant working for SAP GD
SAP COMMUNITY NETWORK scn.sap.com
© 2012 SAP AG 1
SAP UI5 – GETTING STARTED WITH SAPUI5
Table of Contents
Introduction ......................................................................................................................................................... 3
Versions of SAPUI5 ............................................................................................................................................ 3
Installation Procedure ......................................................................................................................................... 3
UI5 Main Offerings .............................................................................................................................................. 4
UI5 Architecture Overview: Core Libraries ......................................................................................................... 5
UI5 Architecture Overview: Control Libraries ..................................................................................................... 6
UI5 Architecture Overview: UI5 and jQuery........................................................................................................ 7
Basic Usage of SAPUI5 ...................................................................................................................................... 7
Model View Controller ( MVC ) Concept: ............................................................................................................ 8
UI5 Data Binding ................................................................................................................................................. 9
The Data Binding Type System .......................................................................................................................... 9
UI5 Theming ....................................................................................................................................................... 9
Useful Links ...................................................................................................................................................... 10
Copyright........................................................................................................................................................... 10
SAP COMMUNITY NETWORK scn.sap.com
© 2012 SAP AG 2
SAP UI5 – GETTING STARTED WITH SAPUI5
Introduction
The UI Development Toolkit for HTML5 (SAPUI5 or UI5) is an extensible JavaScript-based HTML5
control rendering library for Business Applications that run in browsers
UI5 comes with
Runtime
Interactive documentation
Eclipse based Tooling
Versions of SAPUI5
SAPUI5 is available with the platform license on a number of SAP platforms
NetWeaver ABAP
7.00, 7.01, 7.02, 7.31: Part of User Interface Add-On 1.0 for SAP NetWeaver
7.40 Built in part of the platform
NetWeaver Java
Part 7.30 SP09 and later: Included in Usage Type Basic or as software component SAPUI5
Client RT AS Java 7.31
Part 7.31 SP05 and later: included iín Usage Type Basic or as software component
SAP HANA Cloud
SAPUI5 runtime
SAPUI5 Eclipse tools part of SAP HANA cloud tools
SAP HANA Extended Application Services (XS Engine)
SPS 05 and later
Installation Procedure
If it is not already installed, install the latest Java Development Kit 6.
Download and install the UI Development Toolkit for HTML5 Developer Center
SAP COMMUNITY NETWORK scn.sap.com
© 2012 SAP AG 3
SAP UI5 – GETTING STARTED WITH SAPUI5
UI5 Main Offerings
Runtime (Browser Based)
Theming part controlled by CSS files.
Control libraries Implemented in JavaScript, CSS with related image files
Core Framework Implemented in JavaScript
Test suite Implemented in HTML and extended with JavaScript
functionality
Design Time Tools (optional)
Can use notepad if you wish, but Eclipse has tools and libraries available to work and test UI5 applications
Built in Resource Handler depending upon what application server you are using. Additional component to
install Theming Generator (Theme Designer)
Eclipse
– Application development tools
– Control development tools
Resource handler in Java and ABAP
Theming generator
SAP COMMUNITY NETWORK scn.sap.com
© 2012 SAP AG 4
SAP UI5 – GETTING STARTED WITH SAPUI5
UI5 Architecture Overview: Core Libraries
UI5 Core includes base, core and model modules
Dependency / Class-Loader to load control libraries
Render manager creates HTML strings for the instantiated controls
The UI5 Core is shipped with various 3rd party JavaScript libraries included:
jQuery
jQuery UI
data.js
D3
SAP COMMUNITY NETWORK scn.sap.com
© 2012 SAP AG 5
SAP UI5 – GETTING STARTED WITH SAPUI5
UI5 Architecture Overview: Control Libraries
sap.ui.commons
Includes “bread and butter" controls like TextField, TextView, Button
sap.ui.table
Includes DataTable control
sap.ui.ux3
Includes UX3 patterns, mainly available in “Gold Reflection” design
e.g.: Shell, ExAct and Thing Inspector
SAP COMMUNITY NETWORK scn.sap.com
© 2012 SAP AG 6
SAP UI5 – GETTING STARTED WITH SAPUI5
UI5 Architecture Overview: UI5 and jQuery
jQuery acts as the foundation of UI5
jQuery is currently the most popular JavaScript library on the Web.
It’s an open source library designed to help Web developers perform common tasks in JavaScript such as:
Browser detection and abstraction
Reading and manipulating the DOM
Creating UI elements that the HTML standard doesn't provide
(e.g. a date picker)
Theming and animating UIs
Handling AJAX requests and parsing XML or JSON data
Basic Usage of SAPUI5
UI5 pages always have to start with the bootstrap, to load the UI5 runtime.
<script id="sap-ui-bootstrap"
src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_goldreflection"
data-sap-ui-libs="sap.ui.commons,sap.ui.ux3">
</script>
Attributes of the script tag are evaluated and used to configure the runtime
data-sap-ui-libs: comma-separated list of required controls libraries
data-sap-ui-theme: the name of the theme to use, defines the CSS styles applied
to the controls
data-sap-ui-language: the ISO name of the language to display
There are more attributes: data-sap-ui-debug, data-sap-ui-rtl, …
Instead of putting the attributes in the script tag, many can also be added as URL
parameters
SAP COMMUNITY NETWORK scn.sap.com
© 2012 SAP AG 7
SAP UI5 – GETTING STARTED WITH SAPUI5
Model View Controller ( MVC ) Concept:
Model-View-Controller
The Model-View-Controller (MVC) design pattern was invented in 1978 by the Norwegian software designer
Trygve Reenskaug (pronounced “TRIG-vuh RAINS-cow”) whilst working at Xerox PARC.
The first implementation of this design paradigm was with the release of the Smalltalk-80 programming
language.
MVC was a revolutionary design pattern because it was the first to describe software components in terms
of:
The functional responsibilities each should fulfil.
The message protocols to which each component should respond.
UI5 provides an implementation of the MVC pattern.
Since MVC is just a design pattern and not a specification, no two implementations of MVC are exactly the
same.
UI5 provides an implementation of the MVC design pattern
Model: Data binding can be used on the views
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 (experimental) sap.ui.core.mvc.HTMLView
Controller
• bound to a view or standalone
• can also be used by multiple views
Controller always in a namespace “sap.hcm.Address”
Event onInit, counter increments each time button is hit.
Bind the biew to the controller using controller=“sap.hcm.Address”
View last line binds the view to the controller and location of the placeAt.
SAP COMMUNITY NETWORK scn.sap.com
© 2012 SAP AG 8
SAP UI5 – GETTING STARTED WITH SAPUI5
UI5 Data Binding
In UI5, the term “data binding” describes a process by which a property in a data source (such as a
model) is bound to a property in a UI5 control.
There are two implementations of data-binding:
One-way data binding (default)
Any changes to the property value in the data source are automatically visible in the UI control
Two-way data binding
Any changes to the property value in the data source are automatically visible in the UI control, and any
changes to the value in the UI control are updated in the data source.
The Data Binding Type System
When binding UI Control properties to model properties, you can specify the data type of the model
properties.
Bound model properties with a defined type are automatically formatted when displayed in the UI.
Conversely, when input values are received in UI controls bound to such model properties, the values are
parsed and converted back to the defined type in the model.
For each model data 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
UI5 Theming
Based on Cascading Style Sheets (CSS) and CSS Parameters
UI5 supports the creation and usage of different visual designs - called Themes -
that can be used alternatively and switched on the fly, thus allowing for the same
application to have a very different look
On top of pure CSS, UI5 offers a variety of optional features that add value
regarding modularization, modification, compatibility and performance:
The SAPUI5 framework supports the following themes:
Gold Reflection
Blue Crystal
High Contrast Black
For the UI5 Mobile controls for touch devices the following theme is provided:
SAP Mobile Visual Identity (this one visually matches the "Gold Reflection"
theme provided for desktop controls)
SAP COMMUNITY NETWORK scn.sap.com
© 2012 SAP AG 9
SAP UI5 – GETTING STARTED WITH SAPUI5
Useful Links
Interactive documentation of UI5 : https://sapui5.netweaver.ondemand.com/sdk/
SAPUI5 runtime under https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js
SAPUI5 Eclipse tools part of SAP HANA cloud tools under
https://tools.hana.ondemand.com/
SAP COMMUNITY NETWORK scn.sap.com
© 2012 SAP AG 10
www.sap.com
© 2014 SAP SE. All rights reserved.
SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP
BusinessObjects Explorer, StreamWork, SAP HANA, and other SAP
products and services mentioned herein as well as their respective
logos are trademarks or registered trademarks of SAP SE in Germany
and other countries.
Business Objects and the Business Objects logo, BusinessObjects,
Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and
other Business Objects products and services mentioned herein as
well as their respective logos are trademarks or registered trademarks
of Business Objects Software Ltd. Business Objects is an SAP
company.
Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL
Anywhere, and other Sybase products and services mentioned herein
as well as their respective logos are trademarks or registered
trademarks of Sybase Inc. Sybase is an SAP company.
Crossgate, m@gic EDDY, B2B 360°, and B2B 360° Services are
registered trademarks of Crossgate AG in Germany and other
countries. Crossgate is an SAP company.
All other product and service names mentioned are the trademarks of
their respective companies. Data contained in this document serves
informational purposes only. National product specifications may vary.
These materials are subject to change without notice. These materials
are provided by SAP SE 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.
