SAPUI5 Walkthrough Step 19: Reuse Dialogs

转载

mb5fe55b6d43deb 2021-07-29 16:52:00

文章标签 SAPUI5 json mvc xml ico 文章分类 代码人生

https://sapui5.hana.ondemand.com/#/topic/19453962b8074b7399372c65cbe05370

在第16步中，我们创建了一个fragment对话框，以使它可以跨视图或整个应用程序重用。但是我们打开和关闭对话框的逻辑放在HelloPanel视图的控制器中。坚持这种方法需要将代码复制并粘贴到需要对话框的每个视图的控制器上。这将导致代码的冗余。

在这一步中，我们将解决这个问题：我们新增 HelloDialog.js文件，来控制我们的对话框，并在component.js中引 HelloDialog.js。

新增 webapp/controller/HelloDialog.js 文件，在里面编写打开Dialog的逻辑 —— open() 方法

sap.ui.define([
    "sap/ui/base/ManagedObject",
    "sap/ui/core/Fragment"
], function(ManagedObject, Fragment) {
    "use strict";

    return ManagedObject.extend("sap.ui.demo.walkthrough.controller.HelloDialog", {
        constructor: function(oView) {
            this._oView = oView;
        },
        exit: function() {
            delete this._oView;
        },
        open: function() {
            var oView = this._oView;
            if (!this.oDialog) {
                var oFragmentController = {
                    onCloseDialog: function() {
                        oView.byId("helloDialog").close();
                    }
                };
                this.oDialog = sap.ui.xmlfragment(
                    this._oView.getId(),
                    "sap.ui.demo.walkthrough.view.HelloDialog",
                    oFragmentController
                );
                this._oView.addDependent(this.oDialog);
            }
            this.oDialog.open();
        }
    });
});

修改webapp/component.js文件，对我们新建的 HelloDialog.js文件进行引用，并调用其中的 open() 方法来打开对话框

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/Device",
    "sap/ui/demo/walkthrough/model/models",
    "sap/ui/model/json/JSONModel",
    "./controller/HelloDialog"
], function(UIComponent, Device, models, JSONModel, HelloDialog) {
    "use strict";
    return UIComponent.extend("sap.ui.demo.walkthrough.Component", {
        metadata: {
            manifest: "json"
        },

        init: function() {
            // call the base component's init function
            UIComponent.prototype.init.apply(this, arguments);
            // set the device model
            this.setModel(models.createDeviceModel(), "device");
            // 给Component组件 设置模型jsonModel
            var oJsonData = { recipient: { name: "World" } };
            var oJSONModel = new JSONModel(oJsonData);
            this.setModel(oJSONModel, "jsonModel");
            //
            this._helloDialog = new HelloDialog(this.getRootControl());
        },

        openHelloDialog: function() {
            this._helloDialog.open();
        },

        exit: function() {
            this._helloDialog.destroy();
            delete this._helloDialog;
        }
    });
});

修改 webapp/controller/HelloPanel.controller.js 文件，调用 component.js 中的 openHelloDialog()方法来实现对话框的打开

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() {
            var oBundle = this.getView().getModel("i18n").getResourceBundle();
            var sRecipient = this.getView().getModel("jsonModel").getProperty("/recipient/name");
            var sMsg = oBundle.getText("helloMsg", [sRecipient]);
            MessageToast.show(sMsg);
        },
        onOpenDialog : function () {
            this.getOwnerComponent().openHelloDialog();
        }
    });
});

修改 webapp/view/App.view.xml 文件，在Page的头部增加按钮和处理事件 onOpenDialog

<mvc:View controllerName="sap.ui.demo.walkthrough.controller.App" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true" xmlns="sap.m">
    <Shell>
        <App class="myAppDemoWT">
            <pages>
                <Page title="{i18n>title}">
                    <headerContent>
                        <Button icon="sap-icon://hello-world" press=".onOpenDialog"/>
                    </headerContent>
                    <content>
                        <mvc:XMLView viewName="sap.ui.demo.walkthrough.view.HelloPanel"/>
                    </content>
                </Page>
            </pages>
        </App>
    </Shell>
</mvc:View>

修改 webapp/controller/App.controller.js 文件，增加 onOpenDialog 的实现（即对 component.js 中， openHelloDialog()的调用）

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

    return Controller.extend("sap.ui.demo.walkthrough.controller.App", {

        onOpenDialog: function() {
            this.getOwnerComponent().openHelloDialog();
        }
    });
});