第16步:对话框和片段

最新推荐文章于 2025-10-08 13:10:55 发布

翻译最新推荐文章于 2025-10-08 13:10:55 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

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

SAPUI5 专栏收录该内容

40 篇文章

订阅专栏

本文档介绍了如何在SAP UI5应用中利用片段（Fragment）实现可重用的对话框。片段允许开发者定义可跨多个视图复用的UI部分，而无需额外的控制器逻辑。对话框作为特殊控件，不隶属于特定视图，但可以通过片段在多个视图间共享。文中详细展示了如何创建一个XML片段来定义对话框，以及如何在控制器中懒加载和管理对话框的生命周期。

说明

片段是轻量级的UI部件(UI子树)，可以重用，但没有任何控制器。这意味着,当你想要定义UI的某个部分可以跨多个视图重用时,或者当你想在某些情况下相互交换视图的某些部分时（不同的用户角色，编辑模式vs只读模式），片段是一个很好的选项，特别是在不需要额外的控制器逻辑情况下。

一个片段可以包含1到n个控件。在运行时，放置在视图中的片段的行为类似于“正常的”视图内容，这意味着片段中的控件只会在渲染时被包含到视图的DOM中。当然，有些控件并不是为了成为视图的一部分而设计的，例如对话框。

但即使对于这些控件，片段也可能特别有用，稍后您将看到这一点。

我们现在将添加一个对话框到我们的应用程序。对话框是特殊的，因为他们打开在常规的应用程序内容之上，因此不属于一个特定的视图。这意味着对话框必须在控制器代码的某个地方实例化，但由于我们希望坚持声明性方法并创建尽可能灵活的可重用工件，而且由于对话框不能指定为视图，我们将创建一个包含对话框的XML片段。毕竟，一个对话框可以在应用的多个视图中使用。

预览

在这里插入图片描述

当点击新的“Say Hello WIth Dialog”按钮时，一个对话框打开

代码

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

webapp/view/HelloPanel.view.xml
在这里插入图片描述

<mvc:View
   controllerName="sap.ui.demo.walkthrough.controller.HelloPanel"
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Panel
      headerText="{i18n>helloPanelTitle}"
      class="sapUiResponsiveMargin"
      width="auto" >
      <content>
      <Button
         id="helloDialogButton"
         text="{i18n>openDialogButtonText}"
         press=".onOpenDialog"
         class="sapUiSmallMarginEnd"/>

      <Button
         text="{i18n>showHelloButtonText}"
         press=".onShowHello"
         class="myCustomButton"/>
      <Input
         value="{/recipient/name}"
         valueLiveUpdate="true"
         width="60%"/>
      <FormattedText
         htmlText="Hello {/recipient/name}"
         class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/>
      </content>
   </Panel>
</mvc:View>

我们向视图添加一个新按钮来打开对话框。它只是在面板的内容视图的控制器中调用一个事件处理函数。在步骤29:与OPA的集成测试中，我们将需要新的id=“helloDialogButton”。

为应用程序的关键控件设置一个唯一的ID(如helloWorldButton)是一种很好的做法，以便容易识别。如果属性’ id ‘没有指定，OpenUI5运行时会为控件生成唯一的但会改变的id，比如’ __button23 '。在浏览器中检查应用程序的DOM元素，看看它们之间的区别。

webapp/view/HelloDialog.fragment.xml (New)

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

我们添加一个新的XML文件，以声明的方式在片段中定义我们的对话框。片段资产位于core命名空间中，因此我们在FragmentDefinition标签中为它添加一个xml命名空间。

语法类似于视图，但由于片段没有控制器，因此该属性缺失。同样，片段在应用程序的DOM树中没有任何内存占用(footprint)，并且片段本身没有控件实例(只有包含的控件)。它只是一组重用控件的容器。

我们还为对话框添加了一个id，以便能够从HelloPanel控制器访问对话框。

webapp/controller/HelloPanel.controller.js
在这里插入图片描述

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast",
	"sap/ui/core/Fragment"
], function (Controller, MessageToast, Fragment) {
	"use strict";

	return Controller.extend("sap.ui.demo.walkthrough.controller.HelloPanel", {

		onShowHello : function () {
			…
		},
		onOpenDialog : function () {
			var oView = this.getView();

			// create dialog lazily
			if (!this.pDialog) {
				this.pDialog = Fragment.load({
					id: oView.getId(),
					name: "sap.ui.demo.walkthrough.view.HelloDialog"
				}).then(function (oDialog) {
					// connect dialog to the root view of this component (models, lifecycle)
					oView.addDependent(oDialog);
					return oDialog;
				});
			} 
			this.pDialog.then(function(oDialog) {
				oDialog.open();
			});
		}

	});
});

如果片段中的对话框还不存在，则通过调用Fragment来实例化片段。使用以下参数加载API:

HelloPanel视图的ID
这个参数用于给片段内的id加上前缀。在这里，我们已经为Dialog控件定义了ID helloDialog，并且我们可以通过调用oView.byId(“helloDialog”)来通过视图访问该对话框。这可以确保，即使你在其他视图中以相同的方式实例化相同的片段，每个对话框都有其唯一的ID，该ID由视图ID和对话框ID连接起来。

使用唯一的id很重要，因为重复的id会导致框架中的错误。
片段的名称

我们把对话框作为“dependent”添加在视图上，以连接到视图模型的生命周期。一个方便的副作用是，当视图被销毁时，对话框将自动被销毁。否则，我们将不得不手动销毁对话框以释放其资源。

约定

始终使用addDependent方法将对话框连接到视图的生命周期管理和数据绑定，即使它没有被添加到它的UI树中。
私有函数和变量应该总是以下划线开头。

webapp/i18n/i18n.properties
在这里插入图片描述

# App Descriptor
appTitle=Hello World
appDescription=A simple walkthrough app that explains the most important concepts of SAPUI5

# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}
homePageTitle=Walkthrough
helloPanelTitle=Hello World
openDialogButtonText=Say Hello With Dialog

我们将open button的新文本添加到文本包中。

章节