sapui5 oData例子程式碼兩則
阿新 • • 發佈:2018-12-30
用js的程式碼:
這裡寫
<!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="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table"
data-sap-ui-theme="sap_bluecrystal"></script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
//var uri = "proxy/http/services.odata.org/V3/Northwind/Northwind.svc";
var uri = "proxy/http/services.odata.org/V3/OData/OData.svc";
var oModel = new sap.ui.model.odata.ODataModel(uri);
/*
* 2017-01-06 11:18:50.350360 The following problem occurred: HTTP request failed400,Bad Request,
<?xml version="1.0" encoding="utf-8"?><m:error xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata">
<m:code /><m:message xml:lang="en-US">The MaxDataServiceVersion '2.0' is too low for the response. The lowest supported version is '3.0'.</m:message></m:error> -
*/
oModel.oHeaders = {
"DataServiceVersion": "3.0",
"MaxDataServiceVersion": "3.0"
};
var oTable = new sap.m.Table("idTable1", {
columns : [ new sap.m.Column({
header : new sap.m.Label({
text : "產品ID"
})
}), new sap.m.Column({
header : new sap.m.Label({
text : "價格"
})
}) ]
});
var oTemplate =
new sap.m.ColumnListItem({
cells : [
new sap.m.Text({
text : "{ID}"
}),
new sap.m.Text({
text : "{Name}"
})
]
});
oTable.bindItems("/Products", oTemplate);
oTable.setModel(oModel);
oTable.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
======================
用xml view的程式碼:
1) index.html
<!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="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"></script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("sapui5northwind");
var app = new sap.m.App({initialPage:"idview11"});
var page = sap.ui.view({id:"idview11", viewName:"sapui5northwind.view1", 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>
2)xml view程式碼
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="sapui5northwind.view1" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Title">
<content>
<Table id="_table1" visible="true" height="80px" inset="false">
</Table>
</content>
</Page>
</core:View>
3)js controller程式碼
sap.ui.controller("sapui5northwind.view1", {
/**
* 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 sapui5northwind.view1
*/
// 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 sapui5northwind.view1
*/
onBeforeRendering: function() {
//var uri = "proxy/http/services.odata.org/V3/Northwind/Northwind.svc";
var uri = "proxy/http/services.odata.org/V3/OData/OData.svc";
var oModel = new sap.ui.model.odata.ODataModel(uri);
/*
* 2017-01-06 11:18:50.350360 The following problem occurred: HTTP request failed400,Bad Request,
<?xml version="1.0" encoding="utf-8"?><m:error xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata">
<m:code /><m:message xml:lang="en-US">The MaxDataServiceVersion '2.0' is too low for the response. The lowest supported version is '3.0'.</m:message></m:error> -
*/
oModel.oHeaders = {
"DataServiceVersion": "3.0",
"MaxDataServiceVersion": "3.0"
};
this.getView().setModel(oModel);
var oTemplate =
new sap.m.ColumnListItem({
cells : [
new sap.m.Text({
text : "{ID}"
}),
new sap.m.Text({
text : "{Name}"
})
]
});
this.getView().byId("_table1").bindAggregation("items", {
path: "/Products",
template: oTemplate
});
},
/**
* 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 sapui5northwind.view1
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf sapui5northwind.view1
*/
// onExit: function() {
//
// }
});