现在是时候通过将 HTML 正文中的“Hello World”文本替换为 SAPUI5 控件 sap.m.Text 来构建我们的第一个小 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://sdk.openui5.org/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>
webapp/index.js
sap.ui.define([
"sap/m/Text"
], function (Text) {
"use strict";
new Text({
}).placeAt("content");
});
*在上面的例子中,init事件的回调是我们现在实例化SAPUI5文本控件的地方。控件的名称以其控件库sap/m/的名称空间为前缀,选项通过JavaScript对象传递给构造函数。对于我们的控件,我们将text属性设置为值“Hello World”。
我们将控件的构造函数调用链接到标准方法placeAt,该方法用于将SAPUI5控件放置在文档对象模型(DOM)或任何其他SAPUI5控制实例的节点内。我们将DOM节点的ID作为参数进行传递。作为目标节点,我们使用HTML文档的body标记,并为其提供ID内容。
SAPUI5的所有控件都有一组用于配置的固定属性、聚合和关联。您可以在演示工具包中找到它们的描述。此外,每个控件都带有一组公共函数,您可以在API引用中查找这些函数。
【我主要看官网和小石王博主文章学习,如有侵权请联系我删除】