GWT code splitting strange behaviour in IE8

Question

Hi everyone,

I have a widget (Main.java) which encapsulates funcionality and implements the Async Provider pattern for code splitting. In addition, I use the Prefetching pattern so that the browser downloads the code inmediatly after it loads a Welcome screen.

The problem raises in IE8. If I use the Main widget without doing prefetching, everything is fine. However, if I do prefetch first and then try to use te Main widget, thw browser only shows the center panel of the DockLayoutPanel used by the Main widget. In Firefox everything works fine.

Here is the code:

//BugTest.java
package com.bugtest.clearadd.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.google.gwt.user.client.ui.RootPanel;

    public class BugTest implements EntryPoint {

    @Override
    public void onModuleLoad() {
        Button prefetchButton = new Button("Prefetch!");
        prefetchButton.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                Main.getInstance(new AsyncCallback<Main>() {

                    @Override
                    public void onSuccess(Main result) {
                        PopupPanel popupPanel = new PopupPanel(true);
                        popupPanel
                                .setWidget(new Label("Prefetching finished!"));
                        popupPanel.center();
                    }

                    @Override
                    public void onFailure(Throwable caught) {
                        // TODO Auto-generated method stub

                    }
                });
            }
        });

        Button switchButton = new Button("Switch!");
        switchButton.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                Main.getInstance(new AsyncCallback<Main>() {

                    @Override
                    public void onSuccess(Main result) {
                        RootPanel.get().clear();
                        RootLayoutPanel.get().add(result);
                    }

                    @Override
                    public void onFailure(Throwable caught) {
                        // TODO Auto-generated method stub

                    }
                });
            }
        });

        FlowPanel flowPanel = new FlowPanel();
        flowPanel.add(new Label("Bug test!"));
        flowPanel.add(prefetchButton);
        flowPanel.add(switchButton);

        RootPanel.get().add(flowPanel);
    }

}

//Main.java
package com.bugtest.clearadd.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.core.client.RunAsyncCallback;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.DockLayoutPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.ResizeComposite;

public class Main extends ResizeComposite {

    private static Main instance = null;

    public static void getInstance(final AsyncCallback<Main> callback) {
        GWT.runAsync(new RunAsyncCallback() {

            @Override
            public void onSuccess() {
                if (instance == null) {
                    instance = new Main();
                }
                callback.onSuccess(instance);
            }

            @Override
            public void onFailure(Throwable reason) {
                callback.onFailure(reason);
            }
        });
    }

    private Main() {
        DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.EM);
        dockLayoutPanel.addNorth(new Label("North!"), 7);
        dockLayoutPanel.addWest(new Label("West!"), 15);
        dockLayoutPanel.add(new Label("Center! :D"));
        initWidget(dockLayoutPanel);
    }

}

Does anyone know what it could be? Thanks in advance.

EDIT: I noticed that if I change the DockLayoutPanel units to PX, everything works fine. Is it a bug or I am missing something? Thanks again. :P

Answer 1

I realized that this issue has nothing to do with Code Splitting. I removed the GWT.runAsync function and the same problem still shows up. The problem is more likely to be related to DockLayoutPanel, the unit EM, and the design pattern, so this problem should be posted in another question. More specifically, I changed tha Async Provider pattern fot a Singleton pattern and the problem still shows up. And again, if I change the units from EM to PX, the problem seems solved. Thanks anyway!

EDIT: I posted the new characteristics of this problem in this post: http://stackoverflow.com/questions/3313981/gwt-ie8-problem-with-composite-over-docklayoutpanel-the-unit-em-and-the-single