SAP UI5 walkthrough step3 Controls

2023-12-13 11:07:47

在上一步，我们是直接用index.html?中的body 里面的DIVision去输出?hello world，

在这个章节，我们将用SAP UI5 的标准控件?sap/m/Text

首先，我们去修改?webapp/index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>UI5 Walkthrough</title>
	<script
		id="sap-ui-bootstrap"
		src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
		data-sap-ui-theme="sap_horizon"
		data-sap-ui-libs="sap.m"
		data-sap-ui-compatVersion="edge"
		data-sap-ui-async="true"
		data-sap-ui-onInit="module:ui5/walkthrough/index"
		data-sap-ui-resourceroots='{
			"ui5.walkthrough": "./"
		}'>

	</script>
</head>
<body class="sapUiBody" id="content">  
</body>
</html>

index.html 这个文件中指明了，我们要先去加载index.js 文件

所以我们在index.js 中需要去实例化 content

webapp/index.js

sap.ui.define([
	"sap/m/Text"
], (Text) => {
	"use strict";

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

Instead of using native JavaScript to display a dialog we want to use a simple SAPUI5 control. Controls are used to define appearance and behavior of parts of the screen.

In the example above, the callback of the?init?event is where we now instantiate a SAPUI5 text control. The name of the control is prefixed by the namespace of its control library?sap/m/?and the options are passed to the constructor with a JavaScript object. For our control we set the?text?property to the value “Hello World”.

We chain the constructor call of the control to the standard method?placeAt?that is used to place SAPUI5 controls inside a node of the document object model (DOM) or any other SAPUI5 control instance. We pass the ID of a DOM node as an argument. As the target node we use the body tag of the HTML document and give it the ID?content.

All controls of SAPUI5 have a fixed set of properties, aggregations, and associations for configuration. You can find their descriptions in the Demo Kit. In addition, each control comes with a set of public functions that you can look up in the API reference.

最后的实现效果就是：

文章来源:https://blog.csdn.net/IamRunjiang/article/details/134876164
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。