<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  	<script id="sap-ui-bootstrap"
  		src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
  		data-sap-ui-theme="sap_bluecrystal"
  		data-sap-ui-libs="sap.m,sap.ui.layout"
  		data-sap-ui-xx-bindingSyntax="complex">
	  </script>
	  
	  <script id="view-main" type="ui5/xmlview">
	    <mvc:View
	      displayBlock="true"
	      controllerName="controller.main"
	      xmlns:mvc="sap.ui.core.mvc"
	      xmlns:f="sap.ui.layout.form"
	      xmlns="sap.m">
        <f:SimpleForm id="form"
          editable="true">
          <f:content>
            <Label
              text="Name"
              labelFor="Name" />
            <Input id="Name"
              value="DJ" />
          </f:content>
        </f:SimpleForm>
        <Switch
          state="true"
          change="onSwitch" />
      </mvc:View>
	  </script>
	  
	  <script>
	    sap.ui.controller("controller.main", {
	      onSwitch : function(oEvent) {
	        var oForm = this.getView().byId("form");
	        oForm.setEditable(!oForm.getEditable());
	      }
	    });
	    sap.ui.xmlview("main", {
	      viewContent : jQuery("#view-main").html()
	    }).placeAt("content");
	  </script>

  </head>

  <body id="content" class="sapUiBody"></body>

</html>
/* Styles go here */