GWT Progress bar or loading wait window

[sampath sai]

Hi,

Need some pointers implementing progress bar or loading window when i
am trying to update data or load data into widgets.
is their any packages or tools??

Sai

[opn]

I think it depends on the way you fetch the data.

RPC, RequestFactory what are you using?

Alex

[Sai Sampath]

Request factory.

[opn]

Hey again,

as i'm not at home I can only give you a link how i think i did it once, if you have any further questions feel free to ask!

Take a look here: http://stackoverflow.com/questions/7608235/intercepting-gwt-requestfactory-requests

Copied from stackoverflow (more detailed code in the link btw.)

You can override the default transport implementation and pass it during RF initialization:

SampleRequestFactory factory = GWT.create( SampleRequestFactory.class );
factory.initialize( new SimpleEventBus(), new DefaultRequestTransport() );

You can inherit from DefaultRequestTransport and override the method

send(String payload, TransportReceiver receiver)

Do some processing before calling the super-implementation and wrap the TransportReceiver with a delegate to handle the result.

I think i fired an event before send to show some loading .gif and in the onTransportSuccess and onTransportFailure another event that removed the .gif again.

I can't help with progress bar, I think it's much more complex, but if decide to go the progress bar way I'd be interested :)

HTH
Alex
 

[coderinabstract]

Using gwtp's built in NotifyingAsyncCallBack for async dispatch executes and handling AsyncCallStart and AsyncCallSucceded events can help streamline this at the topmost Mainpage presenter level and give the appearance of centralized loading with a popupdialog presenter widget (like a rotating gif) and it does this very elegantly.

This eliminates any need to code this everywhere on calls and have a cross cutting behavior at the application level assuming you leverage NotifyingAsyncCallBack calls for all server dispatching. This same event handling would work for Async Code Split point loading without extra effort, thanks to gwtp design.

Cheers...

[sampath sai]

what if i use RequestFactory?

[coderinabstract]

 gwtp framework dispatch :-(

On Wednesday, February 29, 2012 6:48:53 PM UTC-5, sampath sai wrote:

what if i use RequestFactory?

[opn]

Well, what I described and linked to at stackoverflow does exactly what coderinabstract explains for the gwtp mechanism.
Here's my code. Maybe it's clearer then.

Event:

import com.google.gwt.event.shared.

EventHandler;
import com.google.gwt.event.shared.GwtEvent;
import com.google.gwt.event.shared.HasHandlers;

/**
 * Event fired before and after Data is fetched.
 */
public class ShowCallProgressEvent extends GwtEvent<ShowCallProgressEvent.ShowCallProgressEventHandler> {

    public interface ShowCallProgressEventHandler extends EventHandler {
        void onShowCallProgress(ShowCallProgressEvent event);
    }

    private static final Type<ShowCallProgressEventHandler> TYPE = new Type<ShowCallProgressEventHandler>();

    public static void fire(HasHandlers source, boolean inProgress) {
        if (TYPE != null) {
            source.fireEvent(new ShowCallProgressEvent(inProgress));
        }
    }


    public static Type<ShowCallProgressEventHandler> getType() {
        return TYPE;
    }

    private boolean inProgress;

    public ShowCallProgressEvent() {
    }

    public boolean getInProgress() {
        return inProgress;
    }

    public void setInProgress(boolean inProgress) {
        this.inProgress = inProgress;
    }

    public ShowCallProgressEvent(boolean inProgress) {
        this.inProgress = inProgress;
    }

    @Override
    public Type<ShowCallProgressEventHandler> getAssociatedType() {
        return getType();
    }

    @Override
    protected void dispatch(ShowCallProgressEventHandler handler) {
        handler.onShowCallProgress(this);
    }

}

CustomRequestTransport:

import com.google.gwt.event.shared.EventBus;
import com.google.gwt.event.shared.GwtEvent;
import com.google.gwt.event.shared.HasHandlers;
import com.google.gwt.http.client.Request;
import com.google.gwt.http.client.RequestCallback;
import com.google.gwt.http.client.Response;
import com.google.gwt.requestfactory.client.DefaultRequestTransport;
import com.google.gwt.user.client.Window;
import org.xxx.wpm.client.event.ShowCallProgressEvent;

/**
 *  Custom RequestTransport fireing data fetching indication events.
 */
public class WPMRequestTransport extends DefaultRequestTransport implements HasHandlers {

    private final EventBus eventBus;

    public WPMRequestTransport(EventBus eventBus) {
        this.eventBus = eventBus;
    }

    @Override
    protected RequestCallback createRequestCallback(TransportReceiver receiver) {
        final RequestCallback superCallback = super.createRequestCallback(receiver);

        ShowCallProgressEvent.fire(this, true); //true -> show loading
        return new RequestCallback() {
            public void onResponseReceived(Request request, Response response) {
                ShowCallProgressEvent.fire(WPMRequestTransport.this, false); //false -> hide loading
                    superCallback.onResponseReceived(request, response);
                }

            public void onError(Request request, Throwable exception) {
                superCallback.onError(request, exception);
                ShowCallProgressEvent.fire(WPMRequestTransport.this, false);//false -> hide loading
            }
        };
    }

    @Override
    public void fireEvent(GwtEvent<?> gwtEvent) {
        eventBus.fireEvent(gwtEvent);
    }
}

EntryPoint (WPM as the name of the app):

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.shared.EventBus;
import com.google.gwt.requestfactory.shared.Receiver;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootPanel;
import com.gwtplatform.mvp.client.DelayedBindRegistry;
import org.xxx.shared.WPMRequestFactory;
import org.xxx.wpm.client.gin.WPMGinjector;
import org.xxx.wpm.client.util.WPMRequestTransport;

/**
 * Entry point classes define <code>onModuleLoad()</code>
 */
public class WPM implements EntryPoint {

    public final WPMGinjector ginjector = GWT.create(WPMGinjector.class);

    public void onModuleLoad() {
        DelayedBindRegistry.bind(ginjector);

        EventBus eventBus = ginjector.getEventBus();

        WPMRequestFactory requestFactory = ginjector.wpmRequestFactory();

        WPMRequestTransport requestTransport = new WPMRequestTransport(eventBus);

        requestFactory.initialize(eventBus, requestTransport);

       ............ etc
    }
}

Everytime you make a call with this RequestFactory the events before and after the call are fired and you can react to them anywhere in your app and show some loading indicator.

[SprinklerMan]

OPT

This is one of the best examples I have come across in quite a while.  I was able to eliminate tons of brittle code.  Thanks for taking the time to post this!

[Kyle Anderson]

Why do you want to display a progress bar?  On our site we just put the main page in the index.html file, and then use wrap() to take control of the widgets in GWT.

It takes the user about 2 seconds to process the page mentally which is about the same time for the javascript to take over, so it makes a lot of sense.

[Mrabti idriss]

I have already done that using RequesFactory, pretty simple.

In order to do that you must create your own implementation of the RequestTransport, in this custom class I intercept the beginning of the request and I fire an Event when the request is started, this event is catched by the Main presenter on the application and I display the Loader. When the request is finished I fire the same event but with another Status and hide the loader.

The configuration of the RequestFactory in your ClientModule file have to be updated to use the new Custom RequestTransport.
You need also to add some code in you main application presenter to show and hide the UI Loader widget.

I have attached in this response, all required files and code snipped to make this work.

[Christian Goudreau]

Try github gist Driss :D

--
Christian Goudreau

www.arcbees.com

[Sevak Asadorian]

Alex,
any chance you can upload WPMRequestFactory? or point to a sample project that uses this method?

[Brandon Donnelson]

Mrabti made this, but I've been upgrading it a little to the latest mods for 1.0-RC-2-SNAPSHOT so its lightly in flux but this has some request factory setup.

https://github.com/ArcBees/ArcBees-tools/tree/master/archetypes/gwtp-servletcontainer-requestfactory-spring

Brandon

[Daniel Korbel]

Hey. Can You post file: WPMGinjector?

[opn]

Hi Daniel,

meanwhile the project changed a lot and I let GWTP create the Ginjector internally, but there was nothing important in the Ginjector class anyway -- just the presenter configurations that were required by GWTP back then. The only thing not mentioned here is that it is important to bind the RequestFactory in Singleton scope. I have now moved this whole initialization procedure into the applications Gin module:

public class AppClientModule extends AbstractPresenterModule {

    // [...]

    @Provides
    @Singleton
    @Inject
    private WPMRequestFactory provideWPMRequestFactory(EventBus eventBus) {
        CallIndicatingRequestTransport requestTransport = new CallIndicatingRequestTransport(eventBus);
        final WPMRequestFactory requestFactory = GWT.create(WPMRequestFactory.class);
        requestFactory.initialize(eventBus, requestTransport);
        return requestFactory;
    }
}