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

  });
});