普通のgwtプログレスホイール

Question

今日私はGWTを学び始めました。私の次のステップは、バックエンドサーバーからJSONデータをロードすることですが、ロードが完了している間は、明白な理由からプログレスホイールを表示したいと思います。

私はこれのために「すぐに使える」ウィジェットを期待していましたが、何もないようです（私が間違っていれば私を修正します）。私はGWTを完全に新しくしているので、私は複雑なフレームワークを追加したくないのです。単純なGWTだけです。

私はこれのためにいくつかの第三者コードを見つけられていないので、私は1つをコードしなければならないようです。誰かが私を正しい方向に向けることができますか？どのような手順ですか？ 1つのイメージを作成してアニメーションで回転するか、いくつかのイメージを作成して循環的に置き換える必要がありますか？それとも、私はここから完全に離れていますか？

Answer 1

実際の進捗状況を表示していない単純なプログレスホイール（アプリケーションが何かをやっているということ）は、単純なアニメーションイメージ（例えばhttp://www.ajaxload.info/で生成）をお勧めします。

アニメーション画像/ gif形式はオプションではない場合：

簡単な解決策は、複数の画像を作成し、循環方式でそれらを置き換えることになります。

Timer updateAnim = new Timer() { 
    @Override 
    public void run() { 
     currentImage = (currentImage + 1) % NO_IMAGES; 
     setVisibilities(); 
     this.schedule(UPDATE_TICK); 
    } 
}; 

private void setVisibilities() { 
    img1.setVisible(false); 
    img2.setVisible(false); 
    switch (currentImage) { 
    case 0: 
     img1.setVisible(true); 
     break; 
    case 1: 
     img2.setVisible(true); 
     break; 
    } 

} 

setVisibilities()だけで目に見えないと、目に見える他のすべてに現在のイメージを設定します：私は基本的に、あなたが自分自身を呼び出すタイマーが作る、最近これを使用していました。私はこれを経験しましたが、イメージURLを切り替えるよりも速くなりました（1つのイメージを使って、img.setURL(String url);と呼んでいます）。

これでupdateAnim.schedule(UPDATE_TICK);が呼び出され、実行されます。

（ブラウザが最適化できるので）CSSアニメーション（1つのイメージを作成して回転）を使用するのが最も速いと思いますが、おそらく最も複雑なものです私が思うよりも実際にはもっとシンプルだということです）。 CSS回転アニメーションについては、thisの投稿をご覧ください。

実際の進捗バ​​ー（実際に進捗状況を表示します）を作成するには、進捗状況に応じて呼び出されるコールバックが必要です。この進行状況コールバックであなたの画像/ CSSトランジションを更新するだけです。

Answer 2

私の視点では、アニメーション画像（gifなど）を取得し、データがロードされている間に表示する方が良いです。

「プリローダー」の画像を生成するためのいくつかのウェブサイトがあります。 http://www.preloaders.net/ http://www.ajaxload.info

Answer 3

非常に簡単な解決策はpace.jsを使用することです。プログレスバーがDOMからイベントを収集するjavascriptスクリプトです。すべてのGWT-RCPイベントをリスンするように設定できます。また、クライアントがフラグメントをロードするときにもリッスンします。 GWTモジュールがロードされているhtmlファイルにscriptタグを追加するだけです。

これは、GWTアクティビティと通常のajaxのために「そのまま」使用できます。

<script type="text/javascript" language="javascript" 
    src="js/pace.min.js" 
    data-pace-options='{"elements":{"selectors":["body","script"]},"ajax":{"trackMethods":["GET","POST"]}}'></script>