SAP OPEN UI5 Step4 Xml View

转载请联系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>

qq互助群：

posted @ 2021-06-20 22:44  小石王  阅读(1409)  评论(0)  编辑  收藏  举报