SAPUI5 (SAP user interface for HTML 5) is a collection of libraries that developers can use to build desktop and mobile applications that run in a browser. With SAP's SAPUI5 JavaScript toolkit, developers can build SAP web applications using HTML5 web development standards. SAP Fiori, the company's line of web-based apps that have a device-agnostic user interface (UI ), have all been built using SAPUI5. There is also an open-source version of SAPUI5, called OpenUI5, which is available on Github.com.

2.  Introduction
 Preview
 Architecture
 Resource Handling
 Libraries
 Components
 Versions
 Eclipse IDE & Overview
 Deployment on server
Contents

3. Introduction

4. Introduction to SAP UI5
 SAP UI5 is a development toolkit for HTML5
(SAPUI5), which is a cross-browser JavaScript
library for building rich internet applications released
under Apache 2.0 license.
 Well-designed API, easy to consume and use
 powerful theme support based on CSS
 based on open standards like XML, CSS, HTML 5,
Java Scripts etc.
Introduction to SAP UI5

5.  You can use the UI development toolkit for
HTML5 (SAPUI5) to create apps with rich user
interfaces for modern Web business applications.
 Apps developed with SAPUI5 present one consistent
user experience. They are responsive across browsers
and devices - they run on smart phones, tablets, and
desktops. The UI controls automatically adapt
themselves to the capabilities of each device.
Preview

6. Architecture of SAP UI5

7. Architecture

8.  The Model View Controller (MVC) concept is used in SAPUI5 to separate the
representation of information from the user interaction. This separation facilitates
development and the changing of parts independently.
 The view is responsible for defining and rendering the UI.
 The model manages the application data.
 The controller reacts to view events and user interaction by modifying the view and
model.
 Data binding in the UI is to separate the definition of the user interface (view), the data
visualized by the application (model), and the code for the business logic for processing
the data (controller). The separation has the following advantages:
 It provides better readability, maintainability, and extensibility and it allows you to
change the view without touching the underlying business logic and to define several
views of the same data.
Contd.

9.  The handling of resources in SAPUI5 is divided in a client-
side and a server-side part. .
 The server-side resource handling, an optional
component to improve the client-server interaction.
 The Client-side Resource Handling, SAPUI5 provides the
following mechanism for handling resources on the
client.
 Modularization of JavaScript files
 Localization of application texts with resource bundles
Resource Handling

10. The base of SAPUI5 is a set of JavaScript and
CSS libraries.
In one application you can use different
libraries.
The respective resource handler automatically
handles the way they are embedded into your
application.
Libraries

11. Main UI Libraries

12.  SAPUI5 provides the following two types of components:
 Faceless components (class: sap.ui.core.Component)
 Faceless components do not have a user interface and are
used, for example, for a service that delivers data from a
back-end system.
 UI components (class: sap.ui.core.UIComponent)
 UI components extend components and add rendering
functionality to the component. They represent a screen
area or element on the user interface, for example, a
button or a shell, along with the respective settings and
metadata.
SAPUI5 components

13. Versions of SAP UI5

14.  As of SAPUI5 1.6 there is a close coupling of SAPUI5
core/runtime and SAPUI5 tools: It is required that within a
running system both have the same version, that is, have
the same major and minor version.
 The current version is 1.32.9 with different controls.
 SAPUI5 uses a 3-digit version identifier, for example 1.26.4.
These digits have the following meaning:
 The first digit (1) specifies the major version number.
 The second digit (26) specifies the minor version number.
 The third digit (4) specifies the patch version number.
Versions of SAPUI5

15. Working in Eclipse IDE

16. • Install the SAPUI5 Application Development
feature in your Eclipse installation.
• http://download.eclipse.org/releases/mars
Eclipse IDE

17. Procedure

21.  A new dynamic web project is created. All relevant files are
created in the WebContent folder.
 In WEB-INF folder a web.xml file is created which contains
settings for resource handling and the use of
SimpleProxyServlet.
 A prefilled index.html is created which contains
sap.ui.commons lib and sap_bluecrystal theme in the bootstrap
in case of a desktop target device and the sap.m lib and
sap_mvi theme in case of mobile target device.
 The installed SAPUI5 UI lib plug-ins are automatically added
to the Java build path and added to the deployment assembly.
Overview

24. Deploying UI5 application on server

30. !!! Thank You !!! 