IT干货网

UI5-文档-4.16-Dialogs and Fragments

luoye 2022年03月09日 SAP 179 0

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


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

UI5-文档-4.15-Nested Views