This blog is extension of my previous blog End to End scenario of SAPUI5 .
In this blog we’ll go through Concepts of SAPUI5.
Core concept behind SAPUI5 are
- UI5 architecture overview
- Model View Controller (MVC)
- Data Binding
Let’s go one by one…
UI5 architecture overview
when we create an SAPUI5 app we need to provide runtime environment to our app which we do by including bootstrap with a
<script> tag in index page.
Which initiate the core.
UI5 pages always have to start with the bootstrap, to initializes the UI5 runtime.
Attributes of the script tag are evaluated and used to configure the runtime
- Ÿdata-sap-ui-libs: the controls libraries to be used, comma-separated
- Ÿdata-sap-ui-theme: the theme
- ŸThere are more attributes: data-sap-ui-language, data-sap-ui–rtl etc.
- ŸInstead of putting the attributes in the script tag, they can also be added as URL parameters.
- UI5 Core includes base, core and model modules
- Dependency / Class-Loader to load control libraries
- Render manager creates HTML strings for the instantiated controls
Some Useful Core functions :
- Ÿget a core instance
- Ÿgets an instance of a UI5 control which was created with id id
- Ÿcan be used to retrieve removed controls (even though the id doesn’t exist in the DOM anymore)
- Ÿcarries out and renders the changes for UI5 controls directly, so before the runtime would do it
- Ÿgets any HTML element with id id
- ŸIf there is also a UI5 control with id id, the element returned is the topmost HTML element of this UI5 control
- ŸThe topmost HTML element of a UI5 control always has the id defined for the UI5 control
- Ÿreturns the jQuery object of the DOM element with the specified id
- Ÿsimilar to document.getElementByIdthe name of id
UI5 control libraries
- ŸIncludes “bread and butter” controls like TextField, TextView, Button, Link etc.
- ŸIncludes UX3 patterns, mainly available in “Gold Reflection” design
Ÿe.g.: ShellExAct and Thing Inspector
- ŸIncludes DataTable
Note: To know about more Controls provided in SAPUI5 visit link SAPUI5 SDK – Demo Kit
Model View Controller (MVC)
In the Model View Controller concept, the representation of information is separated from the
• The view is responsible for defining and rendering the UI.(SAPUI5 SDK – Demo Kit )
• The model manages the application data. ( SAPUI5 SDK – Demo Kit )
• The controller reacts to view events and user interaction by modifying the view and model.
MVC provide 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.
Views and controllers often form a 1:1 relationship, but it is also possible to have controllers without a UI, these controllers are called application controllers.
For further detail please refer SAPUI5 SDK – Demo Kit .
In UI5, data binding is used to bind UI5 controls to a data source that holds the application data, so that the controls are updated automatically whenever the application data is changed.
The model instance holds the data and provides methods to set the data or to retrieve data from a server. It also provides a method for creating bindings to the data. When this method is called, a data binding instance is created, which contains the binding information and provides an event, which is fired whenever the bound data is changed.
• One Way: One-way binding means a binding from the model to the view; value changes in the model update all corresponding bindings and the view
• Two Way: Two-way binding means a binding from the model to the view and from the view to the model; value changes in the model and in the view update all corresponding bindings and the view and model, respectively
• One Time: One-time binding means from model to view once.
SAPUI5 data binding supports three different model implementations.
- Ÿsupports two way binding
- supports XML data
- supports two way binding
- supports OData compliant data
- creates OData requests and handles OData responses
- includes the open source library dataJS to handle OData requests and data
Steps to data binding:
• Create a model instance.
• Create a control instance.
• Bind properties or lists of the control to your model.
Creating a Data Binding Model Instance
// create JSON model instance
var oModel = new sap.ui.model.json.JSONModel();
// set the data for the model
// set the model to the core
Assigning the Model to the UI
Choose one of the following options:
• You can define a global model that can be accessed by all controls from all UI areas by
using the setModel method on the SAPUI5 core object. This is useful for simple form
applications or demo applications.
• You can also define a specific model for sections within a UI area, for example, inside a
panel or for a table control. In this case, you can use the setModel method available on
• var oTable = sap.ui.getCore().byId(“table”);
for further detail follow link SAPUI5 SDK – Demo Kit
for real time example follow link sapui5 beta – databinding .