ansaurus

Question

How to prevent GWT onload flicker in the Web Application Starter Project?

Answer 1

+2 A:

I've handled this problem before by not using the GWT module to load CSS, but loading it directly in the tag itself. If you do this, the browser will always load the CSS first, even before the GWT JS is loaded.

This means you'll lose a bit of flexibility and speed, but its the only workaround I've used so far.

EDIT: Extra info cause I want the bounty :D

If you do not remove the <inherits name='com.google.gwt.user.theme.standard.Standard'/> from your module.gwt.xml file, then the GWT standard theme is loaded in the JS file that GWT creates. This JS file loads after the HTML page renders, and injects the CSS after load. Hence the flicker.

To avoid the flicker, you can comment out that line and insert your own stylesheet into the <head> of your HTML file. This ensures your CSS loads before the HTML renders, avoiding any flicker. If you really want the GWT theme, you get it out of the source code.

To use a spinner with GWT is quite easy. One simple way would be to keep it in a div with an id in the HTML file itself. Then, in the onModuleLoad(), simply hide that div by calling RootPanel.get("spinner").setVisible(false);

That should show the spinner till GWT loads itself.

Sudhir Jonathan 2010-01-10 04:20:57

Thanks, but is this the official GWT approach? I can't bealive Google supply the Standard theme CSS just so you will comment it out in real world projects. The hide spinner div on load approach you suggested is already in the body of my question by the way.

Ehrann Mehdan 2010-01-19 07:58:15

The GWT themes are great and work fine in situations where the page is constructed dynamically... There you won't see a flicker. It happens only when a combination of static HTML and dynamic widgets are used - which doesn't happen all that often.

Sudhir Jonathan 2010-01-20 04:53:47

Sorry if you'd already coded the spinner fully, when you mentioned onLoad I thought you were using a javascript onLoad on the body or something.

Sudhir Jonathan 2010-01-20 04:55:40

Answer 2

+1 A:

You could put an HTML loading message in the host page (use style attributes or embed the style tag in the header to make sure that it's styled), and remove the message once your modules has loaded, e. g. Document.get().getBody() with .setInnerHTML("") or .removeChild(), and then present your application programmatically however you want.

Gipsy King 2010-01-14 09:56:40

Yes. The pattern I use is to put a 'loading, please wait...' div in the host page and then remove that element in the onModuleLoad() method. Works fine.

AlexJReid 2010-01-14 11:00:08

I know this alternative already, and it is even in the question: "I was thinking simply adding a div with an animated gif, and in the onload event - hide it" but I'm looking for something more official and less hacky. If you think there is no official best practice solution by the GWT team, please show me the source backing it up

Ehrann Mehdan 2010-01-14 11:23:56

I have not seen a standard practice, and I believe there doesn't need to be one. Be creative!

Gipsy King 2010-01-14 13:50:44

Answer 3

+2 A:

Here's what we do to implement a spinner.

You put something like the following HTML just below the script line that loads your application (ie. the one with nocache.js). e.g.:

    <div id="loading">
        <div id="loading-msg">
            <img src="icons/loading-page.gif" lt="loading">
            <span>Loading the application, please wait...</span>
        </div>    
    </div>

Then in your application EntryPoint you reach into the page using the DOM and remove that div. e.g.

final RootPanel loading = RootPanel.get("loading");
if (loading != null) {
    DOM.removeChild(RootPanel.getBodyElement(),
                    loading.getElement());
}

Dean Povey 2010-01-19 14:50:07

Answer 4

+2 A:

Ehrann: I'm afraid the practice mentioned in the above answers is the only way for now. GWT doesn't provide similar features to show/hide a "loading" frame "on the fly". I guess one of the reason is that this requirement is not so "common" for all GWT users, one person might want a very different style of the "loading" than others. So you have to do that by yourself.

You can have a look at the GXT showcase page (based on GWT too): http://www.extjs.com/explorer/ for how they do that. For the source of it, download Ext GWT 2.1.0 SDK here: http://www.extjs.com/products/gxt/download.php and check the samples/explorer folder after extracting it. For details see the edit below:

EDIT

Check the source code for http://www.extjs.com/examples/explorer.html and you can see a div with id "loading". For each samples (extending Viewport), GXT.hideLoadingPanel(loadingPanelId) is called in onAttach() (the initialization), which hides the loading frame.

Check source code of Viewport here

Check source code of GXT.hideLoadingPanel here

You can do it in a similar way.

xhh 2010-01-20 02:56:31

ansaurus

tags:

views:

answers:

How to prevent GWT onload flicker in the Web Application Starter Project?

related questions