Scribd
Upload
2K views13 pages

Sap Ui5

SAPUI5 is a JavaScript library for building Rich Internet Applications. It uses the MVC pattern with models, views, and controllers. SAPUI5 supports various view types including XML, JSON, and HTML. It is compatible with standard web technologies like HTML5, CSS3, and jQuery. SAPUI5 applications can communicate with backend systems like SAP using protocols such as OData and RFC. The library also provides mobile-ready controls and supports multiple browsers and platforms.

Uploaded by

SomnathChoudhury
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2K views13 pages

Sap Ui5

SAPUI5 is a JavaScript library for building Rich Internet Applications. It uses the MVC pattern with models, views, and controllers. SAPUI5 supports various view types including XML, JSON, and HTML. It is compatible with standard web technologies like HTML5, CSS3, and jQuery. SAPUI5 applications can communicate with backend systems like SAP using protocols such as OData and RFC. The library also provides mobile-ready controls and supports multiple browsers and platforms.

Uploaded by

SomnathChoudhury
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

SAP UI5

Introduction
What is SAPUI5?
The SAPUI5 runtime is a client-side HTML5 rendering
library with a rich set of standard and extension controls. It
provides a lightweight programming model for desktop as
well as mobile applications. Based on JavaScript, it supports
RIA like client-side features. SAPUI5 complies with
OpenAjax and can be used together with standard JavaScript
libraries.
It supports CSS3, which allows you to adapt themes to your
company's branding in an effective manner.
It is based on an extensibility concept regarding custom
controls.
It uses the open source jQuery library as a foundation
Model View Controller (MVC)
Models

JSON model-Client Side model


XML model-Client Side model
Resource model-Client Side model
OData model-Server Side model

Xml : <name>jigar</name>
Json : “name” : “Sam”
Views

SAPUI5 provides the following predefined view types


XML view. The user interface is defined in an XML file or
string.
Note The XML View type supports a mix of XML and
plain HTML.
JSON view. The user interface is defined in a file or string
in JSON format.
JS view. The user interface is constructed in a traditional
manner.
HTML view. The user interface is defined in an HTML file
or string.
Controllers

Lifecycle Hooks
SAPUI5 provides predefined lifecycle hooks for
implementation. You can add event handlers or other
functions to the controller and the controller can fire
events, for which other controllers or entities can register.
SAPUI5 provides the following lifecycle hooks:
onInit()
onExit()
onAfterRendering()
onBeforeRendering()
Browser and Platform Matrixes

Provides information about browsers and platforms


that suit best to your use case
SAPUI5 is based on CSS3, HTML5, and the new
JavaScript API. Therefore, only browsers with
HTML5 capabilities are supported.
Depending on the platform your SAPUI5 applications
runs on, different browsers in different versions are
supported. If you know the platform and the browser
used by your users, you can decide on the libraries you
use for your application.
Sap.m
Browser support for
sap.m library on iOS,
Android, BlackBerry,
MacOS, and Windows
platforms
The following tables
give an overview of the
platforms supported by
the sap.m library using
SAP Blue Crystal theme.
Sap.ui.commons
Sap.m(2)
Sap.m(3)
Gateway to BE : RFC
FE to Gateway : oDATA

FE BE
Gatewa
y

FE : SAPUI5 UI
BE:Gateway, SAP or NON SAP
<body>
<page>
 <header>
 </header>
 <content></content>
</page>
<body>

“page” : “loginPage”
Index.html
Head
Body
<div id=“Content”></div>
Var app = new sap.m.app();

Page1 Page2

View1 View2

Controls
Controls

Controller Controller

Functions Functions

You might also like