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

主页 » SAP文库 » Fiori

作者 stone0823 2018-03-20    724

CRUD是应用程序的核心。openui5是一个前端的UI库,CRUD是通过oData的服务来完成。openui5提交基于http协议的请求给服务器,其它交给服务器端处理。oData协议是微软公司发起,比web service更轻量级的通讯协议。SAP的Neweaver Gateway 就是SAP以OData形式暴露后端业务数据的一个组件。SAPUI5提供的方便的数据绑定功能,将前端展示组件绑定到后端暴露的OData服务上。

使用mock server实现数据查询

目前,我们先使用mock server来模拟服务器端的功能。本次将之前的master-detail程序修改为使用GET请求获取数据并展示。在前一篇起始框架代码的基础上,做如下变更:

  1. 创建master view和master controller

  2. 创建detail view和detail controller

  3. 修改manifest.json, 将空字符串的target设为master

项目文件结构:

创建master view和master controller

Master.view.xml:



    masterViewTitle}">
        
            

                
                    
                        
                        
                    
                

                
                    
                        tableIDColumnTitle}" id="IDColumnTitle"/>
                                         
                        tableNameColumnTitle}" id="nameColumnTitle"/>
                                     
                                                                                                                                                                                                             
       1234567891011121314151617181920212223242526272829303132333435363738394041424344454647

重点说明:

  • 因为Component.js文件中:

var oAppModel = new sap.ui.model.json.JSONModel("/Suppliers");1

直接将路径设为/Suppliers,所以上面代码中,master viewsap.m.Tableitems属性设置为{/},是相对于/Suppliers的。这将导致后面我们在表达model中数据的路径时,和之前不同。

Master.controller.js:

sap.ui.define([        "sap/ui/core/mvc/Controller",        "sap/ui/core/UIComponent"
    ],      

    function(Controller, UIComponent){       "use strict";        return Controller.extend("stonewang.sapui5.demo.controller.Master", {

            onItemPress: function(oEvent){
                var oRouter = UIComponent.getRouterFor(this);                var oItem = oEvent.getSource();                var sPath = oItem.getBindingContext().getPath();
                oRouter.navTo("detail", {
                     supplierPath: encodeURIComponent(sPath)
                }, true);
             }
         });

    }
);1234567891011121314151617181920212223

和之前的代码相比,没有变化。

创建detail view和detail controller

Detail.view.xml:



    

        
            
                
            
        

    12345678910111213141516171819

Detail.controller.js:

sap.ui.define([        "sap/ui/core/mvc/Controller",        "sap/ui/core/UIComponent",        "sap/ui/core/routing/History"
    ],      

    function(Controller, UIComponent, History){       "use strict";        return Controller.extend("stonewang.sapui5.demo.controller.Detail", {            // add functions here
            onInit: function(){
                var oRouter = UIComponent.getRouterFor(this);
                oRouter.getRoute("detail")
                    .attachPatternMatched(this._onObjectMatched, this); 
            },

            onNavPress: function() {
                var oHistory = History.getInstance();                var sPreviousHash = oHistory.getPreviousHash();                if (sPreviousHash != undefined){
                    window.history.go(-1);
                }else{                    var oRouter = UIComponent.getRouterFor(this);
                    oRouter.navTo("master",{}, true);
                }
            },

            _onObjectMatched: function (oEvent) {           
                var sPath = oEvent.getParameter("arguments").supplierPath;
                console.log(decodeURIComponent(sPath));                this.getView().bindElement({path: decodeURIComponent(sPath)});
            }
         });    
    }
);1234567891011121314151617181920212223242526272829303132333435363738

修改manifest.json, 将空字符串的target设为master

修改target,并增加master和detail所映射的view:

"sap.ui5": {        ...

            "routes": [
                {                    "pattern": "",                    "name": "master",                    "target": "master"
                },
                {                    "pattern": "detail/{supplierPath}",                    "name": "detail",                    "target": "detail"
                }
            ],            "targets": {                "master": {                    "viewName": "Master",                    "viewLevel": 1
                },                "detail": {                    "viewName": "Detail",                    "viewLevel": 2
                },                "notFound": {                    "viewName": "NotFound",                    "viewId": "notFound"
                }
            }
        }12345678910111213141516171819202122232425262728293031

使用view model

现在我们要在detail view中增加两个按钮,用于直接在页面中导航到上一条和下一条数据。界面如下:

同时,这两个按钮根据当前所在行,enabled属性动态变化,比如当处在第一行,向上就为灰色。view model适合这种动态设定UI元素的状态。方法:

1) 实例化view model

Detail.controller.js文件的onInit事件处理器中实例化view model:

// 创建一个model view, 包含两个button是否enabled的布尔值var oViewModel = new sap.ui.model.json.JSONModel({
    canGoPrev: false,
    canGoNext: false});this.getView().setModel(oViewModel, "viewModel");1234567

2) Detail view中增加按钮

Detail.view.xml文件中增加两个按钮,设置enabled属性:


    
        
        
        
          1234567891011

3) 在detail controller中增加更新状态的代码

Detail.controller.js文件中的_onObjectMatched函数中,定义sObjectID:

this.sObjectID = sPath.substr(sPath.lastIndexOf("/")+1);1

因为router的导航是基于路径的,这种方法可以获取最后一个/之后的数字,可以用于知道当前数据所在位置。 
比如当处于第一条数据,sObjectID=0,当处于第二条数据,sObjectID=1。

然后再添加一个方法_updateViewModel

_updateViewModel: function(oEvent){
    var oModel = this.getView().getModel();    var that = this;    var oViewModel = that.getView().getModel("viewModel");  

    var nextObjId = parseInt(that.sObjectID) + 1;    var prevObjId = parseInt(that.sObjectID) - 1;                   

    var bNextEnable = !!oModel.getProperty("/" + nextObjId);    var bPrevEnable = !!oModel.getProperty("/" + prevObjId);

    oViewModel.setProperty("/canGoNext", bNextEnable);
    oViewModel.setProperty("/canGoPrev", bPrevEnable);
    }
 });123456789101112131415

代码说明:

  • sObjectId转换成number,加1,使用oModel.getProperty("/" + nextObjId)看看是否存在下一条记录。如果不存在,则表达式为undefinedvar bNextEnable = !!oModel.getProperty("/" + nextObjId);将表达式转换成与之对应的boolean类型。比如表达式为undefined,则!exp为true,!!exp为false

  • 根据这两个值,利用JSONModel.setProperty设置view model的canGoNextcanGoPrev

  • _updateViewModel函数完成,在_onObjectMatched添加调用的语句,_onObjectMatched函数的完整代码如下:

_onObjectMatched: function (oEvent) {       
    // 数据绑定
    var sPath 
        = decodeURIComponent(oEvent.getParameter("arguments").supplierPath);    this.getView().bindElement({path: sPath});              

    this.sObjectID = sPath.substr(sPath.lastIndexOf("/")+1);    this._updateViewModel();
}123456789

4) 添加onPageUp和onPageDown处理代码

onPageUp: function(oEvent){             
    var sId = parseInt(this.sObjectID);
    sId = sId - 1;    var oRouter = UIComponent.getRouterFor(this);    var sNewRoute = encodeURIComponent("/"+sId);
    oRouter.navTo("detail", {supplierPath: sNewRoute});
},

onPageDown: function(oEvent){
    var sId = parseInt(this.sObjectID);
    sId = sId + 1;    var oRouter = UIComponent.getRouterFor(this);               
    var sNewRoute = encodeURIComponent("/"+sId);
    oRouter.navTo("detail", {supplierPath: sNewRoute});
},1234567891011121314151617

切换到其它数据,也是利用routernavTo方法。

源码:

24_zui5_crud_retrieve_v1

24_zui5_crud_retrieve_v2

本文原始地址:http://sapdoc.cn/sap/theme/318.html

转载请注明出处来自 SAP文库

上一篇

AA固定资产|概述

下一篇

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