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

简介: 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 的标题属性。 以文本形式提供描述操作的精确文本。


看个具体的例子:

2768319b77c15edef4d4dd298a75048d.png

弹出 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");
    }
  }
  });
});
目录
相关文章
|
1月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
27 0
|
1月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
15 0
|
1月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
15 0
|
1月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
33 0
|
1月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
28 0
|
1月前
|
搜索推荐
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
18 0
|
1月前
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
20 0
|
1月前
|
开发者 UED
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
14 0
|
1月前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
15 0
|
1月前
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
15 0