如何使（加载）图像覆盖面板

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;
}

Answer 2

别忘了添加“ mozOpacity”，以及“ opacity”和“ filter”（或者现在已经过时了吗？只需加上我的两分钱）