（ロード）イメージオーバーレイをパネルに作成する方法

Question

私のアプリでは、いくつかのインタラクティブウィジェットがありますが、サーバーからデータを読み込んでいる間は、このウィジェットを無効にして、読み込みが完了した後で再度アクティブにする必要があります。私はウィジェットを非表示にするか、すべての単一のフィールド/ボタンを非アクティブにしたくありません。 最善のソリューションは、ローディング中にウィジェットをオーバーレイする中央またはコーナーにローディングイメージを持つ透明なパネルですが、それを達成する方法はありますか？

Answer 1

ここから始める簡単なコードを紹介します。私はいくつかのアプリケーションでそれを使用しましたが、それはGWT 2.0でありました。ラベルをアニメーションGIFイメージで置き換えて、そのパネルをルートパネルに追加するだけでトリックを行うことができます。

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」を追加することを忘れ（または廃止だけで価値が私の2セントを追加することではないのですか？ ）