1、SAP UI5 之 Step1-Step4 JS引入及View层
目录
碎碎念：本来计划这个月把SSM实战做完，但一直在公司实习太忙了没有太多时间练习SSM。现在mentor要求学习SAP UI5,正好自己对前端也不是很熟悉，所以开一个分类专门记录学习历程，有SAP相关学习经历的小伙伴可以一起交流。
1、编写Hello world
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SAPUI5 Walkthrough</title>
<script
id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"//默认主题
data-sap-ui-libs="sap.m"//UI库
data-sap-ui-compatVersion="edge"//兼容edge
data-sap-ui-async="true"
data-sap-ui-onInit="module:sap/ui/demo/walkthrough/index"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "./"
}'>
</script>
</head>
<body>
<div>Hello World</div>
</body>
</html>2、引入JS
在index.html的body标签中去掉了hello world语句，添加id="content"
新建index.js， .placeAt("content") 对html中的id进行引用
（1）index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SAPUI5 Walkthrough</title>
<script
id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"//默认主题
data-sap-ui-libs="sap.m"//UI库
data-sap-ui-compatVersion="edge"//兼容edge
data-sap-ui-async="true"
data-sap-ui-onInit="module:sap/ui/demo/walkthrough/index"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough": "./"
}'>
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>（2）index.js
sap.ui.define([
"sap/m/Text"
],function(Text){
"use strict";
new Text({
text: "Hello World"
}).placeAt("content");
});3、XML Views
使设置模块化
（1）webapp/view/App.view.xml (New)
View层，配置UI， 定义sap.ui.core.mvcnamespace
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
</mvc:View>（2）webapp/view/App.view.xml
添加hello world的标签
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Text text="Hello World"/>
</mvc:View>（3）webapp/index.js
将原来的 sap.m.Text实例替换掉
sap.ui.define([
"sap/ui/core/mvc/XMLView"
], function (XMLView) {
"use strict";
XMLView.create({
viewName: "sap.ui.demo.walkthrough.view.App"
}).then(function (oView) {
oView.placeAt("content");
});
});总结：
View 名字是大写
所有View都存在 view folder
XML views 的名字以 *.view.xml结尾
默认XML namespace 是 sap.m
其他XML namespaces use the last part of the SAP namespace as alias (for example, mvc for sap.ui.core.mvc)
手机扫一扫
移动阅读更方便
你可能感兴趣的文章