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