UI5-文档-4.17-Fragment Callbacks

现在我们已经集成了对话框，是时候添加一些用户交互了。用户肯定希望在某个时候再次关闭对话框，因此我们添加一个按钮来关闭对话框并分配一个事件处理程序。

Preview

 

The dialog now has an "OK" button

Coding

You can view and download all files at Walkthrough - Step 17.

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 () {

                       // read msg from i18n model

                       var oBundle = this.getView().getModel("i18n").getResourceBundle();

                       var sRecipient = this.getView().getModel().getProperty("/recipient/name");

                       var sMsg = oBundle.getText("helloMsg", [sRecipient]);

 

                       // show message

                       MessageToast.show(sMsg);

               },

 

               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", this);

                               // connect dialog to view (models, lifecycle)

                               oView.addDependent(oDialog);

                       }

 

                       oDialog.open();

               },

 

               onCloseDialog : function () {

                       this.getView().byId("helloDialog").close();

               }

        });

});

如前所述，片段是纯UI重用工件，没有控制器。ui的第三个参数 xmlfragment函数是可选的，它允许将引用传递给(控制器)对象。在我们的对话框中，我们引用HelloPanel控制器。然而，第三个参数不一定是控制器，但可以是任何对象。只是不要忘记这个关键字。

事件处理程序函数被放入相同的控制器文件中，它通过访问返回对话框的内部助手函数来关闭对话框。

 

webapp/view/HelloDialog.fragment.xml

 

<core:FragmentDefinition

   xmlns="sap.m"

   xmlns:core="sap.ui.core" >

   <Dialog

      id="helloDialog"

      title ="Hello {/recipient/name}">

      <beginButton>

         <Button

            text="{i18n>dialogCloseButtonText}"

            press="onCloseDialog"/>

      </beginButton>

   </Dialog>

</core:FragmentDefinition>

在片段定义中，我们将一个按钮添加到对话框的beginButton聚合中。press处理程序引用的是一个名为onCloseDialog的事件处理程序，由于我们传递了对HelloPanel控制器的引用，所以在按下按钮时将在那里调用该方法。该对话框有一个名为beginButton和endButton的聚合。在这两个聚合中放置按钮可以确保beginButton位于UI上的endButton之前。然而，before的含义取决于当前语言的文本方向。因此，我们使用术语开始和结束作为“左”和“右”的同义词。在从左到右方向的语言中，beginButton将呈现在左边，endButton位于对话框页脚的右边;在特定语言的从右到左模式中，顺序是交换的。

 

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

文本包由两个用于打开按钮和对话框关闭按钮的新文本扩展。

 

Parent topic: Walkthrough

Previous: Step 16: Dialogs and Fragments

Next: Step 18: Icons

Related Information

Reusing UI Parts: Fragments

Instantiation of Fragments