In this article we will learn
- Basic of MVC architecture
- Data Binding concept in SAPUI5
- How Model works in SAPUI5?
- Basic example of using Model to bind data
Note: If you are new to SAPUI5, we recommend you to read below articles first.
A Quick Glance to Model View Controller (MVC) Architecture in SAPUI5
SAPUI5 supports the Model View Controller (MVC) architecture. The MVC concept is used to
separate the representation of information from
the user interaction.
View: View is the place where we define UI. For example, in view we decide how a Button should look like.
Controller: Controller is the place where we write all logics. For example, in controller we decide what happens when a Button is clicked. Controller reacts to view events and user interaction by modifying the view and model.
Model Model manages the application data.
Model is a class which is responsible to
- Hold/Supply data to the application
- Has methods by which we can play around or perform operations on that data.
In SAPUI5 Model is implemented using one of the 4 classes
- JSON Model
- XML Model
- Resource Model
- OData Model
Note: To know more about MVC architecture, please refer to the article
Introduction to SAPUI5 and MVC Architecture
What is Data Binding in SAPUI5?
Data binding is a programming approach in which properties of model are associated with the properties of UI elements. Data binding concept is used to update the UI elements automatically when application data changes.
There are 3 types of Data Binding mode
Note: Default binding mode is "Two Way." Two-way binding means
binding from the model to the view and from the view to the model in both direction.
For example, let us assume that application data is hold by Model. And Model is bound to an SAPUI5 Text field. In case of Two Way Data Binding, change in Model will change Text Field value. Also change in Text Field will change Model data.
Note: To know more about One Way, Two Way and One Time Binding Mode, refer to the article
Different Modes of Data Binding in SAPUI5 - One Way, Two Way and One Time
Let us understand Default (Two Way) Data Binding and Model with an example
Step 1: Open SAP Web IDE to create the SAPUI5 project.
If you do not have access to SAP Web IDE or do not know how to work on Web IDE, please refer to the article
SAPUI5 Hello World using Web IDE.
Step 2: Right click on "Workspace" and create a new folder called "DataBindingDemo".
Step 3: Right click on the folder "DataBindingDemo" and select "New" --> "SAPUI5 View".
Step 4: Enter the View name as "App" and Namespace as "databindingdemo". Then click on "Finish".
Step 5: Open App.view.xml file and paste below code.
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
controllerName="databindingdemo.controller.App">
<Panel headerText="Data Binding Demo">
<Label text="Input Field with Two Way Data Binding" class="sapUiSmallMargin"/>
<Input value="{/Name}" valueLiveUpdate="true" width="200px" />
</Panel>
<Panel >
<Text text="Hello {/Name}" class="sapUiSmallMargin"/>
</Panel>
</mvc:View>
We have added an sap.m.Input control to the view. We are binding its value to a SAPUI5 model by
using curly brackets {..}.
The curly brackets {/Name} indicate that data is taken from the value of the "Name" property.
<Input value="{/Name}" valueLiveUpdate="true" width="200px">
Note that if the value is hardcoded, we specify that within double quote (no curly brackets). For example header text of panel is hard coded.
<panel headertext="Data Binding Demo">
We have also added a Text control. The Text value is bound to Name" property of Model prefixed by a String "Hello".
<text text="Hello {/Name}" class="sapUiSmallMargin" />
Step 6: Open App.controller.js file and paste below code.
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("databindingdemo.controller.App", {
onInit: function() {
//JSON Sample Data
var jsonData = {
};
// Create a JSON model from an object literal
var oModel = new sap.ui.model.json.JSONModel(jsonData);
this.getView().setModel(oModel);
}
});
});
Important points to be noted in the code:
We added onInit() function to the controller. onInit is one of SAPUI5's lifecycle methods that is invoked by the framework when the controller is created.
Inside the function we instantiate a JSON model.
var oModel = new sap.ui.model.json.JSONModel(jsonData);
The data for the model only contains a single property for the "Name".
var jsonData = {
Name: "Harry Potter"
};
To be able to use this model from within the XML view, we call the setModel function on the view and pass on our newly created model. The model is now set on the view.
this.getView().setModel(oModel);
Step 7: Again right click on the folder "DataBindingDemo" and select "New" --> "File".
Step 8: Enter File Name as "index.html" and click on "Finish"
Step 9: Open index.html file and paste below code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>SAPUI5 Data Binding Tutorial</title>
<script
id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{ "databindingdemo": "./" }'
>
</script>
<script>
sap.ui.getCore().attachInit(function () {
new sap.ui.core.mvc.XMLView({ viewName : "databindingdemo.view.App" })
.placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
Step 10: Run the SAPUI5 application. You will see a screen like below.
The Input field and the Text field are bound to Model. By default, its "Two Way" binding. This means:
- If Input field changes, model will be changed automatically
- If model is changed, Input field and Text field will be changed automatically
Where can I get the source code?
You can download the source code from
here.
Click here to check the online version of this project. Note that this link may not work in IE browser.
What's Next
So far, we learnt what is Data Binding and how default (Two-Way) Data Binding works. Read next article to understand how One Way, Two Way, One Time and Default Data Binding works.
Different Modes of Data Binding in SAPUI5 - One Way, Two Way and One Time
Apps
