起動時のスプラッシュを簡単に実装する

起動時やサーバにデータを問合せている最中の処理等、比較的長い時間かかる処理の最中にスプラッシュと呼ばれる「処理の経過を示す」ウィジェットを表示する処理は今でこそ当たり前になったが、少し前まではWebアプリケーションでは殆ど実装されていなかった。

GWTでスプラッシュを実装する場合、PopupPanelやDialogBoxを使うのが真っ当なのだろうが、もっと簡単に似たことを出来ないだろうか。ということで試してみた。

スプラッシュをdiv要素でHTMLに追加する

スプラッシュとして表示するのはHTMLのdiv要素として予めエントリポイントに対応するHTMLに組み込んでおく。

AddressBook.html

<!doctype html>
<html>
  :
  <body>
    <div id="loading"><br>...ロードしています</br>
        <img src="addressbook/splash.gif" />
    </div>
    <section>
      <div id="contentContainer"></div>
    </section>
    :
    :
  </body>
</html>

スプラッシュを使用するdiv要素内部には現在処理中であることをGIFアニメーション画像をimg要素として挿入している。
　splash.gif
なお、スプラッシュdiv要素自身も背景色を変えてコーナーを円弧にしているが、そのスタイルシートは簡単なので割愛する。

onModuleLoadメソッドをオーバーライドする

今回はモジュールの初期化時にスプラッシュを表示することとし、onModuleLoadメソッドをオーバーライドする。同メソッドの実行時、上記のように追加したスプラッシュのdiv要素以外は一時的に不可視状態にし、処理終了後にもとに戻すことでスプラッシュ要素だけが見えるように実装する。

AddressBook.java

public class AddressBook implements EntryPoint {
    @Override
    public void onModuleLoad() {
        
        // div要素 "contentContainer"を不可視にする
        DOM.setStyleAttribute(RootPanel.get("contentContainer").getElement(), "display", "none");
        :
        :
        時間のかかる処理を記述する
        :
        :
        // スプラッシュに使用したdiv要素を取り除く
        DOM.removeChild(RootPanel.getBodyElement(), DOM.getElementById("loading"));

        // div要素 "contentContainer"を可視にする
        DOM.setStyleAttribute(RootPanel.get("contentContainer").getElement(), "display", "block");
    }

GWTはそのコンテキスト中でHTML中のDOM要素に自由にアクセスできるので、このようにDOM要素を操作するコードを簡単に書ける。