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");
}
}
});
});
标签:function,控件,oBusyDialog,BusyDialog,Busy,UI5,Dialog,sap 来源: https://www.cnblogs.com/sap-jerry/p/16648278.html