SAPUI5基础知识21 - 碎片回调函数(Fragments Callbacks)

1. 背景

在上一篇博客中，我们通过创建fragment的方式，实现了一个可以复用的对话框，并将其集成在我们的应用程序中。

在本篇博客中，让我们进一步增强一下这个程序，为弹出的对话框添加一个按钮，以实现对话框的关闭。

2. 练习

2.1 创建关闭对话框的事件响应程序

首先，为关闭对话框的事件，在控制器HelloPanel.controller.js文件中创建事件处理程序函数onCloseDialg，它使用byId函数获取对话框的实例，并使用close函数来关闭对话框。

改动后的HelloPanle.controller.js文件内容如下：

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

    return Controller.extend("zsapui5.test.controller.HelloPanel", {
        onShowHello: function () {
            // read msg from i18n model
            const oBundle = this.getView().getModel("i18n").getResourceBundle();
            const sRecipient = this.getView().getModel().getProperty("/recipient/name");
            const sMsg = oBundle.getText("helloMsg", [sRecipient]);

            // show message
            MessageToast.show(sMsg);
        },

        onOpenDialog: function () {
            // create dialog lazily 
            if (!this.pDialog) {
                this.pDialog = this.loadFragment({
                    name: "zsapui5.test.view.HelloDialog"
                });
            }
                this.pDialog.then(function (oDialog) {
                    oDialog.open();
                });
        },

        onCloseDialog: function () {
            //note: we don't need to chain to the pDialog promise, since this event handler 
            // is only called form within the loaded dialog itself.
            this.byId("helloDialog").close();
        }

    });
});

2.2 添加关闭按钮

接下来，让我们在fragment的定义中，添加一个按钮，用于关闭对话框。

打开HelloDialog.fragment.xml文件，在对话框<Dialog>控件的<beginButton>聚合中，添加<Button>控件，并指定控件的press事件的处理程序为onCloseDialog。

fragment中定义的内容，会通过 loadFragment 函数加载出来；加载完毕后，当用户点击fragment中定义的对话框中包含的<Button>控件后，控件的事件处理程序onCloseDialog会被触发。

注：对话框控件有一个名为 beginButton 的聚合以及 endButton的聚合。在这两个聚合中放置按钮会确保将beginButton 中包含的按钮放在 endButton中包含按钮的前面。
但需要了解的是，有关before的具体含义，将会取决于当前语言的文本方向。因此，这里SAPUI5使用术语是begin和end，而非left和right。因为，在从左到右方向的语言中，beginButton 将向左渲染；若在从右到左模式下，渲染的顺序则会相反。

改动后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>

2.3 增强i18n

最后，别忘了在i18n文件中，维护新按钮的文本内容。

改动后的i18n文件内容如下：

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

# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}

homePageTitle=homePageTitle
helloPanelTitle=PanelTitle
openDialogButtonText=Say Hello With Dialog
dialogCloseButtonText=Ok

2.4 运行程序

让我们运行一下改动后的程序，效果如下：

点击SayHelloWithDialog按钮会，会在弹出的窗口中显示Hello World，并且在弹出窗口中有一个新的OK的按钮，点击OK按钮后，会关闭对话框。

3. 小结

本文介绍了SAPUI5中Fragment的用法，并通过一个示例展示了如何加载Fragment，如何为Fragment中的事件定义处理函数。