Added everything for Step 4: Two-Way Data Binding

webapp/controller/Home.controller.js

@@ -8,11 +8,15 @@ sap.ui.define(
 
     return BaseController.extend("com.mrb.UI5-Data-Binding.controller.Home", {
       onInit: function () {
+        // Create a JSON model from an object literal
         var oModel = new JSONModel({
-          greetingText: "Hi, my name is Marco",
+          firstName: "Harry",
+          lastName: "Hawk",
+          enabled: true,
+          panelHeaderText: "Data Binding Basics",
         });
 
-        //Set model globally for all views/controls (dirty) "sap.ui.getCore().setModel(oModel);""        
+        //Set model globally for all views/controls (dirty) "sap.ui.getCore().setModel(oModel);""
         //the go-to way for global definition would be to define the model within the manifest.json-file
         //and retrieve it via "this.getOwnerComponent().getModel();"
         this.getView().setModel(oModel);

webapp/view/Home.view.xml

@@ -1,10 +1,15 @@
- <mvc:View controllerName="com.mrb.UI5-Data-Binding.controller.Home"
-  displayBlock="true"
-  xmlns="sap.m"
+<mvc:View controllerName="com.mrb.UI5-Data-Binding.controller.Home" displayBlock="true" 
+  xmlns="sap.m" 
   xmlns:mvc="sap.ui.core.mvc">
-      <Page titleAlignment="Center" title="{i18n>title}">
-        <content>
-          <Text text="{/greetingText}" ></Text>
-        </content>
-      </Page>
+  <Page titleAlignment="Center" title="{i18n>title}">
+    <Panel headerText="{/panelHeaderText}" class="sapUiResponsiveMargin" width="auto">
+      <content>
+        <Label text="First Name" class="sapUiSmallMargin" />
+        <Input value="{/firstName}" valueLiveUpdate="true" width="200px" enabled="{/enabled}" />
+        <Label text="Last Name" class="sapUiSmallMargin" />
+        <Input value="{/lastName}" valueLiveUpdate="true" width="200px" enabled="{/enabled}" />
+        <CheckBox selected="{/enabled}" text="Enabled" />
+      </content>
+    </Panel>
+  </Page>
 </mvc:View>