SAPUI5 walkthrough教程（三）——Controls

沁熙儿

已于 2023-10-19 13:10:27 修改

阅读量116

点赞数

分类专栏： sap fiori 文章标签： javascript 开发语言 ecmascript

于 2023-10-19 11:16:43 首次发布

本文链接：https://blog.csdn.net/qq_54432686/article/details/133922296

版权

sap fiori 专栏收录该内容

26 篇文章 10 订阅

订阅专栏

现在是时候通过将 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引用中查找这些函数。
【我主要看官网和小石王博主文章学习，如有侵权请联系我删除】

沁熙儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SAPUI5 walkthrough教程（三）——Controls

我们将控件的构造函数调用链接到标准方法placeAt，该方法用于将SAPUI5控件放置在文档对象模型（DOM）或任何其他SAPUI5控制实例的节点内。我们将DOM节点的ID作为参数进行传递。作为目标节点，我们使用HTML文档的body标记，并为其提供ID内容。*在上面的例子中，init事件的回调是我们现在实例化SAPUI5文本控件的地方。控件的名称以其控件库sap/m/的名称空间为前缀，选项通过JavaScript对象传递给构造函数。对于我们的控件，我们将text属性设置为值“Hello World”。
复制链接

扫一扫