SAPUI5基础知识20 - 对话框和碎片(Dialogs and Fragments)

1. 背景

在 SAPUI5 中，Fragments 是一种轻量级的 UI 组件，类似于视图（Views），但它们没有自己的控制器（Controller）。Fragments 通常用于定义可以在多个视图中重用的 UI 片段，从而提高代码的可重用性和模块化程度。

Fragment技术应用场景如下：

  • 代码重用：将常用的 UI 片段（如对话框、表单、工具栏等）定义为 Fragments，以便在多个视图中重用。
  • 模块化开发：将复杂视图分解为多个小的、可重用的 Fragments，提高代码的可维护性。
  • 动态加载：根据用户操作或其他条件动态加载 Fragments，提高应用程序的灵活性。

注1：由于 Fragments 没有自己的控制器，它们会使用嵌入它们的视图的控制器。
注2： Fragments 是一段独立的 UI 代码，可以用 XML、HTML、JSON 或 JavaScript 编写，在SAPUI5中推荐的方式是使用XML。格式要求：以.fragment.xml结尾，例如：FragmentName.fragment.xml。碎片文件的位置应放在视图view文件夹下。

2. 示例

假设我们有一个对话框 DialogFragment，需要在多个视图中使用。

2.1 创建 Fragment

DialogFragment.fragment.xml

<core:FragmentDefinitionxmlns="sap.m"xmlns:core="sap.ui.core"><Dialog id="myDialog" title="My Dialog"><content><VBox><Text text="This is a dialog fragment"/><Input placeholder="Enter something"/></VBox></content><buttons><Button text="OK" press="onDialogOk"/><Button text="Cancel" press="onDialogCancel"/></buttons></Dialog>
</core:FragmentDefinition>

2.2 在视图中使用 Fragment

MainView.view.xml

<mvc:ViewcontrollerName="myApp.controller.MainView"xmlns:mvc="sap.ui.core.mvc"xmlns="sap.m"><Page><content><Button text="Open Dialog" press="onOpenDialog"/></content></Page>
</mvc:View>

MainView.controller.js

sap.ui.define(["sap/ui/core/mvc/Controller","sap/ui/core/Fragment"
], function (Controller, Fragment) {"use strict";return Controller.extend("myApp.controller.MainView", {onOpenDialog: function () {var oView = this.getView();// Check if the fragment is already createdif (!this.byId("myDialog")) {// Load the fragment asynchronouslyFragment.load({id: oView.getId(),name: "myApp.view.DialogFragment",controller: this}).then(function (oDialog) {// Connect dialog to the root view of this component (models, lifecycle)oView.addDependent(oDialog);oDialog.open();});} else {this.byId("myDialog").open();}},onDialogOk: function () {this.byId("myDialog").close();},onDialogCancel: function () {this.byId("myDialog").close();}});
});

3.练习

在前序练习的基础上，让我们为应用程序增加一个对话框，对话框相对特殊，因为它会在常规应用程序内容的顶部弹出，因此并不属于某个特定视图。

这意味着我们需要在控制器的某个位置，完成对话框的实例化。但由于我们想使用声明的方式创建控件，并希望保持可复用性和灵活性，我们将使用fragment技术来创建一个包含对话框的XML碎片。这样，对话框就可以在应用程序的多个视图中使用。

3.1 创建包含对话框的碎片

让我们在视图文件下，新建HelloDialog.fragment.xml碎片文件，在此文件中用声明的方式定义对话框<Dialog>控件。
在这里插入图片描述

碎片资源库位于sap.ui.core的命名空间中，我们在FragmentDefinition标签内部为它添加了一个xml命名空间。

定义Fragment的语法与视图类似，但由于片段没有控制器，因此无需定义该属性。

另外，碎片不在应用程序的DOM树中留下任何痕迹，也没有片段本身的控制实例（只有包含的控件）。 它只是一组可重用控件的容器。

HelloDialog.fragment.xml碎片文件中的代码如下：

<core:FragmentDefinition xmlns="sap.m"xmlns:core="sap.ui.core" ><Dialogid="helloDialog"title="Hello {/recipient/name}"/>
</core:FragmentDefinition>

3.2 在主视图上新增按钮

接下来，让我们在HelloPanel.view.xml视图中添加了一个新按钮<Button>来打开对话框，并指定事件处理函数press=".onOpenDialog"。与此同时，让我们为此按钮控件设置一个id="helloDialogButton"。

将关键控件的唯一ID设置为helloWorldButton是一个好习惯，这样可以方便识别。如果未指定id属性，则OpenUI5运行时会为控件生成唯一但易变的ID，例如"__button23"。在浏览器中检查应用程序的DOM元素，就可以看到差别。

在这里插入图片描述
改动后的HelloPanel.view.xml视图文件内容如下：

<mvc:ViewcontrollerName="zsapui5.test.controller.HelloPanel"xmlns="sap.m"xmlns:mvc="sap.ui.core.mvc"
><PanelheaderText="{i18n>helloPanelTitle}"class="sapUiResponsiveMargin"width="auto"><content><Buttonid="helloDialogButton"text="{i18n>openDialogButtonText}"press=".onOpenDialog"class="sapUiSmallMarginEnd"/><Buttontext="{i18n>showHelloButtonText}"press=".onShowHello"class="myCustomButton"/><Inputvalue="{/recipient/name}"valueLiveUpdate="true"width="60%"/><FormattedTexthtmlText="Hello {/recipient/name}"class="sapUiSmallMargin sapThemeHighligh-asColor myCustomText"/></content></Panel>
</mvc:View>

3.3 实现按钮的事件响应

最后，让我们在控制器文件中，实现按钮的事件响应程序。

新增方法onOpenDialog到HelloPanel.controller.js中。如果片段中的对话框尚不存在，通过调用控制器模块的loadFragment API来实例化该片段。该方法返回一个Promise对象，一旦片段被异步加载完成，该Promise对象会被解析。

在这里插入图片描述
改动后的HelloPanel.controller.js文件内容如下：

sap.ui.define(["sap/ui/core/mvc/Controller","sap/m/MessageToast"
], function (Controller, MessageToast) {"use strict";return Controller.extend("zsapui5.test.controller.HelloPanel", {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);},onOpenDialog: function () {// create dialog lazily if (!this.pDialog) {this.pDialog = this.loadFragment({name: "zsapui5.test.view.HelloDialog"});this.pDialog.then(function (oDialog) {oDialog.open();});}}});
});

3.4 增强i18n

别忘记为新增button的描述维护对应的i18n资源文件。
在这里插入图片描述

改动后的i18n.properties文件如下：

# App Descriptor
appTitle=Hello World
appDescription=A simple app that explains the most important concepts of SAPUI5# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}homePageTitle=homePageTitle
helloPanelTitle=PanelTitle
openDialogButtonText=Say Hello With Dialog

3.5 运行程序

运行改动后的程序，我们可以看到新增的Say Hello With Button按钮。点击按钮后，会在弹出的窗口中显示Hello World。
在这里插入图片描述
目前的这个应用程序还是有些小问题，可见，弹出窗口是无法关闭的。在下一篇博客中，让我们进一步增强Fragment的回调函数，来实现弹出窗口的关闭。

4. 小结

本文介绍了SAPUI5中对话框和碎片的概念，并通过示例展示了其具体用法。

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

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

相关文章

linux系统安装pytorch_中文地址命名实体识别案例

linux系统安装pytorch_中文地址命名实体识别案例

命名实体有关文章参考这篇文章 中文地址命名实体识别训练和预测 win10系统安装cuda环境参考这篇文章 搭建Pytorch的GPU环境超详细 1、下载python https://www.python.org/downloads/release/python-368/ 2、下载python包 https://pypi.org/search/?q=transformers 1、搜…
阅读更多...
如何录制电脑内部声音？全方位介绍电脑录音软件：8款在线录音！（2024重新整理）

如何录制电脑内部声音？全方位介绍电脑录音软件：8款在线录音！（2024重新整理）

如何录制电脑内部声音&#xff1f;不管是娱乐圈还是现实生活&#xff0c;【录音】这个功能的重要性不言而喻。而电脑录音已在影视配音、音视频剪辑、会议记录、在线教育等多个领域发光发热&#xff01; 本文将为您推荐8款电脑录音软件&#xff0c;并详细介绍电脑录音的多种方式…
阅读更多...
Git 从入门到精通：全面掌握版本控制（IntelliJ IDEA 中 Git 的使用指南）

Git 从入门到精通：全面掌握版本控制（IntelliJ IDEA 中 Git 的使用指南）

引言 Git 是目前世界上最流行的版本控制系统&#xff0c;由 Linux 内核的创始人 Linus Torvalds 开发。它不仅拥有强大的分支管理功能&#xff0c;还具备了优秀的合并能力。本文将从 Git 的基本概念开始&#xff0c;逐步深入到 Git 的使用和一些高级技巧。 Git 简介 Git 是一…
阅读更多...
Python番外篇：变量是盒子还是标签

Python番外篇：变量是盒子还是标签

引言 前面通过几十篇文章&#xff0c;大概把Python的一些比较实用的基础做了一些介绍&#xff0c;学会这些&#xff0c;基本能应付日常的小的需求开发了&#xff0c;写一些小工具&#xff0c;提高工作的处理效率。 接下来&#xff0c;准备开始进入一个新的篇章&#xff0c;也…
阅读更多...
del 语句

del 语句

使用 del 语句可以删除任何对象&#xff0c;包括字典对象。删除之后&#xff0c;之前的引用将失效&#xff0c;尝试使用该对象会导致 NameError 错误。因此&#xff0c;删除字典对象的命令是 del myDict。 元组 (Tuple) 元组是不可变的&#xff0c;因此你不能修改元组的内容&a…
阅读更多...
C#如何引用dll动态链接库文件的注释

C#如何引用dll动态链接库文件的注释

1、dll动态库文件项目生成属性中要勾选“XML文档文件” 注意&#xff1a;XML文件的名字切勿修改。 2、添加引用时XML文件要与DLL文件在同一个目录下。 3、如果要是添加引用的时候XML不在相同目录下&#xff0c;之后又将XML文件复制到相同的目录下&#xff0c;需要删除引用&am…
阅读更多...
MySQL之索引优化

MySQL之索引优化

1、在进行查询时&#xff0c;索引列不能是表达式的一部分&#xff0c;也不能是函数的参数&#xff0c;否则无法使用索引 例如下面的查询不能使用 actor_id 列的索引&#xff1a; #这是错误的 SELECT actor_id FROM sakila.actor WHERE actor_id 1 5; 优化方式&#xff1a;…
阅读更多...
微信小程序安装vant组件库和使用

微信小程序安装vant组件库和使用

第一步打开终端输入 npm install vant/weapp --save 第二步 npm cache clean --force 第三步 npm i vant/weapp -S --production 第四步在app.json中的usingComponents输入 "van-button": "vant/weapp/button/index" 第五步直接在页面使用 <v…
阅读更多...
SSM（Spring + Spring MVC + MyBatis）框架面试三道题

SSM（Spring + Spring MVC + MyBatis）框架面试三道题

以下是三道关于SSM&#xff08;Spring Spring MVC MyBatis&#xff09;框架的面试题&#xff0c;由简单到困难进行排列&#xff1a; 1. 简答题&#xff1a;请简述Spring框架的核心特性。 答案&#xff1a; Spring框架的核心特性主要包括以下几个方面&#xff1a; 控制反转…
阅读更多...
当设计模式牵手LLM

当设计模式牵手LLM

模版方法模式 何为模版设计模式 想象一下 如果我们要泡一杯茶 我们要循序渐进地 煮水温杯注水浸茶茶水入杯加点配料 如此&#xff0c;泡茶的工序就完成了&#xff0c;那么模板方法模式&#xff0c;相信各位也有了一定的概念&#xff1a;定义了一个算法的骨架&#xff0c;而…
阅读更多...
UDP的报文结构及其注意事项

UDP的报文结构及其注意事项

1. 概述 UDP&#xff08;User Datagram Protocol&#xff09;是一种无连接的传输层协议&#xff0c;它提供了一种简单的数据传输服务&#xff0c;不保证数据的可靠传输。在网络通信中&#xff0c;UDP通常用于一些对实时性要求较高、数据量较小、传输延迟较低的应用&#xff0c…
阅读更多...
创建一个程序来记录每天的工作日常—6。与chatgpt结合 找一些集 来训练 ，它能自动分类到 其中一个，例如 “打扫卫生” 它会自动分类到 “家务”

创建一个程序来记录每天的工作日常—6。与chatgpt结合 找一些集 来训练 ，它能自动分类到 其中一个，例如 “打扫卫生” 它会自动分类到 “家务”

改进步骤 数据增强&#xff1a;使用GPT模型生成更多的训练数据。使用更高级的模型&#xff1a;使用BERT或其他预训练的语言模型进行文本分类。经验条和经验值显示&#xff1a;在网页端显示当前的经验值&#xff0c;并添加一个经验条。 数据增强和训练数据集 我们可以通过Ope…
阅读更多...
【JVM基础07】——类加载器-什么是类加载器？类加载器有哪些？双亲委派了解吗？

【JVM基础07】——类加载器-什么是类加载器？类加载器有哪些？双亲委派了解吗？

目录 1- 引言&#xff1a;类加载器1-1 类加载器是什么&#xff1f;(What)1-2 为什么要用类加载器&#xff1f; 作用&#xff1a;类加载的过程&#xff1f;(Why) 2- ⭐核心&#xff1a;类加载器详解(How)2-1 类加载器分类2-2 什么是双亲委派模型&#xff1f;2-3 为什么采用双亲委…
阅读更多...
Pytorch基础：Tensor的squeeze和unsqueeze方法

Pytorch基础：Tensor的squeeze和unsqueeze方法

相关阅读 Pytorch基础https://blog.csdn.net/weixin_45791458/category_12457644.html?spm1001.2014.3001.5482 在Pytorch中&#xff0c;squeeze和unsqueeze是Tensor的一个重要方法&#xff0c;同时它们也是torch模块中的一个函数&#xff0c;它们的语法如下所示。 Tensor.…
阅读更多...
【SpringBoot】1 Gitee

【SpringBoot】1 Gitee

本项目 Gitee 地址&#xff1a;https://gitee.com/Lin_DH/system idea中可能装个gitee的插件&#xff0c;这样操作起来比较方便。 1&#xff09;登录 Gitee 官网&#xff08;https://gitee.com/&#xff09;&#xff0c;新建仓库。 2&#xff09;复制新建的 Gitee 仓库地址&am…
阅读更多...
Unity3D之TextMeshPro使用

Unity3D之TextMeshPro使用

文章目录 1. TextMeshPro简介2. TextMeshPro创建3. TextMeshPro脚本中调用4. TextMeshPro字体设置及中文支持过程中出现的一些问题 1. TextMeshPro简介 【官网文档】https://docs.unity.cn/cn/2020.3/Manual/com.unity.textmeshpro.html TextMeshPro 是 Unity 的最终文本解决…
阅读更多...
软件测试---Linux

软件测试---Linux

Linux命令使用&#xff1a;为了将来工作中与服务器设备进行交互而准备的技能&#xff08;远程连接/命令的使用&#xff09;数据库的使用&#xff1a;MySQL&#xff0c;除了查询动作需要重点掌握以外&#xff0c;其他操作了解即可什么是虚拟机 通过虚拟化技术&#xff0c;在电脑…
阅读更多...
第九十七周周报

第九十七周周报

学习时间&#xff1a; 2024.7.20-2024.7.26 学习产出&#xff1a; 这周科研暂时没有进展&#xff0c;因为服务器这周都进不去&#xff0c;周一的时候上周跑的节点还被停了&#xff08;机房太热&#xff09;&#xff0c;然后这周主要在改吉安县小程序的bug&#xff0c;因为要…
阅读更多...
刷新当前页面

刷新当前页面

一, reload 直接刷新页面 window.location.reload(); $router.go(0);相当于按了 F5, 因此缺点也很明显, 体验感不佳, 因为要加载所有页面资源相对较慢, 比较耗时. 二, Vue Router 刷新当前页面 这个时候, 我们通过 $router.push 一个 refresh 路由的形式实现, 具体步骤如下:…
阅读更多...
Leetcode49. 字母异位词分组(java实现)

Leetcode49. 字母异位词分组(java实现)

今天我来给大家分享的是leetcode49的解题思路&#xff0c;题目描述如下 如果没有做过leetcode242题目的同学&#xff0c;可以先把它做了&#xff0c;会更好理解异位词的概念。 本道题的大题思路是&#xff1a; 首先遍历strs&#xff0c;然后统计每一个数组元素出现的次数&#…
阅读更多...
最新文章

Copyright @ 2022~2023