SAP UI5初步结构分析研究（二）

经过了一段时间的研究，大致对这款框架的文件结构做了一个大致的了解，在这里记录以及分享一下，上一篇博客主要是分析整个生产环境的安装以及SAP推出Fiori的意义，还有就是框架笼统结构，有些地方说的不全面也不是特别正确，这篇博客进行补充，全文大白话，见谅~

目录大致结构

从eclipse和官方的sap web ide创建的项目大有不同啊，准确的来说官方ide创建的模板更全面也更复杂，eclipse就小白很多了，看着舒服~~所以先讲eclipse的
创建的整个项目模板上来看的话，最主要的部分还是传统的webcontent以及sap library，这东西当然是包含了很多sap ui5的组件啦，包括最最最重要的
sap.ui.core.js
这个文件是SAP UI5的根文件，也是所有命令的声明文件，所有的UI5程序开始跑的时候第一时间都是找的这货
首先先声明一下目录结构，分三个文件夹按照mvc的形式，分别是view model controller，最外围有个Index.html，类似于vue中的单页形式，所有的文件都被placeAt一个唯一的ID为content的div中
index.html

        <script src="resources/sap-ui-core.js"                id="sap-ui-bootstrap"                data-sap-ui-libs="sap.m"                data-sap-ui-preload="async"                data-sap-ui-xx-bindingSyntax="complex"                data-sap-ui-resourceroots = '{"webapp": "./webapp/"}'                data-sap-ui-theme="sap_bluecrystal">        </script>

生成的html结构跟别的没啥区别，唯一的特点就是这段script中的声明，称之为bootstrap，里面叙述了核心文件的引入路径，定义的命名空间resourceroots，使用的模板，这里用的是m也就是移动端兼容形式，这里面有一条没看懂，那个binding应该是数据绑定的声明，这里用的是复杂绑定，进别人博客细看吧我就不讲了我也讲不明白~
第二部分是自己的事务代码，这里就用到了核心组件core去init到浏览器中，声明需要展示的view文件或者是组件后，加载进相应的div中
最后一部分就是html结构，相对固定的id以及class名，别动就行

view
分为很多种写法，其中有js json xml五花八门呀，不过先从命名规则开始讲，有个尿性，命名必须是xxx.view.xxx
第一部分是自己起的名字，中间呢必须要声明是一个view文件，最后是文件类型，好几种随意，不过最好别乱来，因为这关系到Index或者controller中引入声明的文件类型也就是type选项，该怎么来怎么来
这里就先介绍一种，xml格式文件
开始的标签是一个core:view，我在油管上看到的视频中有时候会被改成mvc:view的形式，还没琢磨透，先放着
因为xml是以标签的形式撰写的，而且官方IDE中生成的也是xml文件，所以这里更推荐使用以及学习，表头都是已经声明好了的，大致上不用动，但是如果涉及到后续的component.js和manifest文件，可能还会涉及到更改，这两个文件之后再说，其中xml文件里面的一些设定属性就涉及到了属性绑定之类的，text number title showbutton等等，这些太多了官方定义的，自己去搜罗文档

<core:View xmlns:core="sap.ui.core"            xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"        controllerName="webapp.controller.Detail"         xmlns:html="http://www.w3.org/1999/xhtml">    <Page title="供应商明细" showNavButton="true" navButtonPress="onNavPress">        <content>            <ObjectHeader title="{Name}" number="ID: {ID}">                <ObjectAttribute text="{Address/Street}, {Address/City}"/>            </ObjectHeader>        </content>    </Page></core:View>

model
这里主要放的就是数据了呀，因为还没搞清楚后天的连接方式以及数据的调用，所以现在的学习主要还是以静态获取json文件为主，在官方IDE中生成的是localServer的一个文件夹，其中放的是静态文件以及一个叫mockdata的东西，估摸着可能会通过某种方式生成虚拟数据，知道mock.js的童鞋应该会认同我，当然这是我猜的，这个文件夹主要还是用来连接后端的，里面应该还有一个类似于元数据的声明文件。
不过这种mvc形式抽取的静态文件方法，我会遇到一个中文乱码的问题，暂时还没有解决，clone下来的项目虽然最后运行没有乱码，但是我看到的data.json文件整个都乱码的，难道是以毒攻毒？？？存疑暂留

controller

sap.ui.define([        "sap/ui/core/mvc/Controller"    ],     function(Controller){        "use strict";         return Controller.extend("webapp.controller.Master", {            onListPress: function(oEvent){                // 跳转到detail view                var sPageId = oApp.getPages()[1].getId();                oApp.to(sPageId);                // 设置detail page的bindingContext                var oContext = oEvent.getSource().getBindingContext();                var oDetailPage = oApp.getPage(sPageId);                oDetailPage.setBindingContext(oContext);            }         });    });

所有的controller文件都以sap.ui.define开头声明和定义，从中引入的应该是所需要的组件，因为这个文件仅仅是一个普通的js文件，所以只引入一个控件也就是根控件sap/ui/core/mvc/Controller，然后固定格式是return Controller.extend(webapp.controller.xxx)括号里的东西第一部分是在index.html中声明的命名空间，使其成为根目录，然后进入到controller文件夹中，找到对应名字的控制文件，也就是说这种写法相当于一个绝对路径的声明，接下来就是事务代码部分

component.js

sap.ui.define([        "sap/ui/core/UIComponent",        "sap/ui/model/json/JSONModel"    ],     function(UIComponent, JSONModel){        return UIComponent.extend("webapp.Component", { //声明本文件路径                   createContent: function() {                UIComponent.prototype.createContent.apply(this, arguments);                // load application data                //加载数据文件路径，通过sap.ui.model.json.JSONModel()方法定义一个model                //通过loadModel(path)加载相应文件                //通过setModel实例化                var oModel = new sap.ui.model.json.JSONModel();                oModel.loadData("webapp/model/data.json");                this.setModel(oModel);                // app view(root view)                //定义根视图(启动即显示的 view)                //声明类型 XML                //视图名以及位置                var oAppView = sap.ui.view("appView", {                    type: sap.ui.core.mvc.ViewType.XML,                    viewName: "webapp.view.App"                })                //获取跟视图ID，并返回值                oApp = oAppView.byId("app");                return oAppView;                            }        });    });

原先简单的ui5示例是没有这个文件的，但是在大神博客的后面的章程新建了，所以这边就重点讲一下，这个文件和其他js没有太大区别，开始声明所需引入的组件，而后声明文件本身的路径，这个文件被单独放在一边更多的是负责撰写路由以及后台数据连接的代码部分，类似于vue中负责路由的vue-router

manifest.json
这是一个描述文件，也是一个元数据文件，放置在根目录中

{    "_version": "1.1.0",    "sap.app": {        "_version": "1.1.0",        "id": "stone.sapui5.test",        "type": "application",        "i18n": "i18n/i18n.properties",        "applicationVersion": {            "version": "1.0.0"        },        "title": "{{appTitle}}",        "description": "{{appDescription}}",        "dataSources": {            "mainService": {                "uri": "./service/data.json",                "type": "JSON"            }        }    },    "sap.ui": {        "_version": "1.1.0",        "technology": "UI5",        "deviceTypes": {            "desktop": true,            "tablet": true,            "phone": true        },        "supportedThemes": [            "sap_bluecrystal"        ]    },    "sap.ui5": {        "_version": "1.1.0",        "rootView": {            "viewName": "webapp.view.App",            "type": "XML"        },        "dependencies": {            "minUI5Version": "1.30.0",            "libs": {                "sap.m": {}            }        },        "contentDensities": {            "compact": true,            "cozy": true        },        "models": {            "": {                "dataSource": "mainService"             },            "i18n": {                "type": "sap.ui.model.resource.ResourceModel",                "settings": {                    "bundleName": "webapp.i18n.i18n"                }            }        },        "routing": {            "config": {                "routerClass": "sap.m.routing.Router",                "viewType": "XML",                "viewPath": "webapp.view",                "controlId": "app",                "controlAggregation": "pages",                "bypassed": {                    "target": "notFound"                }            },            "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"                }            }        }    }}

里面说明了资源包的版本号，对Model文件的绑定，对i18n文件的绑定，路由的设置，root view的声明等，所有的文件开始运行之后，如果在文件本身中没有找到数据声明的路径，那系统将会从这个文件中的路径开始加载

i18n.properties
被单独放置在一个i18n的文件夹下，这个东西我虽然看出来干嘛用的了，但是还是挺迷的，在web ide中被单独生成，不过从油管上的视频来看，这东西还是为了解决语言转码问题，比如会在后面加_en _zh等等设置来达到语言兼容的目的，这东西主要负责的还是和view层中的text和title属性绑定，这个文件的名字中带18的意思是十八种语言，当然我也不知道是不是真的，反正是这么解释的
咳咳，一个小时前我还在狠狠吐槽这个文件，现在收回~
通过更改后缀名来识别语言，例如i18n_zh_CN.properties就代表了简体中文

这文件到底有多变态，我在表明了中文的文件中修改name项，效果如图


没错！你没看错，直接就被编码了！！！窝草！！但是。。。我以后怎么知道我这里写了啥？？？？