SAPUI5学习第三天-----（02）开始用Controls代替Hello World了

本文链接：https://blog.csdn.net/qq_34060435/article/details/117352388

Controls

现在是时候通过 SAPUI5 控件 sap.m.Text 替换 HTML 正文中的“Hello World”文本来构建我们的第一个小 UI。一开始，我们将使用 JavaScript 控件界面来设置 UI，然后将控件实例放入 HTML 正文中。

webapp/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/walkthrough/index"
		data-sap-ui-resourceroots='{
			"sap.ui.demo.walkthrough": "./"
		}'>
	</script>
</head>
<body class="sapUiBody" id="content">
</body>

</html>

<body class="sapUiBody" id="content">
</body>
为SAPUI5应用添加额外的主题依赖样式

webapp/index.js

sap.ui.define([
	"sap/m/Text"

], function (Text) {
	"use strict";

	new Text({
		text: "Hello World"
	}).placeAt("content");

});

控件用于定义屏幕各部分的外观和行为。

在上面的例子中，init事件的回调就是我们现在实例化SAPUI5文本控件的地方。控件的名称以其控件库sap/m/的名称空间作为前缀，并将选项传递给带有JavaScript对象的构造函数。对于我们的控件，我们将文本属性设置为值“Hello World”。

我们将控件的构造函数调用链接到标准方法placeAt，该方法用于将SAPUI5控件放置在文档对象模型(DOM)或任何其他SAPUI5控件实例的节点中。我们将DOM节点的ID作为参数传递。我们使用HTML文档的body标签并为其提供ID ‘content’作为目标节点。

SAPUI5的所有控件都有一组固定的属性、聚合和关联用于配置。您可以在Demo Kit中找到它们的描述。此外，每个控件都带有一组公共函数，您可以在API reference中查找这些函数。
在这里插入图片描述

在这里插入图片描述