SapHanaTutorial.Com HOME     Learning-Materials Interview-Q&A Certifications Quiz Online-Courses Forum Jobs Trendz FAQs  
     Explore The World of Hana With Us     
About Us
Contact Us
 Apps
X
HANA App
>>>
Hadoop App
>>>
Tutorial App on SAP HANA
This app is an All-In-One package to provide everything to HANA Lovers.

It contains
1. Courses on SAP HANA - Basics, Modeling and Administration
2. Multiple Quizzes on Overview, Modelling, Architeture, and Administration
3. Most popular articles on SAP HANA
4. Series of Interview questions to brushup your HANA skills
Tutorial App on Hadoop
This app is an All-In-One package to provide everything to Hadoop Lovers.

It contains
1. Courses on Hadoop - Basics and Advanced
2. Multiple Quizzes on Basics, MapReduce and HDFS
3. Most popular articles on Hadoop
4. Series of Interview questions to brushup your skills
Apps
HANA App
Hadoop App
';
Search
Stay Connected
Search Topics
Topic Index
+
-
SAPUI5 Overview
+
-
SAP Fiori Overview
+
-
SAP Web IDE
+
-
SAPUI5 Basic Concepts
+
-
Data Binding and Model

Introduction to Model and Data Binding in SAPUI5

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.

Introduction to Model and Data Binding in SAPUI5

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.

Introduction to Model and Data Binding in SAPUI5

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
  • One Way
  • Two Way
  • One Time

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.

Introduction to Model and Data Binding in SAPUI5

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.

Introduction to Model and Data Binding in SAPUI5

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.

Introduction to Model and Data Binding in SAPUI5

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

Introduction to Model and Data Binding in SAPUI5

Step 3: Right click on the folder "DataBindingDemo" and select "New" --> "SAPUI5 View".

Introduction to Model and Data Binding in SAPUI5

Step 4: Enter the View name as "App" and Namespace as "databindingdemo". Then click on "Finish".

Introduction to Model and Data Binding in SAPUI5

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>

Important points to be noted in the code:
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".

Introduction to Model and Data Binding in SAPUI5

Step 8: Enter File Name as "index.html" and click on "Finish"

Introduction to Model and Data Binding in SAPUI5

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.

Introduction to Model and Data Binding in SAPUI5

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

Introduction to Model and Data Binding in SAPUI5

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



Support us by sharing this article.



Explore More
Close X
Close X

Leave a Reply

Your email address will not be published. Required fields are marked *

Current day month ye@r *

 © 2017 : saphanatutorial.com, All rights reserved.  Privacy Policy