标签：training sapui5 HelloWorld demo01 ui Demo dlw sap true
安装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系统后，展示网页效果
标签：training,sapui5,HelloWorld,demo01,ui,Demo,dlw,sap,true 来源： https://blog.csdn.net/qq_44826887/article/details/117322119
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。