<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8" />
<script type="text/javascript"
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"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{ "ui" : "./ui" }'
data-sap-ui-rootcomponent="ui"
data-sap-ui-xx-rootcomponentnode="root">
</script>
</head>
<body class="sapUiBody" id="root" role="application"></body>
</html>
jQuery.sap.declare("ui.Component");
sap.ui.core.UIComponent.extend("ui.Component", {
metadata : {
rootView : "ui.App",
name : "XMLModel test",
version : "1.0",
includes : [
],
dependencies : {
libs : ["sap.m"]
}
}
});
<mvc:View controllerName="ui.App" displayBlock="true"
xmlns="sap.m"
xmlns:data="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
xmlns:mvc="sap.ui.core.mvc">
<App>
<Page
id="page"
title="XML model"
class="sapUiContentPadding">
<Table id="jsonTable">
<headerToolbar>
<Toolbar>
<Text text="JSON table" />
</Toolbar>
</headerToolbar>
<columns>
<Column>
<Text text="text 1" />
</Column>
<Column>
<Text text="text 2" />
</Column>
</columns>
</Table>
<Table id="xmlTable">
<headerToolbar>
<Toolbar>
<Text text="XML table" />
</Toolbar>
</headerToolbar>
<columns>
<Column>
<Text text="text 1" />
</Column>
<Column>
<Text text="text 2" />
</Column>
</columns>
</Table>
<Button text="Check"
press="onPress">
</Button>
</Page>
</App>
</mvc:View>
sap.ui.define([
'jquery.sap.global', 'sap/ui/core/mvc/Controller', 'sap/ui/model/json/JSONModel', 'sap/ui/model/xml/XMLModel', 'sap/m/MessageToast'
], function (jQuery, Controller, JSONModel, XMLModel, MessageToast) {
'use strict';
sap.ui.controller("ui.App", {
onInit: function (evt) {
this.oJsonModel = new JSONModel();
this.oJsonModel.setJSON('\
{\
"items": [\
{ "text1": "text 1.1", "text2": "text 1.2" }, \
{ "text2": "text 2.2" } \
]\
}\
');
this.oXmlModel = new XMLModel();
this.oXmlModel.setXML('\
<data>\
<items>\
<item><text1>text 1.1</text1><text2>text 1.2</text2></item>\
<item><text2>text 2.2</text2></item>\
</items>\
</data>\
');
// --------------------------------------------------------
var result0 = this.oJsonModel.getProperty("/items");
var result1 = this.oXmlModel.getProperty("/items");
var result2 = this.oXmlModel.getProperty("/items/item");
console.log(result0);
console.log(result1);
console.log(result2);
// --------------------------------------------------------
this.oJsonTable = this.getView().byId("jsonTable");
this.oXmlTable = this.getView().byId("xmlTable");
this.oJsonTable.setModel(this.oJsonModel);
this.oXmlTable.setModel(this.oXmlModel);
var oTemplate = new sap.m.ColumnListItem({
cells: [
new sap.m.Input({
value: "{text1}"
}), new sap.m.Input({
value: "{text2}"
})
]
});
this.oJsonTable.bindItems({
path: "/items",
template: oTemplate,
key: "@id"
});
this.oXmlTable.bindItems({
path: "/items/item",
template: oTemplate,
key: "@id"
});
},
onPress: function (evt) {
console.log(this.oJsonModel.getJSON());
console.log(this.oXmlModel.getXML());
}
});
});