当前位置: 首页 > news >正文

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 实现按钮的事件响应

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

新增方法onOpenDialogHelloPanel.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();});}});
});

只有当promise被resolve(=片段被加载)时,才会触发.then中的代码(oDialog.open())。在第二次调用时,由于fragment已经加载,所以loadFrament不会再被调用,但是promise本身仍然被resolve,所以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.lryc.cn/news/410229.html

相关文章:

  • express连接mysql
  • 24暑假算法刷题 | Day24 | LeetCode 93. 复原 IP 地址,78. 子集,90. 子集 II
  • Postman本地化测试全攻略:打造多语言API的秘诀
  • 摆弄it:越走越深
  • 网页上空格
  • Linux服务管理(四)Apache服务
  • Qt基础 | TCP通信 | TCP服务端与客户端程序设计 | QTcpServer | QTcpSocket
  • 设计模式实战:订单处理系统的设计与实现
  • [论文笔记]思维链提示的升级版——回退提示
  • 【Redis进阶】主从复制
  • 编程类精品GPTs
  • ubuntu在命令行输出里查找内容,dmesg
  • 图片url处理(带http和不带http)方法
  • Git(分布式版本控制系统)、Gitlab、分支、分支冲突
  • dockerfile部署镜像 ->push仓库 ->虚拟机安装建木 ->自动部署化 (详细步骤)
  • Android串口开发及读取完整数据的解决方法
  • java之对象向下转型
  • ElasticSearch核心之DSL查询语句实战
  • Axure中继器:数据动态展示的强大工具
  • QT--聊天室
  • Javascript前端面试基础4【每日学习并更新10】
  • 社区团购系统搭建开发,前端uniapp。社区团购搭建开发定制
  • node+mysql+layui+ejs实现左侧导航栏菜单动态显示
  • FRP配置内网穿透52版本以上适用
  • IFM易福门LR3000LR3300液位传感器操作说明
  • 【Python大语言模型系列】基于阿里云人工智能平台采用P-Tuning v2微调ChatGLM2-6B大模型(完整教程)
  • 基于Spring boot + Vue的加油站系统
  • ️RPC协议 --基于TCP实现RPC通信
  • android(安卓)最简单明了解释版本控制之MinSdkVersion、CompileSdkVersion、TargetSdkVersion
  • Redis缓存穿透、击穿和雪崩的理解和解决思路