SAP OPEN UI5 Step4 Xml View
阿新 • • 發佈：2021-06-21
轉載請聯絡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 Walkthrogh</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>
本人微信：xiaoshitou5854