Introduction Preview Architecture Resource Handling Libraries Components Versions Eclipse IDE & Overview Deployment on server

Contents

Introduction

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

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

Architecture of SAP UI5

Architecture

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.

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

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

Main UI Libraries

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

Versions of SAP UI5

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

Working in Eclipse IDE

• Install the SAPUI5 Application Development feature in your Eclipse installation.

• http://download.eclipse.org/releases/mars

Eclipse IDE

Procedure

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

Deploying UI5 application on server

!!! Thank You !!!