簡體   English   中英

調用異步函數時自動“加載”指示符

[英]Automatic 'loading' indicator when calling an async function

我正在尋找一種方法來在調用異步服務時自動顯示和隱藏“加載”消息,所以不要這樣做:

showLoadingWidget();

service.getShapes(dbName, new AsyncCallback() {
  public void onSuccess(Shape[] result) {
    hideLoadingWidget();
    // more here...
  }

  public void onFailure(Throwable caught) {
    hideLoadingWidget();
  //more here
  }
});

我想這樣做,但仍然在完成時顯示和隱藏消息。

// this should be gone: showLoadingWidget();
service.getShapes(dbName, new AsyncCallback() {
    public void onSuccess(Shape[] result) {
        // this should be gone: hideLoadingWidget();
        // more here...
    }
    public void onFailure(Throwable caught) {
        //this should be gone:  hideLoadingWidget();
        //more here
    }
});

總之,我想改變異步調用的行為。 感謝您提出所有可能的建議。

丹尼爾

您可以將調用本身包裝在處理顯示加載消息的對象中,可能會在錯誤或其他情況下重試幾次。 像這樣的東西:

public abstract class AsyncCall<T> implements AsyncCallback<T> {

    /** Call the service method using cb as the callback. */
    protected abstract void callService(AsyncCallback<T> cb);

    public void go(int retryCount) {
        showLoadingMessage();
        execute(retryCount);
    }

    private void execute(final int retriesLeft) {
        callService(new AsyncCallback<T>() {
            public void onFailure(Throwable t) {
                GWT.log(t.toString(), t);
                if (retriesLeft <= 0) {
                    hideLoadingMessage();
                    AsyncCall.this.onFailure(t);
                } else {
                    execute(retriesLeft - 1);
                }
            }
            public void onSuccess(T result) {
                hideLoadingMessage();
                AsyncCall.this.onSuccess(result);
            }
        });
    }

    public void onFailure(Throwable t) {
        // standard error handling
    }
    ...
}

要撥打電話,請執行以下操作:

new AsyncCall<DTO>() {
    protected void callService(AsyncCallback<DTO> cb) {
        DemoService.App.get().someService("bla", cb);
    }
    public void onSuccess(DTO result) {
        // do something with result
    }
}.go(3); // 3 retries

您可以使用代碼擴展它以檢測需要很長時間的呼叫並顯示某種繁忙指示等。

以下AsyncCall是我目前正在使用的(受David Tinker解決方案的啟發)。 而不是重試,這需要一些RPC調用需要很長時間才能返回,並且如果在指定的超時之前沒有返回調用,則顯示加載指示符。

AsyncCall還會跟蹤當前正在進行的RPC調用的數量,並且只有在返回所有RPC調用時才隱藏加載指示符。 使用David的解決方案,加載指示器可能會被早期的RPC調用隱藏,即使另一個仍在進行中。 這個if課程假設加載指示器小部件是應用程序的全局,這在我的情況下。

public abstract class AsyncCall<T> {
    private static final int LOADING_TOLERANCE_MS = 100;

    private static int loadingIndicatorCount = 0;

    private Timer timer;
    private boolean incremented;
    private boolean displayFailure;

    public AsyncCall(boolean displayFailure) {
        this.displayFailure = displayFailure;

        timer = new Timer() {
            @Override
            public void run() {
                if (loadingIndicator++ == 0)
                    // show global loading widget here
                incremented = true;
            }
        };
        timer.schedule(LOADING_TOLERANCE_MS);

        call(new AsyncCallback<T>() {
            @Override
            public void onSuccess(T result) {
                timer.cancel();
                if (incremented && --loadingIndicatorCount == 0)
                    // hide global loading widget here
                callback(result);
            }

            @Override
            public void onFailure(Throwable caught) {
                timer.cancel();
                if (incremented && --loadingIndicatorCount == 0)
                    // hide global loading widget here
                if (AsyncCall.this.displayFailure)
                    // show error to user here
            }
        });

    protected abstract void call(AsyncCallback<T> cb);

    protected void callback(T result) {
        // might just be a void result or a result we 
        // wish to ignore, so do not force implementation
        // by declaring as abstract
    }
}

完整的例子(羅伯特)

public abstract class AsyncCall<T> implements AsyncCallback<T> 
{
    public AsyncCall()
    {
        loadingMessage.show();
    }

    public final void onFailure(Throwable caught) 
    {    
        loadingMessage.hide();    
        onCustomFailure(caught); 
    } 

    public final void onSuccess(T result) 
    {       
        hideLoadingMessage();       
        onCustomSuccess(result);     
    }
    /** the failure method needed to be overwritte */   
    protected abstract void onCustomFailure(Throwable caught);  
    /** overwritte to do something with result */
    protected abstract void onCustomSuccess(T result); 
}

您可以創建一個默認的回調超類,它在其構造函數中接受一個LoadingMessage對象參數,並為子類提供鈎子方法,例如onSuccess0onFailure0

實施類似於:

public final void onFailure(Throwable caught) {
    loadingMessage.hide();
    onFailure0(caught);
}

protected abstract void onFailure0(Throwable caught);

這是我的版本,與上面的版本非常相似但有一些差異

public abstract class LoadingAsyncCallback<T> implements AsyncCallback<T> {

    /**
     * Override this method and call the async service method providing the arguments needed.
     * @param args
     */
    public abstract void callService(Object... args);

    /**
     * Call execute() to actually run the code in overriden method callService()
     * @param args: arguments needed for callService() method
     */
    public void execute(Object... args) {
        //your code here to show the loading widget
        callService(args);
    }

    @Override
    public void onFailure(Throwable caught) {
        //your code here to hide the loading widget
        onCallbackFailure(caught);
    }

    @Override
    public void onSuccess(T result) {
        //your code here to hide the loading widget
        onCallbackSuccess(result);
    }

    public abstract void onCallbackFailure(Throwable caught);
    public abstract void onCallbackSuccess(T result);
}

一個簡單的例子如下:

MyServiceAsync myServiceAsync = GWT.create(MyService.class);

LoadingAsyncCallback loadingAsyncCallback = new LoadingAsyncCallback() {
    @Override
    public void callService(Object... args) {
        myServiceAsync.someMethod((String) args[0], (String) args[1], this);
    }

    @Override
    public void onCallbackFailure(Throwable caught) {

    }

    @Override
    public void onCallbackSuccess(Object result) {

    }
};

String name = "foo";
String login = "bar";
loadingAsyncCallback.execute(name, login );

如果有人在RPC調用期間尋找將屏幕元素 (小部件/組件) 標記 為忙的方法 ,我實現了一個小實用程序

它禁用組件並插入具有特定樣式的“div”。 當然,這一切都可以撤消。

在撰寫本文時,這是應用於div的樣式:

@sprite .busySpinner {
    gwt-image: "spinnerGif";
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000; /* Something really high */
}

實用方法:

/**
 * Disables the given component and places spinner gif over top.
 */
public static void markBusy(final Component c) {
    c.disable();
    ensureNotBusy(c);
    // NOTE: Don't add style to the component as we don't want 'spinner' to be disabled.
    c.getElement().insertFirst("<div class='" + STYLE.busySpinner() + "'/>");
}

/**
 * Enables the given component and removes the spinner (if any).
 */
public static void clearBusy(Component c) {
    c.enable();
    if (!ensureNotBusy(c)) {
        GWT.log("No busy spinner to remove");
    }
}

private static boolean ensureNotBusy(Component c) {
    Element first = c.getElement().getFirstChildElement();
    if (first != null && first.removeClassName(STYLE.busySpinner())) {
        first.removeFromParent();
        return true;
    }
    return false;
}

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM