End to End scenario of SAPUI5

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

• 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.

<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

• Ÿdata-sap-ui-libs:the controls libraries to be used, comma-separated
• Ÿdata-sap-ui-theme:the theme
• ŸThere are moreattributes: 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

• UI5 Core includes base, core and model modules
• Dependency / Class-Loader to load control libraries
• Render manager creates HTML strings for the instantiated controls
• The UI5 Core includes other JavaScript libraries

          jQuery

          jQuery UI

         data.js

Some Useful Core functions :

sap.ui.getCore()

• Ÿget a core instance

sap.ui.getCore().byId(id)

• Ÿ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)

sap.ui.getCore().applyChanges()

• Ÿcarries out and renders the changes for UI5 controls directly, so before the runtime would do it

jQuery.sap.domById(id)

• Ÿ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

jQuery.sap.byId(id)

• Ÿreturns the jQuery object of the DOM element with the specified id
• Ÿsimilar to document.getElementByIdthe name of id

UI5 control libraries

sap.ui.commons

• ŸIncludes “bread and butter" controls like TextField, TextView, Button, Link etc.

sap.ui.ux3

• ŸIncludes UX3 patterns, mainly available in “Gold Reflection” design

         Ÿe.g.: ShellExActand Thing Inspector

sap.ui.table

• Ÿ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

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

• Ÿsupports data in a JavaScript Object Notation format
• Ÿsupports two way binding

XML model

• supports XML data
• supports two way binding

OData model

• supports ODatacompliant 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.

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 .