ui5_Walkthrough_Step 4: XML 视图

通Walkthrough_Step 3: 控件新建文件夹04 ，同时04新建一个文件夹webapp,webapp下新建一个文件夹view.

与Walkthrough_Step 3 相比 index.html不做变更，webapp下新建文件同样新建文件index.js

view 文件夹下新建文件App.view.xml

04文件夹下新建文件manifest.json，package.json ,ui5.yaml

如下如图：

index.html

html 复制代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>SAPUI5 Walkthrough</title>
	<script
		id="sap-ui-bootstrap"
		src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
		data-sap-ui-async="true"
		data-sap-ui-resourceroots='{
			"sap.ui5.walkthrough": "./"
		}'
		data-sap-ui-oninit="module:sap/ui5/walkthrough/index">
	</script>
</head>

<body>
	<div class="sapUiBody" id="content"> <!--//sapUiBody ui5框架标准特定类名-->
</body>
</html>

index.js

javascript 复制代码

sap.ui.define(["sap/ui/core/mvc/XMLView"], function (XMLView) {
  "use strict";
  XMLView.create({
    viewName: "sap.ui5.walkthrough.view.App",
  }).then(function (oView) {
    oView.placeAt("content");
  });
});

App.view.xml

javascript 复制代码

<mvc:View
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<Text text="walkthrough step-4 Hello World"/>
</mvc:View>
<!--mvc 是一个命名空间，代表sap.ui.core.mvc  
   xmlns="sap.m" 定义视图的默认命名空间，声明文本控件Text 
   的时候就不需要写成sap.m.Text 
 -->

manifest.json

java 复制代码

{
	"sap.app": {
		"id": "sap.m.tutorial.walkthrough.04",
		"applicationVersion": {
			"version": "1.0.0"
		}
	}
}

package.json

java 复制代码

{
  "name": "sap.m.tutorial.walkthrough.04",
  "version": "1.0.0",
  "author": "Jerry",
  "description": "SAP UI5 初学者教程之四：XML 视图初探",
  "scripts": {
    "start": "ui5 serve"
  },
  "devDependencies": {
    "@ui5/cli": "^2.0.0"
  }
}

ui5.yaml

java 复制代码

specVersion: '2.3'
metadata:
  name: "sap.m.tutorial.walkthrough.04"
type: application
resources:
  configuration:
    paths:
      webapp: .

与前几个步骤不同，再04文件夹直接打开index.html会报错，运行此结果需安装node.js，

选中04文件夹右键，选择在集成终端打开，

运行npm install,

运行完后再运行npm start

成功会返回一个url，浏览器打开次url,能看到如下结果，显示内容为04文件夹下子文件，

点击webapp,再点击index,html运行结果如下

执行顺序

1.index.html 首先被加载，

2.index.html里data-sap-ui-oninit="module:sap/ui5/walkthrough/index">语句指定执行index.js

3.index.js里XMLView.create创建实例视图并调用placeAt方法将App.view.xml文件中id为content的内容显示出来