<!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>
<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>
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 = {
								Name: "Harry Potter"
								};
				// Create a JSON model from an object literal
				var oModel = new sap.ui.model.json.JSONModel(jsonData);
				this.getView().setModel(oModel);
			}

	});

});