<!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://sapui5.netweaver.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 -->

  <!-- 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
    
    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)
<mvc:View
  height="100%"
  controllerName="view.Main"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m">
  <Page
    title="Page"
    class="marginBoxContent" >
    <customHeader>
      <Toolbar>
        <Button type="Back" press="onPress" />
        <ToolbarSpacer/>
        <Label text="Title" />
        <ToolbarSpacer/>
        <Button icon="sap-icon://edit" press="onPress" />
      </Toolbar>
    </customHeader>
    <subHeader>
      <Toolbar>
        <ToolbarSpacer/>
        <Button text="Default" press="onPress" />
        <Button type="Reject" text="Reject" press="onPress" />
        <Button icon="sap-icon://action" press="onPress" />
        <ToolbarSpacer/>
      </Toolbar>
    </subHeader>
    <content>
      <HBox>
        <Button text="Default" press="onPress" >
          <layoutData>
            <FlexItemData growFactor="1" />
          </layoutData>
        </Button>
        <Button type="Accept" text="Accept" press="onPress" >
          <layoutData>
            <FlexItemData growFactor="1" />
          </layoutData>
        </Button>
        <Button type="Reject" text="Reject" press="onPress" >
          <layoutData>
            <FlexItemData growFactor="1" />
          </layoutData>
        </Button>
      </HBox>
    </content>
    <footer>
      <Toolbar>
        <ToolbarSpacer/>
        <Button type="Emphasized" text="Emphasized" press="onPress" />
        <Button text="Default" press="onPress" />
        <Button icon="sap-icon://action" press="onPress" />
      </Toolbar>
    </footer>
  </Page>
</mvc:View>
sap.ui.controller("view.Main", {

  onPress: function (evt) {
    jQuery.sap.require("sap.m.MessageToast");
    sap.m.MessageToast.show(evt.getSource().getId() + " Pressed");
  }
});