SAPUI5基础知识5 - 控件（control）的使用

十年铸器

已于 2024-06-17 14:08:10 修改

阅读量838

点赞数 13

分类专栏： SAPUI5 文章标签： SAP SAPUI5 Fiori

于 2024-06-14 21:55:11 首次发布

本文链接：https://blog.csdn.net/nkGavinGuo/article/details/139690148

版权

SAPUI5 专栏收录该内容

51 篇文章 33 订阅

订阅专栏

1. 背景

在SAPUI5中，控件（Control）是构建用户界面的基本元素。控件是一个可重用的组件，它可以与用户进行交互或显示信息。

每个控件都有自己的特性，例如属性（Properties）、聚合（Aggregations）和事件（Events）。

控件的用途主要有以下几点：

用户交互：控件可以响应用户的操作，例如点击按钮、选择下拉列表项等。
数据绑定：控件可以与模型中的数据进行绑定，实现数据的显示和更新。
布局和样式：控件可以设置布局和样式，以实现所需的用户界面效果。

2. 示例

以下是一个简单的SAPUI5控件示例，创建一个按钮并设置点击事件：

new sap.m.Button({
    text: "Click me",
    press: function() {
        sap.m.MessageToast.show("Button clicked");
    }
}).placeAt("content");

在这个示例中，我们创建了一个sap.m.Button控件，设置了其text属性和press事件。当用户点击这个按钮时，会显示一个消息提示（MessageToast）。placeAt()方法将这个按钮添加到ID为"content"的HTML元素中。

3. 练习

结合上一篇博客中的例子，让我们使用SAPUI5控件来替代HTML页面中的Hello Word字符串。

在index.html文件中，可以看到之前我们实现hello world的方式是过div元素间嵌入hello world文本的方式。

在这里插入图片描述

在本篇博客中，让我们练习通过sap/m/text这个控件实现相同的效果。

3.1 增强index.html文件

首先，让我们在index.html文件中移除<div>元素这段代码，然后添加下面代码

<body class="sapUiBody" id="content"></body>

改动完后，HTML的文件内容如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My SAPUI5 Test</title>
    <script
    id="sap-ui-bootstrap"
    src="https://sdk.openui5.org/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:zsapui5/test/index"
    data-sap-ui-resourceroots='{
        "zsapui5.test": "./"
    }'>
    </script>
</head>
<body class="sapUiBody" id="content"></body>`
</html>

代码解释：
class用于指定元素的样式类，id用于指定元素的唯一标识符。这两个属性可以帮助CSS和JavaScript来定位和操作元素。SAPUI5中的样式类sapUiBody可用于添加主题相关的样式，用于显示 SAPUI5 应用程序。稍后，我将在JavaScript代码中通过id来操作此元素，实现Hello World的效果。

3.2 增强index.js文件

在这个步骤中，让我们将index.js文件修改如下：

sap.ui.define([
    "sap/m/Text"
], function (Text) {
    "use strict";
    new Text({
        text: "Hello World (by SAPUI5 control)"
    }).placeAt("content");
});

之前在index.js文件中，我们通过js代码实现了对话框的显示。而此练习，我们通过init事件的回调函数，来实现SAPUI5文本控件sap/m/Text的实例化，并将文本属性text设置为“Hello World”。
在这里插入图片描述

通过将控件的构造函数调用链接到标准方法placeAt()，将这个文本元素添加到id为"content"的HTML元素中。

从原理上将，我们通过引导过程，实现了向HTML DOM树中添加控件的操作。

HTML文件的body包含应用程序的DOM。
在初始化脚本中，通过在控件的placeAt()方法，完成控件的添加。

对于SAPUI5的所有控件用于配置的属性、聚合和事件等说明，可以在SAPUI5的Demo Kit文档中查找。此外，每个控件都带有一组公共函数，可以在SAPUI5的API文档中查找。

注意: 只有sap.ui.core.Control或其子类的实例才能被独立渲染并具有placeAt功能。每个控件都扩展了只能在控件内部渲染的sap.ui.core.Element。查看API参考以了解更多关于控件继承层次的信息。每个控件的API文档都引用了直接已知的子类。

3.3 运行程序

运行修改后的程序，我们可以看到以下效果：

在这里插入图片描述

之前写到index.js中的alert弹出窗口不见了，同时hello world的字体也不同于之前的效果。

4. 注意JavaScript代码中的依赖关系

在js文件中，引用控件依赖项顺序要和函数参数的顺序一致，建议使用相同的名称来引用它们。

例如下例中，我们引用了两个控件，则正确实例化它们的方式如下：

sap.ui.define([
  "sap/m/Text",
  "sap/m/Input"
], function (Text, Input) {
  new Text();
  new Input();
});

下面是一个错误的调用方式：

sap.ui.define([
  "sap/m/Text",
  "sap/m/Input"
], function (Input, Text2) {
  new Text(); // 错误，未定义 Text 参数（只定义了 Text2）
  new Input(); // 没有错误，但它实例化了一个 sap.m.Text 控件，因为顺序是决定因素，而不是名字。
});