乐趣区

关于sap:SAP-UI5-里的-Busy-Dialog-控件使用概述

sap.m.BusyDialog 用于批示零碎正忙。当显示 Busy 对话框时,整个应用程序被会阻止,无奈进行任何新的操作。

Busy Dialog 蕴含下列几个组成部分,其中大部分是可选的。

  • title – 对话框的题目。默认状况下,没有题目。
  • text – 显示在 Busy Dialog 上方的文本。
  • showCancelButton – 一个可选的勾销按钮,用于进行执行。
  • customIcon – 用作繁忙动画的可选代替图标。

Busy Dialog 的应用场合

  • 操作继续超过一秒。
  • 心愿在页面到页面导航(轻量级版本)中批示页面的加载过程。
  • 如果遇见到后盾过程的运行可能会超过 10 秒,请提供勾销按钮。
  • 如果不显示题目或文本,请应用不可见文本控件 (Invisible Control) 为用户提供提醒,让用户晓得以后是由后盾过程在执行。

不应该应用 Busy Dialog 的场合

  • 屏幕不应该被阻塞。这种状况下,对特定的应用程序局部,应该应用 sap.m.BusyIndicator。
  • 不要应用 Busy Dialog 的题目属性。以文本模式提供形容操作的准确文本。

看个具体的例子:

弹出 Busy Dialog 的按钮:

<mvc:View
    controllerName="sap.m.sample.BusyDialog.C"
    xmlns="sap.m"
    xmlns:l="sap.ui.layout"
    xmlns:mvc="sap.ui.core.mvc">
    <l:VerticalLayout class="sapUiContentPadding" width="100%">
        <Button
            text="Show Busy Dialog"
            press="onOpenDialog"
            class="sapUiSmallMarginBottom"
            ariaHasPopup="Dialog" />
    </l:VerticalLayout>
</mvc:View>

Busy Dialog 的 fragment:

<core:FragmentDefinition
    xmlns="sap.m"
    xmlns:core="sap.ui.core">
    <BusyDialog
        title="Loading Data"
        text="... now loading the data from a far away server"
        showCancelButton="true"
        close="onDialogClosed" />
</core:FragmentDefinition>

控制器代码:

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

    var iTimeoutId;

    return Controller.extend("sap.m.sample.BusyDialog.C", {onOpenDialog: function () {
            // load BusyDialog fragment asynchronously
            if (!this._pBusyDialog) {
                this._pBusyDialog = Fragment.load({
                    name: "sap.m.sample.BusyDialog.BusyDialog",
                    controller: this
                }).then(function (oBusyDialog) {this.getView().addDependent(oBusyDialog);
                    syncStyleClass("sapUiSizeCompact", this.getView(), oBusyDialog);
                    return oBusyDialog;
                }.bind(this));
            }

            this._pBusyDialog.then(function(oBusyDialog) {oBusyDialog.open();
                this.simulateServerRequest();}.bind(this));
        },

        simulateServerRequest: function () {
            // simulate a longer running operation
            iTimeoutId = setTimeout(function() {this._pBusyDialog.then(function(oBusyDialog) {oBusyDialog.close();
                });
            }.bind(this), 3000);
        },

        onDialogClosed: function (oEvent) {clearTimeout(iTimeoutId);

            if (oEvent.getParameter("cancelPressed")) {MessageToast.show("The operation has been cancelled");
            } else {MessageToast.show("The operation has been completed");
            }
        }

    });
});
退出移动版