sap.m.BusyDialog 用於指示系統正忙。當顯示 Busy 對話方塊時，整個應用程式被會阻止，無法進行任何新的操作。

Busy Dialog 包含下列幾個組成部分，其中大部分是可選的。

- title - 對話方塊的標題。 預設情況下，沒有標題。
- text - 顯示在Busy Dialog 上方的文字。
- showCancelButton - 一個可選的取消按鈕，用於停止執行。
- customIcon - 用作忙碌動畫的可選替代圖示。

# Busy Dialog 的使用場合

- 操作持續超過一秒。
- 希望在頁面到頁面導航（輕量級版本）中指示頁面的載入過程。
- 如果遇見到後臺程式的執行可能會超過 10 秒，請提供取消按鈕。
- 如果不顯示標題或文字，請使用不可見文字控制元件(Invisible Control)為使用者提供提示，讓使用者知道當前是由後臺程式在執行。

# 不應該使用 Busy Dialog 的場合

- 螢幕不應該被阻塞。 這種情況下，對特定的應用程式部分，應該使用 sap.m.BusyIndicator。
- 不要使用 Busy Dialog 的標題屬性。 以文字形式提供描述操作的精確文字。

看個具體的例子：

![](https://img-blog.csdnimg.cn/img_convert/2768319b77c15edef4d4dd298a75048d.png)

彈出 Busy Dialog 的按鈕：
```xml
<view controllername="sap.m.sample.BusyDialog.C" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc">
	<verticallayout class="sapUiContentPadding" width="100%">
		<button text="Show Busy Dialog" press="onOpenDialog" class="sapUiSmallMarginBottom" ariahaspopup="Dialog"></button>
	</verticallayout>
</view>
```
Busy Dialog 的 fragment：

```xml
<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"></busydialog>
</fragmentdefinition>

```
控制器程式碼：

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

});
});
```

SAP UI5 裡的 Busy Dialog 控制元件使用概述

相關文章