第3步:控件

最新推荐文章于 2022-08-13 22:42:44 发布

真的是我太天真

最新推荐文章于 2022-08-13 22:42:44 发布

阅读量212

点赞数

分类专栏： SAPUI5

原文链接：https://sapui5.hana.ondemand.com/sdk#/topic/ddbceecd7d3d42eea9cf78a820a238fb

版权

SAPUI5 专栏收录该内容

40 篇文章 5 订阅

订阅专栏

说明

现在是时候构建我们的第一个小UI了，方法是用SAPUI5控件sap.m.Text替换HTML主体中的“Hello World”文本。首先，我们将使用JavaScript控件接口来设置UI，然后将控件实例放入HTML主体中。

预览

在这里插入图片描述

"Hello World"文本现在由SAPUI5控件显示

代码

你可以在演练-第3步查看和下载所有文件。

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>

类sapUiBody为显示SAPUI5应用添加了额外的主题依赖样式。

webapp/index.js

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

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

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

});

我们不想使用原生JavaScript来显示对话框，而是使用一个简单的SAPUI5控件。控件用于定义屏幕各部分的外观和行为。

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

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

SAPUI5的所有控件都有一组固定的属性、聚合和关联用于配置。您可以在演示工具包中找到它们的描述。此外，每个控件都带有一组公共函数，您可以在API引用中查找这些函数。

不要忘记删除“Hello World”。

注意
只有sap.ui.core.Control的实例或它们的子类可以独立呈现并具有placeAt函数。每个控件都扩展了只能在控件内部呈现的sap.ui.core.Element。查看API参考以了解关于控件继承层次结构的更多信息。每个控件的API文档引用直接已知的子类。

章节

真的是我太天真

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第3步:控件

说明现在是时候构建我们的第一个小UI了，方法是用SAPUI5控件sap.m.Text替换HTML主体中的“Hello World”文本。首先，我们将使用JavaScript控件接口来设置UI，然后将控件实例放入HTML主体中。预览"Hello World"文本现在由SAPUI5控件显示代码webapp/index.html<!DOCTYPE html><html><head> <meta charset="utf-8"> <
复制链接

扫一扫