1. 程式人生 > >sapui5 oData例子程式碼兩則

sapui5 oData例子程式碼兩則

用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() {
//
//  }

});