在这一步中，我们将进一步研究另一个可以用来组装视图的元素:the fragment。
片段是轻量级UI部件(UI子树)，可以重用，但是没有任何控制器。这意味着,每当你想定义一个特定UI的一部分是跨多个视图重用,或者当你想交换部分视图对彼此在某些情况下(不同的用户角色,编辑模式vs只读模式),一个片段是一个很好的候选人,特别是在不需要额外的控制器逻辑。
一个片段可以由1到n个控件组成。在运行时，放在视图中的片段的行为类似于“普通"normal视图内容，这意味着片段中的控件在呈现时将被包含到视图的DOM中。当然，有些控件并不是设计为成为视图的一部分，例如对话框。
但即使对于这些控件，片段也可能特别有用，稍后您将看到这一点。
我们现在将添加一个对话框到我们的应用程序。对话框是特殊的，因为它们打开在常规应用程序内容之上，因此不属于特定的视图。这意味着对话框必须在控制器代码的某个地方实例化，但是，由于我们希望坚持声明性方法，并创建尽可能灵活的可重用工件，而且不能将对话框指定为视图，因此我们将创建包含对话框的XML片段。毕竟，对话框可以在应用程序的多个视图中使用。
Preview
A dialog opens when the new “Say Hello With Dialog” button is clicked
Coding
You can view and download all files at Walkthrough - Step 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>
我们向视图添加一个新按钮来打开对话框。它只调用面板内容视图控制器中的事件处理函数。我们将需要新的id="helloDialogButton"在Step 29: Integration Test with OPA.
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文件，以声明方式在片段中定义对话框。片段资产位于核心名称空间中，因此我们在片段定义标记FragmentDefinition中为其添加了一个xml名称空间。
语法类似于视图，但由于片段没有控制器，因此缺少此属性。此外，片段在应用程序的DOM树中没有任何占用空间，而且片段本身没有控件实例(只有包含的控件)。它只是一组重用控件的容器。
我们还为对话框添加了一个id，以便能够从HelloPanel控制器访问对话框。
webapp/controller/HelloPanel.controller.js
sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/m/MessageToast" ], function (Controller, MessageToast) { "use strict"; return Controller.extend("sap.ui.demo.walkthrough.controller.HelloPanel", { onShowHello : function () { … }, onOpenDialog : function () { var oView = this.getView(); var oDialog = oView.byId("helloDialog"); // create dialog lazily if (!oDialog) { // create dialog via fragment factory oDialog = sap.ui.xmlfragment(oView.getId(), "sap.ui.demo.walkthrough.view.HelloDialog"); oView.addDependent(oDialog); } oDialog.open(); } }); });
▪ HelloPanel视图的ID如果片段中的对话框还不存在，则通过调用sa .ui实例化片段。xmlfragment方法，参数如下:
这个参数用于在片段中的id前面加上前缀。在这里，我们为对话框控件定义了ID helloDialog，我们可以通过调用oView.byId(“helloDialog”)通过视图访问对话框。这确保了即使您以相同的方式在其他视图中实例化相同的片段，每个对话框也将拥有其惟一的ID，该ID将从视图ID和对话框ID连接起来。使用惟一id非常重要，因为重复的id会导致框架中的错误。
▪片段定义的路径
我们将对话框添加为“依赖于”要连接到视图模型的生命周期的视图。一个方便的副作用是，当视图被销毁时，对话框将自动被销毁。否则，我们将不得不手动销毁对话框以释放其资源。
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 dialogCloseButtonText=Ok
文本包由两个用于打开按钮和对话框关闭按钮的新文本扩展。
Conventions
▪始终使用addDependent方法将对话框连接到视图的生命周期管理和数据绑定，即使它没有添加到它的UI树中。
▪私有函数和变量应该总是以下划线开始。
Parent topic: Walkthrough
Previous: Step 15: Nested Views
Next: Step 17: Fragment Callbacks
Related Information