sapui5 oData例子代码两则

标签: javascript sapui5 odata
1270人阅读 评论(2) 收藏 举报
分类:

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

});
查看评论

sapui5 访问OData数据

开发环境:eclipse Luna, sapui5 toolkit eclipse plugin(从sap官网下载) 运行环境:eclipse + Tomcat OData环境:SAP在公网上提供...
  • berryreload
  • berryreload
  • 2016年08月04日 16:36
  • 2869

SAPUI5 (25) - 了解 OData 和 OpenUI5 的 OData Model

本篇介绍几个比较重要的概念,REST 和 OData,并介绍 OpenUI5 OData model的基本使用方法。...
  • stone0823
  • stone0823
  • 2017年03月10日 20:41
  • 1967

SAPUI5 (36) - OData Model 连接后端 SAP 系统 (下)

继续上一篇的内容,完成使用 OData Model 连接到后端 SAP 系统,实现 CRUD 操作。...
  • stone0823
  • stone0823
  • 2017年05月18日 10:46
  • 1514

SAPUI5 (26) - 基于 ODataModel 的增删改查

本篇介绍基于 OData v2,对 Northwind 进行 CRUD 操作。介绍的重点包括:1)http 请求;2)使用 Postman 发送 http 请求;3)使用 ODataModel (v2...
  • stone0823
  • stone0823
  • 2017年03月15日 22:21
  • 1944

SAPUI5 (24) - 增删改查之查询数据

CRUD是应用程序的核心。openui5是一个前端的UI库,CRUD是通过oData的服务来完成。openui5提交基于http协议的请求给服务器,其它交给服务器端处理。oData协议是微软公司发起,...
  • stone0823
  • stone0823
  • 2017年03月04日 11:35
  • 1207

SAPUI5教程——更改ODataModel默认的请求方式

前言对于ODataModel $batch的请求而言,会自动调用ODataModel UPdate的方法的 merge 请求,这也是默认的请求方式,但是我们的项目当中,往往需要put的请求,那么该如何...
  • jiangbo_phd
  • jiangbo_phd
  • 2017年07月15日 15:44
  • 525

SAPUI5 (27) - 基于 ODataModel 的筛选

本篇介绍基于 oDataModel 的筛选实现
  • stone0823
  • stone0823
  • 2017年03月21日 21:55
  • 976

SAPUI5 (30) - OData 中 Image 的显示和编辑 (上)

数据库中对图片的保存可以采取二进制格式,也就是我们平常所说的 blob 类型 ( Binary large object)。当图片使用 blob 类型来存储的时候,OpenUI5 如何处理据呢? 本...
  • stone0823
  • stone0823
  • 2017年04月15日 23:08
  • 865

SAPUI5 (34) - OData Model 连接后端 SAP 系统 (上)

准备分三个部分介绍如何连接到后端 SAP 系统,先说明 SAP 系统提供 OData 服务所需的配置。...
  • stone0823
  • stone0823
  • 2017年04月25日 22:45
  • 1669

SAPUI5 (35) - OData Model 连接后端 SAP 系统 (中)

完成上一篇的配置,现在我们可以在 SAP 系统中创建基于 SAP Netweaver Gateway 的 OData Service。本篇主要是介绍在 SAP 系统中创建 OData service ...
  • stone0823
  • stone0823
  • 2017年05月01日 18:15
  • 1854
    个人资料
    持之以恒
    等级:
    访问量: 270万+
    积分: 3万+
    排名: 152
    最新评论