安装Sapui5 插件（Eclipse环境下）

插件安装步骤

location填入SAPUI5插件地址：https://tools.hana.ondemand.com/2019-12

新建Sapui5工程

新建工程

选择sapui5工程

工程名最好以Z开头，后面才能被传输到SAP系统当中，否则会报错

我没有勾选创建初始化窗口

修改文件层次目录

创建好后如果是这个样子的层次目录，是不正确的，需要手动更改

更改成如下的层级目录

新建初始化文件

manifest.json

sapui5 全局的配置文件

{  
	    "_version": "1.5.0",  
	    "sap.app": {  
	        "id": "dlw.training.demo01",  
	        "type": "application",  
	        "i18n": "i18n/i18n.properties",  
	        "applicationVersion": {  
	            "version": "1.0.0"  
	        },  
	        "title": "{{appTitle}}",  
	        "description": "{{appDescription}}",  
	        "sourceTemplate": {  
	            "id": "ui5template.basicSAPUI5ApplicationProject",  
	            "version": "1.40.12"  
	        },  
	        "dataSources": {  
	            "default": {  
	                "uri": "/sap/opu/odata/SAP/ZWUYD_DEMO5_SRV/",  
	                "type": "OData",  
	                "settings": {  
	                    "odataVersion": "2.0"  
	                }  
	            }  
	        }  
	    },  
	    "sap.ui": {  
	        "technology": "UI5",  
	        "fullWidth": true,
	        "icons": {  
	            "icon": "",  
	            "favIcon": "",  
	            "phone": "",  
	            "phone@2": "",  
	            "tablet": "",  
	            "tablet@2": ""  
	        },  
	        "deviceTypes": {  
	            "desktop": true,  
	            "tablet": true,  
	            "phone": true  
	        },  
	        "supportedThemes": ["sap_hcb", "sap_belize"]  
	    },  
	    "sap.ui5": {  
	        "rootView": {  
	            "viewName": "dlw.training.demo01.view.App",  
	            "type": "XML",
	            "async": true 
	        },
	        "config": {
	            "fullWidth": true
	        },  
	        "dependencies": {  
	            "minUI5Version": "1.30.0",  
	            "libs": {  
	                "sap.ui.core": {},  
	                "sap.m": {},  
	                "sap.ushell": {}  
	            }  
	        },  
	        "contentDensities": {  
	            "compact": true,  
	            "cozy": true  
	        },  
	        "models": {  
	            "i18n": {  
	                "type": "sap.ui.model.resource.ResourceModel",  
	                "settings": {  
	                    "bundleName": "dlw.training.demo01.i18n.i18n"  
	                }  
	            },  
	            "oDataModel": {  
	                "dataSource": "default",  
	                "settings": {  
	                    "autoExpandSelect": true,  
	                    "operationMode": "Server",  
	                    "groupId": "$auto",  
	                    "synchronizationMode": "None"  
	                }  
	            }  
	        },  
	  
	          
	        "routing": {  
	            "config": {  
	                "routerClass": "sap.m.routing.Router",  
	                "viewType": "XML",  
	                "viewPath": "dlw.training.demo01.view",  
	                "controlId": "app",  
	                "controlAggregation": "pages",  
	                "bypassed": {  
	                    "target": ["notFound"]  
	                },  
	                "async": true  
	            },  
	            "routes": [{  
	                "pattern": "",  
	                "name": "worklist",  
	                "target": ["worklist"]  
	            },{  
	                "pattern": "detail:?query:",  
	                "name": "detail",  
	                "target": ["detail"]  
	            }],  
	            "targets": {  
	                "worklist": {  
	                    "viewName": "Worklist",  
	                    "viewId": "worklist",  
	                    "viewLevel": 1  
	                },  
	                "detail": {  
	                    "viewName": "Detail",  
	                    "viewId": "detail",  
	                    "viewLevel": 2  
	                }, 
	                "notFound": {  
	                    "viewName": "NotFound",  
	                    "viewId": "notFound" 
	                }
	            }  
	        },  
	        "resources": {  
	            "css": [{  
	                "uri": "css/style.css"  
	            },  
	            {  
	                "uri": "/util/ui/basic.css"  
	            }]  
	        }  
	    }  
}

index.html

是整个程序的HTML入口，sapui挂载在body标签上

<!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_belize"
    data-sap-ui-compatVersion="edge"
    data-sap-ui-appCacheBuster="./"
    data-sap-ui-resourceroots='{"dlw.training.demo01":""}'>
  </script>

  <script>
   sap.ui.getCore().attachInit(function() {
    new sap.m.Shell({
     app: new sap.ui.core.ComponentContainer({
      height : "100%",
      name : "dlw.training.demo01"
     })
    }).placeAt("content");
   });
  </script>

 </head>
 <body id="content" class="sapUiBody sapUiSizeCompact">
 </body>
</html>

App.view.xml

全局视图，其他视图都挂载在该视图上

View 是MVC当中的视图，负责展示页面上的控件

<mvc:View controllerName="dlw.training.demo01.controller.App" 
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true"
    xmlns="sap.m" >
    <App id="app"></App>
</mvc:View>  

App.controller.js

全局控制器

Controller是mvc中的控制器，负责控制页面交互和数据交互

 sap.ui.define([  
    "sap/ui/core/mvc/Controller"  
], function(Controller) {  
    "use strict";  
    
    return Controller.extend("dlw.training.demo01.controller.App", {  
        onInit: function(){  
            //页面初始化
        },  
  
        onBeforRendering: function(){  
            //页面元素未渲染之前
        },  
  
        onAfterRendering: function(){  
        //页面元素渲染之后
        }  
    });  
});  

新建hello world demo

在manifest中配置路由

新建Worklist.view.xml

<mvc:View xmlns:core="sap.ui.core"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:m="sap.m"
    xmlns="sap.ui.table"
    xmlns:html="http://www.w3.org/1999/xhtml"
    controllerName="dlw.training.demo01.controller.Worklist">
    <m:Page id="idWorklist" title="{i18n>pageTitle}">
        <m:Text text="hello world"/>
    </m:Page>
</mvc:View>

新建Worklist.controller.js

 sap.ui.define([  
    "sap/ui/core/mvc/Controller"  
], function(Controller) {  
    "use strict";  
    
    return Controller.extend("dlw.training.demo01.controller.Worklist", {  
        onInit: function(){  
            //页面初始化
        }
    });  
});  

上传到sap系统后，展示网页效果