Question

In my app i have some interactive widgets but while loading data from server this widgets must be inactivated and activated again after loading is complete. i don’t want to make the widgets invisible or inactivate every single field/button.
the best solution would be a transparent panel with an loading image in its center or corner overlaying the widgets while loading – but how to achieve that?

Answer 1

Here is some simple code to start with. I have used it in some application but it was with GWT 2.0, maybe they got something better now. You could probably replace the Label with an animated Gif image and simply add the panel to the root panel should do the trick.

import com.google.gwt.user.client.Event.NativePreviewEvent;
import com.google.gwt.user.client.Event.NativePreviewHandler;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.SimplePanel;

public class GlassPanel extends SimplePanel implements NativePreviewHandler {

    private Label text;

    public GlassPanel() {
        setStyleName("glass-panel");
        add(text = new Label());
    }

    public void setText(String text) {
        this.text.setText(text);
    }

    @Override
    public void onPreviewNativeEvent(NativePreviewEvent event) {
        event.consume();
        event.cancel();
    }
}

CSS:

.glass-panel {
    background-color: black;
    opacity: 0.7;
    filter: alpha(opacity=70);
    z-index: 4000;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}