Step 1: No Data Binding

In this step, we simply place some text on the screen using a standard sap.m.Text control. The text in this control is a hard-coded part of the control's definition; therefore, this is not an example of data binding!

Preview

Screen with text

Coding

You can view and download all files in the Explored app in the Demo Kit at Data Binding - Step 1.

webapp/index.html (New)

#!html<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta charset="utf-8">
	<title>Data Binding Tutorial</title>
	<script
		id="sap-ui-bootstrap"
		src="../resources/sap-ui-core.js"
		data-sap-ui-theme="sap_bluecrystal"
		data-sap-ui-libs="sap.m"
		data-sap-ui-compatVersion="edge"
		data-sap-ui-preload="async"
		>
	</script>
	<script>
		// Attach an anonymous function to the 'init' event
		sap.ui.getCore().attachInit(function () {
			// Create a text UI element that displays a hardcoded text string
			new sap.m.Text({text: "Hi, my name is Harry Hawk"}).
				placeAt("content");
		});
	</script>
  <body class="sapUiBody" id="content">
  </body>
</html>

Create a new folder webapp which will contain all sources of the app we will create throughout this tutorial, and create the index.html file within this folder

Since the value of text property of the sap.m.Text control has been hard-coded, it is unrelated to any data that might exist within a model object. Therefore, data binding is not being used here.