UI5-文档-4.16-Dialogs and Fragments

在这一步中，我们将进一步研究另一个可以用来组装视图的元素: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

Reusing UI Parts: Fragments

Dialogs and other Popups as Fragments

API Reference:sap.ui.core.Fragment