首页 > 其他分享 >SAP UI5 里的 Busy Dialog 控件使用概述

SAP UI5 里的 Busy Dialog 控件使用概述

时间:2022-09-02 00:01:38浏览次数:51  
标签:function 控件 oBusyDialog BusyDialog Busy UI5 Dialog sap

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
From: https://www.cnblogs.com/sap-jerry/p/16648278.html

相关文章