BusyIndi​​cator用于在页面之间导航

Question

我是SAPUI5的新手并且还在学习很多东西。 实际上我正试图在两个不同的视图之间进行导航时建立一个busydialog。

我已经定义了busydialog并在按下导航按钮后将其设置在按下事件上。对话框正在显示，但我不确定关于close事件的处理。我认为onMatchedRoute可以帮助我，但对话框没有关闭。我的第一页控制器如下：

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/core/format/NumberFormat",
    "sap/m/BusyDialog"
], function(Controller, NumberFormat) {
    "use strict";
var BusyDialogGlobal;
    return Controller.extend("sap.turbo.ma.mc.controller.region.americas.AmFinance", {

onInit: function() {
        BusyDialogGlobal = new sap.m.BusyDialog("GlobalBusyDialog",{title:"Please wait. . . "});
onHomePress: function() {
        var oRouter = this.getOwnerComponent().getRouter();
        oRouter.navTo("home");
        var getDialog = sap.ui.getCore().byId("GlobalBusyDialog");  
        getDialog.open();  

这部分正在运作。在加载第二页/视图后，我不确定进一步处理部件以关闭busydialog。也许某人有一个小片段或例子可以帮助我在这里？

Answer 1

您没有在全球范围内定义“BusyDialogGlobal”。它在此视图的控制器范围中定义。因此，在您的第二个视图中，您可能无法访问它。

你可以在这里做两种方法（按照我认为更好的顺序）：

选项1

构建扩展自定义“基本控制器”的所有控制器，这样您就可以从所有子控制器访问其功能。为此，创建一个普通的控制器，从sap / ui / core / mvc / Controller扩展。例如，将其命名为“BaseController”并将其保存在controllers文件夹中。然后创建从BaseController扩展的所有视图控制器。像这样：

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

    return Controller.extend("mynamespace.controller.BaseController", {

       onInit: function(){
          this.BusyDialogGlobal = new sap.m.BusyDialog("GlobalBusyDialog",{title:"Please wait. . . "});
       },

       presentBusyDialog(){
          this.BusyDialogGlobal.open()
       }

       dismissBusyDialog(){
          this.BusyDialogGlobal.close()
       }

    }
});

然后在你的view1.controller.js：

sap.ui.define([
    "mynamespace/controller/BaseController"
], function (BaseController) {
    "use strict";

    return BaseController.extend("mynamespace.controller.View1", {

       onNavigate: function(){
          //Do your navigation logic here
          //...
          this.presentBusyDialog();
       }
    }
});

在你的View2.controller.js

中

sap.ui.define([
    "mynamespace/controller/BaseController"
], function (BaseController) {
    "use strict";

    return BaseController.extend("mynamespace.controller.View2", {

       onInit: function(){
          this.dismissBusyDialog();
       }
    }
});

选项2

更简单但不那么优雅，只需在Component范围内实例化busyDialog，并在需要时从该范围中检索它。

从视图控制器实例化它：

this.getOwnerComponent().BusyDialogGlobal = new sap.m.BusyDialog("GlobalBusyDialog",{title:"Please wait. . . "});

在需要时从任何视图控制器打开它：

this.getOwnerComponent().BusyDialogGlobal.open()

在需要时从任何视图控制器关闭它：

this.getOwnerComponent().BusyDialogGlobal.close()