SAPUI5 Walkthrough Step 19: Reuse Dialogs

2021-07-29 17:03:26 阅读：189 来源： 互联网

标签：function Dialogs Reuse 19 js HelloDialog ui oView sap

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();
        }
    });
});

执行后，点击如下所示的两个按钮，都能显示对话框

源码

标签：function,Dialogs,Reuse,19,js,HelloDialog,ui,oView,sap
来源： https://www.cnblogs.com/keyuming/p/15038590.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

SAPUI5 Walkthrough Step 19: Reuse Dialogs