Hi Guys,
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
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.
<script id="sap-ui-bootstrap"
type="text/javascript"
src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_goldreflection"
data-sap-ui-libs="sap.ui.commons"></script>
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
UI5 Core
jQuery
jQuery UI
data.js
Some Useful Core functions :
sap.ui.getCore()
sap.ui.getCore().byId(id)
sap.ui.getCore().applyChanges()
jQuery.sap.domById(id)
jQuery.sap.byId(id)
UI5 control libraries
sap.ui.commons
sap.ui.ux3
Ÿe.g.: ShellExAct and Thing Inspector
sap.ui.table
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
user's interaction:
• 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 .
Data Binding
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.
Binding Modes:
• 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.
JSON model
XML model
OData model
Steps to data binding:
• Create a model instance.
• Create a control instance.
• Bind properties or lists of the control to your model.
eg:
Creating a Data Binding Model Instance
// create JSON model instance
var oModel = new sap.ui.model.json.JSONModel();
// set the data for the model
oModel.setData(data);
// set the model to the core
sap.ui.getCore().setModel(oModel);
OR
Assigning the Model to the UI
Procedure
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.
sap.ui.getCore().setModel(oModel);
• 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
any control:
• var oTable = sap.ui.getCore().byId("table");
oTable.setModel(oModel);
for further detail follow link SAPUI5 SDK - Demo Kit
for real time example follow link sapui5 beta - databinding .
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
11 | |
10 | |
7 | |
6 | |
4 | |
4 | |
3 | |
3 | |
3 | |
3 |