SAPUI5/OpenUI5 MVC XML View example with data from JSON file

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />

  <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m" data-sap-ui-resourceroots='{"view": "./"}' data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex">
  </script>
  <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

  <!-- based on example by Denise Nepraunig @denisenepraunig -->
  
  <!-- example for a SAPUI5 MVC XML view with JSON data from a file
       and data binding based on the demokit example from sapui5:
       https://sapui5.netweaver.ondemand.com/sdk/explored.html#/entity/sap.m.Table/samples
       -->

  <script>
    // Best practice would be to set this stuff up in an Component.js
    // but let's not over-complicate stuff for demonstration purposes
    
     // http://scn.sap.com/community/developer-center/front-end/blog/2014/12/10/sap-ui5-with-local-json-model
    var oModel = new sap.ui.model.json.JSONModel({MyDate1: null, MyDate2: { __edmType: 'Edm.Time', ms: 0 }});
     // Load JSON in model
    sap.ui.getCore().setModel(oModel);
    
    oModel.setProperty('/MyDate1', null);

    sap.ui.localResources("view");
    var app = new sap.m.App({
      initialPage: "idMain"
    });
    var page = sap.ui.view({
      id: "idMain",
      viewName: "view.Main",
      type: sap.ui.core.mvc.ViewType.XML
    });
    app.addPage(page);
    app.placeAt("content");
  </script>

</head>

<body class="sapUiBody" role="application">
  <div id="content"></div>
</body>

</html>

# SAPUI5 MVC example with JSON file databinding

This is a simple MVC example where we load JSON data from an external file
and then bind this data against a table.

This example is based on:
[SAPUI5 Demokit Tables](https://sapui5.netweaver.ondemand.com/sdk/explored.html#/entity/sap.m.Table/sample)

<sap.ui.core.mvc:View controllerName="view.Main"
    xmlns="sap.m"
    xmlns:sap.ui.core.mvc="sap.ui.core.mvc"
    xmlns:f="sap.ui.layout.form"
    xmlns:core="sap.ui.core"
    >
    <Page title="This is a SAPUI5 MVC example">
        <content>
          <f:SimpleForm
              editable="true"
              layout="ResponsiveGridLayout"
              title="CRUD 1"
              labelSpanL="4"
              labelSpanM="12"
              emptySpanL="0"
              emptySpanM="0"
              columnsL="2"
              columnsM="2">
            <f:content>
              <core:Title text="A form with TimePickers"/>
              <Label text="Time picker 1, with a null value"/>
              <TimePicker
                displayFormat="HH:mm"
                value="{path: '/MyDate1',
                        type: 'sap.ui.model.odata.type.Time'
              }"/>
              <Label text="Date picker 2, non-null"/>
              <TimePicker
                displayFormat="HH:mm"
                dateValue="{
                  path: '/MyDate2',
                        type: 'sap.ui.model.odata.type.Time'
                      }"/>
              <Button text="Clear out date 1" press="onButtonPress"/>
              <Button text="Set language to Russian" press="onLanguageChooserPress"/>
            </f:content>
          </f:SimpleForm>
        </content>
    </Page>
</sap.ui.core.mvc:View>

sap.ui.controller("view.Main", {

// We don't need any controller code in our simple example
// but I left the code here for MVC-demonstration purposes

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf view.Main
*/
// onInit: function () {
//   
//  },

/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf view.Main
*/
//	onBeforeRendering: function() {
//    
//	},

/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf view.Main
*/
//	onAfterRendering: function() {
//
//	},

/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf view.Main
*/
//	onExit: function() {
//
//	}

  onButtonPress: function(oEvent) {
    var oModel = sap.ui.getCore().getModel();
    var value = oModel.getProperty('/MyDate1');
    if (value) alert(JSON.stringify(value, null, 4));
    oModel.setProperty('/MyDate1', null);
  },
  
  onLanguageChooserPress: function(oEvent) {
    sap.ui.getCore().getConfiguration().setLanguage('ru');
    alert("set to Russian!")
  }

});