Sapui5_Project_BP

从项目的角度整体的整理一下，将一些认为比较好的点收集一下，以后在开发的时候可以快速借鉴，提高效率

文件结构

一般一个项目会做很多页面，这些页面中会有很多共用的元素，比如共用的view，fragment，CSS，一些共用的处理函数等都可以做成共用的。

上图中的ZSHBZCOMMON就是一个共用的工程，里面有一个common文件夹，里面有共用的view,fragment,controller和css，下面分别用几个例子来依次举例不同的共用元素。
一般可以把共用的内容单独放在一个view里，通过部署后的服务路径来进行引用，就像下面的 "/sap/bc/ui5_ui5/sap/zshbzcommon/common"，但是这样写的话在开发过程中是不方便调试的(服务器上的代码不方便随意加端点)，所以可以把共用内容先down到本地工程中，做为本工程的文件进行引用，部署后只要注册一下正确的路径就可以了。

共用工程的引用

在引用工程的Component.js文件中

init: function() {
  debugger;
  var commonComponentPath;
  //根据当前URL判断使用
  var loc = location.href.toLowerCase();
  if (loc.indexOf("fiorilaunchpad.html") > 0) {
    commonComponentPath = "/sap/bc/ui5_ui5/sap/zshbzcommon/common";
  } else {
    //本地common组件用来做debug测试
    commonComponentPath = "/webapp/common";
  }
    //注册common地址，以便后面引用
  jQuery.sap.registerModulePath("sh.bz.common", commonComponentPath);

在rootview就可以使用之前注册的路径来使用共用组件 ,如下面费用申请单应用的rootview FYSQHome.view.xml：
在引用工程的controller.js文件中

保存草稿

判断OData是否成功并读取到了值if(data.results && data.results.length>0

日期格式化

在Component.js文件中先声明下面代码

// 对Date的扩展，将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
// 例子：
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
Date.prototype.Format = function (fmt) { //author: meizz
    var o = {
        "M+": this.getMonth() + 1, //月份
        "d+": this.getDate(), //日
        "h+": this.getHours(), //小时
        "m+": this.getMinutes(), //分
        "s+": this.getSeconds(), //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

调用的时候就可以直接用了

1 2	var time1 = new Date().Format("yyyy-MM-dd"); var time2 = new Date().Format("yyyy-MM-dd HH:mm:ss");

控制参数

在Component.js中定义全局config参数，就可以在程序的各个view的controller中使用，config参数就是一个个的键值对，如下图

config: {
  fullWidth: true,
  resourceBundle: "i18n/messageBundle.properties",
  serviceConfig: {
    name: "",
    serviceUrl: "/sap/opu/odata/"
  }
},

使用时在页面的init中就可以通过下面的方式取出：

1	this.oConfig = this.oComponent.getMetadata().getConfig().serviceConfig;

输入检查

必输检查
输入长度检查

输入有效性检查

输入帮助

得到登录用户和语言

OData选择确认窗口

下面是一个挺不错的例子(其中jQuery.sap.syncStyleClass还不理解是什么意思，目测是同步两个view的样式)

onConfirmReadDraft: function(oEvent,that) {
  //关闭上一级窗口
    that.oDialogReadDraft.close();
    //判断fragment是否已经实例化
    if (!that.oDialogSelectDraft) {
      that.oDialogSelectDraft = sap.ui.xmlfragment("fs.fk.Common.view.expreq.dialogfragment.DialogSelectDraft", that);
      jQuery.sap.syncStyleClass(that.getOwnerComponent().getContentDensityClass(),that.getView(), that.oDialogSelectDraft);
      that.getView().addDependent(that.oDialogSelectDraft);
    }
    //访问odata取数据
    var oDataModel = new sap.ui.model.odata.ODataModel("/sap/opu/odata/sap/YDZODATA_SRV/", true);
    var userId = that._sLogonUserId;
    var sPath = "HeadSet?$filter=Bdtyp eq '"+_bdtyp+"' and Statu eq '0' and Cuser eq '"+userId+"' and Batnr eq '0'";
    var that = that;
    oDataModel.read(sPath,  {
    async: false,
      success: function(data, response) {
        //清空model数据
        that.getView().getModel("DraftData").getData().DraftList = []
        //判断是否有数据
        if(data.results && data.results.length>0){
          //依次填充model数据
          for(var i =0;i<data.results.length;i++){
            that.getView().getModel("DraftData").getData().DraftList.push({
              "Number":data.results[i].Dzdnr,//动支单号
              "Batnr":data.results[i].Batnr,//动支批单号
              "Fistl":data.results[i].Fistl,//基金中心
              "Namex":data.results[i].Namex,//基金中心名称
              "Agent":data.results[i].Pernm,//动支人
              "AgentId":data.results[i].Psnid,
              "TotalAmount":Formatter.FloatFormat(parseFloat(data.results[i].Wrbtr)),//动支总金额
              "Currency":data.results[i].Waers,//货币
              "Issue":data.results[i].Title,//动支事项
              "Notes":data.results[i].Cmemo //事项说明
            });
          }
        }
        //刷新model
        that.getView().getModel("DraftData").refresh();
       },
      error: function(error) {}
    });
    that.oDialogSelectDraft.open();
    sap.ui.getCore().byId('idSelectDraftTable').removeSelections();
  },

this that

how to connect multiple backend server

公司的前端fiori server目前只有一个开发机，开发机分两个client 120 130，120是开发环境，130有数据可以进行测试，所以我们就需要让前端这个开发环境连接两个不同的client来分别进行开发和测试，以下是前端的配置过程:

SM59分别创建120和130的RFC连接
分别为120和130创建别名
然后就可以在服务中添加系统别名进行连接了，

不想在这配在SPRO中也可以

注意这里有两组checkbox

通过修改这个来确定服务的连接和metadata的连接.

Service Maintenance missing

在做Odata开发时发现SEGW的Sevice Maintenance是空的，每次测试服务的时候都要打开笔记打开那个难记的TCODE/IWFND/MAINT_SERVICE来打开Gateway的客户端。很不方便，下图这个位置，这里是我刚配上的LOCAL，点击SAP Gateway Client就能直接进到服务测试界面了。

配置过程如下：

SM59创建RFC，这个相信大家都知道，不截图了
创建系统Alias

3.