SAP

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

2022-08-28  本文已影响0人  华山令狐冲

sap.m.BusyDialog 用于指示系统正忙。当显示 Busy 对话框时,整个应用程序被会阻止,无法进行任何新的操作。

Busy Dialog 包含下列几个组成部分,其中大部分是可选的。

Busy Dialog 的使用场合

不应该使用 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");
            }
        }

    });
});
上一篇 下一篇

猜你喜欢

热点阅读