Scribd
Upload
248 views

Sap Ui5

SAPUI5 is a JavaScript-based UI development framework for building responsive applications. It uses an MVC architecture with models, views, and controllers. Views define the UI using XML, JSON, JavaScript or HTML. Controllers handle events and application logic. Models manage application data. SAPUI5 supports common browsers and platforms and includes UI controls, themes, and libraries for building apps that integrate with SAP and non-SAP backends.

Uploaded by

skmittal75
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
248 views

Sap Ui5

SAPUI5 is a JavaScript-based UI development framework for building responsive applications. It uses an MVC architecture with models, views, and controllers. Views define the UI using XML, JSON, JavaScript or HTML. Controllers handle events and application logic. Models manage application data. SAPUI5 supports common browsers and platforms and includes UI controls, themes, and libraries for building apps that integrate with SAP and non-SAP backends.

Uploaded by

skmittal75
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
Gateway

 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

Controller1 Controller2

Functions Functions

You might also like