<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>SAPUI5 v1.30 MVC Greenfield</title>
<script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_bluecrystal' data-sap-ui-libs='sap.m' data-sap-ui-compatVersion='edge' data-sap-ui-bindingSyntax='complex' data-sap-ui-preload='async'
data-sap-ui-resourceroots='{
"sap.anz.mvc": "./"
}'>
/*
for debugging mode, add sap-ui-debug=true to the URL
*/
</script>
<script>
sap.ui.getCore().attachInit(function() {
new sap.ui.core.ComponentContainer({
name: "sap.anz.mvc",
height: "100%"
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
return Controller.extend("sap.anz.mvc.controller.App", {
onInit: function() { }
// add app controller methods here
});
});
<mvc:View
controllerName="sap.anz.mvc.controller.App"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true">
<!-- use App for proper headers and navigation -->
<App id="app"/>
</mvc:View>
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel",
"sap/ui/model/odata/v2/ODataModel"
], function(UIComponent, JSONModel, ODataModel) {
"use strict";
return UIComponent.extend("sap.anz.mvc.Component", {
metadata: {
// instantiates the resource model thanks to the app descriptor
manifest: "json",
// activate automatic message generation
handleValidation : true
},
init: function() {
// call the init function of the parent
UIComponent.prototype.init.apply(this, arguments);
// set local data model (schedule.json)
var oConfig = this.getMetadata().getConfig();
var sNamespace = this.getMetadata().getManifestEntry("sap.app").id;
// mapping to the property "modelLocal" in the "config" property of the app descriptor
var oLocalModel = new JSONModel(jQuery.sap.getModulePath(sNamespace, oConfig.modelLocal));
this.setModel(oLocalModel);
// sample for remote JSON model definition
//var oConfig = this.getMetadata().getConfig();
//var oJSONModel = new ODataModel(oConfig./* destination in config prop of app descriptor */);
//this.setModel(oJSONModel, "JSON");
// create the views based on the url/hash
this.getRouter().initialize();
}
});
});
{
"_version": "1.0.0",
"sap.app": {
"_version": "1.0.0",
"id": "sap.anz.mvc",
"type": "application",
"i18n": "i18n/i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"applicationVersion": {
"version": "1.0.0"
},
"ach": "CA-UI5-DOC"
},
"sap.ui": {
"_version": "1.0.0",
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_bluecrystal"
]
},
"sap.ui5": {
"_version": "1.0.0",
"rootView": "sap.anz.mvc.view.App",
"dependencies": {
"minUI5Version": "1.30",
"libs": {
"sap.m": {}
}
},
"config": {
"modelLocal": "/model/schedule.json"
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "sap.anz.mvc.i18n.i18n"
}
}
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "sap.anz.mvc",
"controlId": "app",
"controlAggregation": "pages",
"bypassed": {
"target": "notFound"
}
},
"routes": [{
"pattern": "",
"name": "overview",
"target": "overview"
}],
"targets": {
"overview": {
"viewName": "view/Overview",
"viewLevel" : 1
},
"notFound": {
"viewName": "NotFound",
"transition": "show"
}
}
},
"resources": {
"css": [{
"uri": "css/style.css"
}]
}
}
}
# App Descriptor
appTitle=Hello World SAP ANZ
appDescription=A simple MVC-based SAPUI5 Greenfield app
# Overview View
homePageTitle=Message Manager Demo
# NotFound view
NotFound=Not Found
NotFound.text=Sorry, but the requested resource is not available.
NotFound.description=Please check the URL and try again.
/* add styles here */
<mvc:View
controllerName="sap.anz.mvc.controller.Overview"
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc">
<Page title="{i18n>homePageTitle}">
<content>
<l:VerticalLayout
class="sapUiContentPadding"
width="100%">
<l:content>
<Label text="Enter Name" />
<Input
type="Text"
placeholder="Enter Name ..."
valueStateText="Name must not be empty. Maximum 10 characters."
value="{
path : '/name',
type : 'sap.ui.model.type.String',
constraints : {
minLength: 1,
maxLength: 10
}
}" />
<Label text="Select Time" />
<TimePicker
value="{ path: '/time', type: 'sap.ui.model.type.Time'}" />
<Label text="Enter AUD" />
<Input
value="{ path: '/value', type: 'sap.ui.model.type.Currency'}"
class="sapUiSmallMarginBottom" />
</l:content>
</l:VerticalLayout>
</content>
<footer>
<Toolbar>
<Button icon="sap-icon://alert" type="Emphasized"
press="openMsgList"/>
<ToolbarSpacer/>
</Toolbar>
</footer>
</Page>
</mvc:View>
sap.ui.define([
'sap/m/MessagePopover',
'sap/m/MessagePopoverItem',
'sap/ui/core/mvc/Controller',
], function(MessagePopover, MessagePopoverItem, Controller) {
"use strict";
var oMessagePopover = new MessagePopover({
items: {
path: "message>/",
template: new sap.m.MessagePopoverItem({
description: "{message>description}",
type: "{message>type}",
title: "{message>message}"
})
}
});
oMessagePopover.setModel(sap.ui.getCore().getMessageManager().getMessageModel(), "message");
return Controller.extend("sap.anz.mvc.controller.Overview", {
onInit: function() {},
openMsgList: function(oEvent) {
oMessagePopover.openBy(oEvent.getSource());
}
});
});
<mvc:View
controllerName="sap.anz.mvc.controller.NotFound"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<MessagePage
title="{i18n>NotFound}"
text="{i18n>NotFound.text}"
description="{i18n>NotFound.description}"/>
</mvc:View>
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("sap.anz.mvc.controller.NotFound", {
onInit: function () {
}
});
});
{
"value": "10.00",
"time": "09:09:09 PM",
"name": "Alexander"
}