SAP UI5 walkthrough step3 Controls

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

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

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

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

html 复制代码
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.

最后的实现效果就是:

相关推荐
爱喝水的鱼丶1 天前
SAP-ABAP: ABAP ASSIGN COMPONENT 语句详解:动态字段符号的利器作用用法示例详解
运维·开发语言·sap·abap·开发经验·动态字段符号
小羔羊的官方学习账号6 天前
整理期初数据用到的EXCEL里面的函数操作
excel·sap·期初数据整理
duangww25 天前
SAP ALV导出excel 报 XML 错误的 /xl/sharedStrings.xml
abap
Z y..1 个月前
abap po使用函数入参出参作为接口参数
abap
你好coder1 个月前
VSCode连接SAP ABAP开发环境
ide·vscode·编辑器·sap·abap·cds
爱喝水的鱼丶1 个月前
SAP-ABAP: Open SQL集合函数COUNT(统计行数)、SUM(数值求和)、AVG(平均值)、MAX/MIN(极值)深度指南
运维·数据库·sql·sap·报表·abap·程序
爱喝水的鱼丶1 个月前
SAP-ABAP:ABAP Open SQL 深度解析:核心特性、性能优化与实践指南
运维·开发语言·数据库·sql·性能优化·sap·abap
DeveloperMrMeng1 个月前
ABAP SQL更新DB小技巧 WITH INDICATORS
sql·sap·abap
爱喝水的鱼丶1 个月前
SAP-ABAP:SAP ABAP OpenSQL JOIN 操作权威指南高效关联多表数据
运维·开发语言·数据库·sap·abap
LilySesy1 个月前
【案例总结】幽灵单据——消失的交货单号
数据库·ai·oracle·编辑器·sap·abap