SAPUI5 Walkthrough Step 17: Fragment Callbacks

https://sapui5.hana.ondemand.com/#/topic/354f98ed2b514ba9960556333428d35e

 

 

在这一步中，我们要在对话框上增加按钮，并实现关闭对话框。

修改webapp/view/HelloDialog.fragment.xml文件，增加beginButton按钮容器，并在其中增加 Button， 文本使用i18n文件中的 dialogCloseButtonText， 处理事件为 onCloseDialog

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
    <Dialog id="helloDialog" title="Hello">
        <beginButton>
            <Button text="{i18n>dialogCloseButtonText}" press=".onCloseDialog"/>
        </beginButton>
    </Dialog>
</core:FragmentDefinition>

 

修改webapp/controller/HelloPanel.controller.js文件， 增加onCloseDialog事件的实现

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() {
                ......
        },
        onCloseDialog : function () {
            this.oDialog.close();  //根据全局变量oDialog来关闭对话框
            //this.byId("helloDialog").close(); //根据页面组件ID来关闭对话框
        }
    });
});

修改 webapp/i18n/i18n.properties文件， 增加文本

dialogCloseButtonText=Ok

执行结果如下，点击“OK”后对话框关闭