SAPUI5基础知识11 - 组件配置（Component）

1. 背景

组件（Component）是SAPUI5应用程序中独立且可重用的部件。

SAPUI5提供以下两类组件:

  • faceless组件 (class: sap.ui.core.Component): 无界面组件即没有用户界面相关的元素，用于不需要UI元素编码的场景；

  • UI组件 (class: sap.ui.core.UICcomponent): UI组件用于表示应用程序界面上UI元素，例如按钮，以及相应的设置和元数据。

注意: 不能将“无界面组件”添加到组件容器Component Container中；
sap.ui.core.UICcomponent 扩展了 sap.ui.core.Component，并在sap.ui.core.Component的基础上添加了屏幕渲染功能。

一般而言，应用程序中，一个完整的组件应包含两部分：组件控制器文件(component .js)和应用程序描述描述符文件(manifest.json)。

使用组件最大的好处就在于，封装好的组件可以被灵活地嵌入到不同的组件容器（Component Container）中。例如Fiori Launchpad就是一个组件容器；在应用程序的测试过程中，我们通常也会手动创建一个组件容器。

注意：在实例化组件容器时，会指定应用程序的命名空间，组件容器会通过此路径去查找组件控制器文件。

2. 示例

2.1 定义组件控制器文件

以下是一个组件控制器文件Component.js的例子：


sap.ui.define(["sap/ui/core/UIComponent","sap/ui/model/json/JSONModel"
], function (UIComponent, JSONModel) {"use strict";return UIComponent.extend("my.namespace.demo.Component", {metadata : {manifest: "json"},init : function () {// call the init function of the parentUIComponent.prototype.init.apply(this, arguments);// set data modelvar oData = {recipient : {name : "World"}};var oModel = new JSONModel(oData);this.setModel(oModel);}});
});

在这个例子中，我们首先定义了一个新的UI组件，然后在metadata属性中设置了manifest为json，这意味着我们将使用JSON格式的manifest文件来定义组件的配置。

然后在init函数中，我们首先调用了父类的init函数，然后设置JSON模型，并将其设置为组件的模型。这个模型包含了一个recipient对象，它有一个name属性，值为World。

2.2 加载组件

定义好组件文件后，我们会在应用程序的index.js文件中，实例化组件容器，并加载所创建的组件，将其加载至页面。

下面是index.js文件加载组件的一个示例：

sap.ui.define(["sap/ui/core/ComponentContainer"
], function (ComponentContainer) {"use strict";new ComponentContainer({name: "my.namespace.demo",settings : {id : "demo"},async: true}).placeAt("content");
});

3. 练习

在本篇博客的练习中，让我们将把所有UI元素封装到一个独立于index.html文件的组件中。

这样，无论何时访问资源，我们都将相对于组件(而不是相对于index.html)进行访问。

这种架构上的改变，相较于之前静态的index.html页面，应用程序的加载变得更灵活，比如可以直接嵌入到SAP Fiori launchpad这样的容器中。

3.1 创建Component.js文件

首先，让我们我们在webapp文件夹中创建了一个初始的Component.js文件，用来存放我们的应用程序设置。当组件实例化时，SAPUI5会自动调用组件的init函数。我们的组件继承自基类sap/ui/core/UICcomponent，在重写的init方法中应首先调用基类的init函数。

创建好的项目文件结构如下：
在这里插入图片描述

Component.js的代码如下：

sap.ui.define(["sap/ui/core/UIComponent"
], function (UIComponent) {
"use strict";return UIComponent.extend("zsapui5.test.Component", {init() {// call the init function of the parentUIComponent.prototype.init.apply(this, arguments);}});
});

3.2 向Component.js中添加metadata

接下来，让我们向Component.js文件中添加应用程序配置。

改动后的Component.js代码如下：

sap.ui.define(["sap/ui/core/UIComponent","sap/ui/model/json/JSONModel","sap/ui/model/resource/ResourceModel"
], function (UIComponent,JSONModel,ResourceModel) {"use strict";return UIComponent.extend("zsapui5.test.Component", {metadata: {"interfaces": ["sap.ui.core.IAsyncContentCreation"],"rootView": {"viewName": "zsapui5.test.view.App","type": "XML","id": "app"}},init() {//call  the init function of the parentUIComponent.prototype.init.apply(this, arguments);//set data modelconst oData = {recipient : {name: "World"}};const oModel = new JSONModel(oData);this.setModel(oModel);//set i18n modelconst i18nModel = new ResourceModel({bundleName: "zsapui5.test.i18n.i18n"});this.setModel(i18nModel, "i18n");}});
});

改动后的component .js文件由两部分组成：元数据部分和组件初始化时调用的init函数部分。

元数据部分定义了对根视图App.view.xml文件的引用，这样组件就可以管理应用视图的显示，而不是像之前那样直接在index.js文件中直接创建并显示根视图。元数据定义部分还实现了sap.ui.core.IAsyncContentCreation接口，该接口允许完全异步地创建组件。

...metadata: {"interfaces": ["sap.ui.core.IAsyncContentCreation"],"rootView": {"viewName": "zsapui5.test.view.App","type": "XML","id": "app"}
...

请注意，sap.ui.core.IAsyncContentCreation接口隐式地将组件的rootView和它的路由器配置都设置为"async": true; 有关它的作用，我们将在后续有关“路由和导航”的博客中描述。

在init函数部分中，我们像之前在App.controller.js控制器文件中所做的那样，实例化数据模型oModel和i18n模型i18nModel。

...init() {//call  the init function of the parentUIComponent.prototype.init.apply(this, arguments);//set data modelconst oData = {recipient : {name: "World"}};const oModel = new JSONModel(oData);this.setModel(oModel);//set i18n modelconst i18nModel = new ResourceModel({bundleName: "zsapui5.test.i18n.i18n"});this.setModel(i18nModel, "i18n");}
...

请注意，模型是直接绑定在组件上的，而非在组件的根视图上。然而，由于嵌套的控件会自动地继承父控件的承模型，因此模型在视图上也是可用的。

3.3 调整App.controller.js文件

因为我们已经在Component.js文件中实现了数据对象和i18n模型对象的绑定，让我们把之前写在App.controller.js控制器文件的逻辑移除，也即删除 onInit 函数和所需的模块引用。
在这里插入图片描述

改动后的代码效果如下：

sap.ui.define(["sap/ui/core/mvc/Controller","sap/m/MessageToast"
], function (Controller, MessageToast) {"use strict";return Controller.extend("zsapui5.test.controller.App", {onShowHello: function () {// read msg from i18n modelconst oBundle = this.getView().getModel("i18n").getResourceBundle();const sRecipient = this.getView().getModel().getProperty("/recipient/name");const sMsg = oBundle.getText("helloMsg", [sRecipient]);// show messageMessageToast.show(sMsg);}});
});

3.4 调整index.js文件

在之前的index.js文件中，我们直接实例化应用程序的视图对象XMLView。现在，让我们通过组件容器，来实例化了视图。

为此，我们将之前添加的视图依赖项替换为新的sap/ui/core/ComponentContainer依赖项。该组件容器充当应用程序组件的父组件，并处理其属性和导航事件。

创建一个组件容器的实例时，需要指定应用程序的命名空间也即zsapui5.test(它指向项目的webapp文件夹，这是component .js文件所在的位置)。

在这里插入图片描述

调整后的index.js文件效果如下：

sap.ui.define(["sap/ui/core/ComponentContainer"
], function (ComponentContainer) {"use strict";new ComponentContainer({name: "zsapui5.test",settings : {id : "test"},async: true}).placeAt("content");
});

3.5 一般约定

在封装应用程序的组件时，我们应遵循一下约定：

  • 组件名为 Component .js
  • 组件应与应用程序所有UI资源一起，位于webapp文件夹
  • 如果要高效地使用index.html文件，它也位于webapp文件夹中

3.6 运行

运行调整后的程序，效果如下：

在这里插入图片描述

与调整前相比，应用程序的运行效果是相同的。但如果通过ctrl + shift + alt + s打开诊断窗口来查看控件布局，我们可以发现以下不同。

新增的ComponentContainer是XMLView的父控件。
在这里插入图片描述

4. 小结

本文介绍了SAPUI5中组件的概念和封装方式，并通过一个示例展示了其用法。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/43228.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

C# 实现基于exe内嵌HTTPS监听服务、从HTTP升级到HTTPS 后端windows服务

C# 实现基于exe内嵌HTTPS监听服务、从HTTP升级到HTTPS 后端windows服务

由于客户需要把原有HTTP后端服务升级为支持https的服务，因为原有的HTTP服务是一个基于WINDOWS服务内嵌HTTP监听服务实现的，并不支持https, 也不像其他IIS中部署的WebAPI服务那样直接加载HTTPS证书，所以这里需要修改原服务支持https和服务器环…
阅读更多...
JAVA进阶学习11

JAVA进阶学习11

文章目录 一、方法引用1.1 引用静态方法1.2 引用成员方法1.3 引用构造方法1.4 方法引用的其他调用方式1.4.1 使用类名引用成员方法1.4.2 引用数组的构造方法 1.5 总结二、异常2.1 异常的处理2.1.1 JVM虚拟机处理异常2.1.2 try...catch异常处理 2.2 异常中的常见方法2.3 异常的抛…
阅读更多...
Java集合升序降序、转Set的方法

Java集合升序降序、转Set的方法

Collections.sort(list,Comparator.comparing(OcApplySquareVo::getApplyName).reversed()); 集合转set /** 集合转set */Set<String> pkCodeSet rows.stream().map(RailwayWeighBookResult.RailwayWeighBook::getPkCode).collect(Collectors.toSet());
阅读更多...
互联网接入技术的简单介绍

互联网接入技术的简单介绍

引言 要连接到互联网&#xff0c;用户必须先连接到某个ISP&#xff08;互联网服务提供商&#xff09;。接入技术解决的就是用户如何连接到本地ISP的问题&#xff0c;通常称之为“最后一公里”。本文将详细介绍几种主要的互联网接入技术&#xff0c;帮助初学者了解不同的接入方…
阅读更多...
【SOM神经网络的数据分类】SOM神经网络的数据分类的一个小案例

【SOM神经网络的数据分类】SOM神经网络的数据分类的一个小案例

【SOM神经网络的数据分类】SOM神经网络的数据分类的一个小案例 注&#xff1a;本文仅作为自己的学习记录以备以后复习查阅 一 概述 自组织特征映射网络&#xff08;Self-Organizing Feature Map, SOM&#xff09;也叫做Kohonen网络&#xff0c;它的特点是&#xff1a;全连接、…
阅读更多...
【C++深度探索】继承机制详解（二）

【C++深度探索】继承机制详解（二）

hello hello~ &#xff0c;这里是大耳朵土土垚~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#xff1a;大耳朵土土垚的博客 &#x1…
阅读更多...
如何把已经上传到gitlab的代码或者文件夹从git上删掉

如何把已经上传到gitlab的代码或者文件夹从git上删掉

有小伙伴不小心把缓存文件上传到了git&#xff0c;跑来问我&#xff0c;要怎么把这些文件给删掉&#xff0c;这里一共有两种方式&#xff0c; 先说第一种&#xff0c;通过命令删除&#xff0c;终端进入存在这个缓存文件的目录&#xff0c;执行命令ls&#xff0c;可以看到确实有…
阅读更多...
从零开始搭建vite开发环境

从零开始搭建vite开发环境

准备 nodejs 18 pnpm https://vitejs.cn/ 开始 pnpm init pnpm add -D vite新建index.html <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width…
阅读更多...
飞睿智能无线高速uwb安全数据传输模块，低功耗、抗干扰超宽带uwb芯片传输速度技术新突破

飞睿智能无线高速uwb安全数据传输模块，低功耗、抗干扰超宽带uwb芯片传输速度技术新突破

在信息化的时代&#xff0c;数据传输的速度和安全性无疑是每个企业和个人都极为关注的话题。随着科技的飞速发展&#xff0c;超宽带&#xff08;Ultra-Wideband&#xff0c;简称UWB&#xff09;技术凭借其性能和广泛的应用前景&#xff0c;逐渐成为了数据传输领域的新星。今天&…
阅读更多...
JavaScript学习笔记（七）

JavaScript学习笔记（七）

45.9 JavaScript 可迭代对象 可迭代对象&#xff08;Iterables&#xff09;是可以使用 for..of 进行迭代的对象。 从技术上讲&#xff0c;可迭代对象必须实现 Symbol.iterator 方法。 45.9.1 遍历字符串 <body><p id"demo"></p><script>c…
阅读更多...
使用vllm部署大语言模型

使用vllm部署大语言模型

vLLM是一个快速且易于使用的库&#xff0c;用于LLM&#xff08;大型语言模型&#xff09;推理和服务。通过PagedAttention技术&#xff0c;vLLM可以有效地管理注意力键和值内存&#xff0c;降低内存占用和提高计算效率。vLLM能够将多个传入的请求进行连续批处理&#xff0c;从而…
阅读更多...
PTrade常见问题系列5

PTrade常见问题系列5

回测失败&#xff1a;可用资源不足。 回测运行失败&#xff0c;错误码&#xff1a;2 错误信息&#xff1a;可用资源不足&#xff0c;请稍后在创建。 1、之前客户未限制客户容器使用内存和CPU&#xff0c;周末修改配置&#xff0c;限制了内存和CPU&#xff1b; 2、此报错是用户…
阅读更多...
【Python】已解决：FileNotFoundError: [Errno 2] No such file or directory: ‘D:\1. PDF’

【Python】已解决：FileNotFoundError: [Errno 2] No such file or directory: ‘D:\1. PDF’

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决&#xff1a;FileNotFoundError: [Errno 2] No such file or directory: ‘D:\1. PDF’ 一、分析问题背景 在Python编程中&#xff0c;当你尝试打开一个不存在的文件时&…
阅读更多...
索引唯一约束问题SQL

索引唯一约束问题SQL

新增报错违反唯一约束条件 (JING_DIAN.SYS_C0096533) 【问题原因】 这个问题可能是由于在Oracle APEX中&#xff0c;虽然你创建了一个名为"ISEQ_520227"的索引&#xff0c;但是在插入数据时&#xff0c;违反了唯一约束条件。这可能是因为你的数据表中已经存在相同的…
阅读更多...
压测引擎数据库设计（上）

压测引擎数据库设计（上）

压测引擎数据库设计&#xff08;上&#xff09; 引言 在当今快速发展的互联网时代&#xff0c;软件质量保证和性能测试变得尤为重要。自动化测试平台&#xff0c;提供了一套完整的解决方案&#xff0c;以确保软件产品在发布前能够满足性能和稳定性的要求。本文将深入探讨滴云自…
阅读更多...
jmeter-beanshell学习6-beanshell生成测试报告

jmeter-beanshell学习6-beanshell生成测试报告

前面写了各种准备工作&#xff0c;内容组合用起来&#xff0c;应该能做自动化了&#xff0c;最后一步&#xff0c;生成一个报告&#xff0c;报告格式还是csv 报告生成的路径和文件&#xff0c;在用户参数写好&#xff0c;防止以后改路径或者名字&#xff0c;要去代码里面改。以…
阅读更多...
Django自动生成Swagger接口文档 —— Python

Django自动生成Swagger接口文档 —— Python

1. 前言 当接口开发完成&#xff0c;紧接着需要编写接口文档。传统的接口文档通常都是使用Word或者一些接口文档管理平台进行编写&#xff0c;但此类接口文档维护更新比较麻烦&#xff0c;每次接口有变更&#xff0c;需要手动修改接口文档。在实际的工作中&#xff0c;经常会遇…
阅读更多...
tomcat的优化和tomcat和nginx实现动静分离：

tomcat的优化和tomcat和nginx实现动静分离：

tomcat的优化 tomcat自身的优化 tomcat的并发处理能力不强。大项目不使用tomcat做为转发动态的中间件&#xff08;k8s集群&#xff0c;python&#xff0c;rubby&#xff09;&#xff0c;小项目会使用&#xff08;内部使用&#xff09;&#xff0c;动静分离。 优化tomcat的启动…
阅读更多...
Python入门 2024/7/8

Python入门 2024/7/8

目录 数据容器 dict(字典&#xff0c;映射) 语法 定义字典字面量 定义字典变量 定义空字典 从字典中基于key获取value 字典的嵌套 字典的常用操作 新增元素 更新元素 删除元素 清空字典 获取全部的key 遍历字典 统计字典内的元素数量 练习 数据容器的通用操作…
阅读更多...
在公司的业务杂记1之多选部门且主表没有部门字段(子表查询)

在公司的业务杂记1之多选部门且主表没有部门字段(子表查询)

原型 1.新建&#xff0c;上传报告可多选部门 2.查询&#xff0c;可多选部门 数据库&#xff08;Postgresql&#xff09; 方式一 新增字段Jsonb&#xff1a; CREATE TABLE public.admin_report (admin_report_uuid uuid DEFAULT gen_random_uuid() NOT NULL,admin_report_tit…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023