转载请联系vx:xiaoshitou5854
XML View
有多种view:html,xml,JavaScript。xml view可读性好,可以把view的声明从controller logic里抽离出来。
webapp/view/App.view.xml (New)
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Text text="Hello World"/>
</mvc:View>
xmlns:引入sap.m库
xmlns:mvc="sap.ui.core.mvc":引入sap.ui.core.mvc库,并给个别名叫mvc,把名字缩短了,方便后续使用。
Text:定义一个Text控件。,Text的内容是Hello World
webapp/index.js
sap.ui.define([
"sap/ui/core/mvc/XMLView"
], function (XMLView) {
"use strict";
XMLView.create({
viewName: "sap.ui.demo.walkthrough1.view.App"
}).then(function (oView) {
oView.placeAt("content");
});
});
使用XMLView库。
XMLView.create的作用是找到webapp/view/App.view.xml,并加载进来。sap.ui.demo.walkthrough1是index.html里data-sap-ui-resourceroots和data-sap-ui-onInit定义的
then:如果找到了并加载成功就调用placeAt方法,替换掉id为content的DOM的内容。
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"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-onInit="module:sap/ui/demo/walkthrough1/index"
data-sap-ui-resourceroots='{
"sap.ui.demo.walkthrough1": "./"
}'>
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
本人微信:xiaoshitou5854