GWTコード分割ダウンロードプログレスバー - Gmailのように

私は自分のプロジェクトでコード分割を使用する必要があります。しかし、とにかく初回のダウンロードにはいくつかのコードがあります。GWTコード分割ダウンロードプログレスバー - Gmailのように

ここでは、gmailの起動の進行状況などのコードダウンロード（.cache.htmlや他のコード分割）の進捗状況をエンドユーザーに示したいと考えています。

私を助けてくれませんか？

RGDS

出典

2010-12-11 Nav

GWTはプログレスバーのような任意のウィジェットを持っていません。私はまた私のアプリケーションにこの機能を追加したいと思いましたが、できませんでした

インキュベーターの進行状況バーを使用することができます。

http://google-web-toolkit-incubator.googlecode.com/svn/trunk/demo/ProgressBar/index.html

出典

2010-12-14 07:22:23

あなたの答えをありがとう。この質問は、アプリケーションのプログレスバーに関するものではなく、アプリが完全に読み込まれる前に表示されるプログレスバーに関するもので、ユーザーはどれくらい待たなければならないかを知っています。 –

@Chrisご意見ありがとうございます。私はプログレスバーとその使用法を表示したいだけです。 –

たぶん、あなたはこれを試すことができますし、それが動作するかどうコメントしてください。

私はあなたにのみhtmlファイルを送信します。あなたはあなたのコードに従って設計することができます。これはどのように動作していますか。 "loading"を含むdiv要素があります。ページが最初に単純なhtmlが読み込まれ、読み込み中のテキストが表示されます。 htmlファイルをロードした後、nocache.jsファイルが開始されます（まだあなたのロイドテキストが表示されます）。 jsファイルがロードされた後、onmoduleloadスクリプトが開始され（まだテキストロードが見られる）、すべてのウィジェットが作成され、パネルなどが準備された後に開始されます。以下のコードを試して、画面から "読み込み中の"テキストを削除してください。

com.google.gwt.user.client.Element loading = DOM.getElementById("loading"); 
DOM.removeChild(RootPanel.getBodyElement(), loading);

proje.html;

<!doctype html> 
<!-- The DOCTYPE declaration above will set the --> 
<!-- browser's rendering engine into    --> 
<!-- "Standards Mode". Replacing this declaration --> 
<!-- with a "Quirks Mode" doctype may lead to some --> 
<!-- differences in layout.      --> 

<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

    <!--                --> 
    <!-- Consider inlining CSS to reduce the number of requested files --> 
    <!--                --> 
    <link type="text/css" rel="stylesheet" href="<proje>.css"> 
    <link rel="stylesheet" type="text/css" href="resources/css/gxt-all.css" /> 

    <!--           --> 
    <!-- Any title is fine       --> 
    <!--           --> 
    <title><Proje></title> 

    <!--           --> 
    <!-- This script loads your compiled module. --> 
    <!-- If you add any GWT meta tags, they must --> 
    <!-- be added before this line.    --> 
    <!--           --> 
    <script type="text/javascript" language="javascript" src="<proje>/<proje>.nocache.js"></script> 
    </head> 

    <!--           --> 
    <!-- The body can have arbitrary html, or  --> 
    <!-- you can leave the body empty if you want --> 
    <!-- to create a completely dynamic UI.  --> 
    <!--           --> 
    <body> 

    <!-- OPTIONAL: include this if you want history support --> 
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe> 

    <!-- RECOMMENDED if your web app will not function without JavaScript enabled --> 
    <noscript> 
     <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif"> 

     </div> 
    </noscript> 

    <div align="center" id="loading"> 
     <table style="height:600px;" border="0"> 
      <tr height="100%"> 
       <td align="center"> 
        <b>Loading...</b> 
       </td> 
      </tr> 
     </table> 
    </div> 

    <div id="main" style="display:none"> 
     <table border="0" width="100%" height="100%" align="center" cellspacing="0"> 
       <tr> 
       <td colspan="2" width="100%" id="ustMenuPanel"></td> 
       </tr> 
       <tr height="100%" valign="top"> 
       <td id="menuPanel" width="20%"></td> 
       <td id="modulPanel" width="80%"></td> 
       </tr> 
     </table> 
    </div> 
    </body> 
</html>

出典

2010-12-14 10:13:49

「問題」は、どれくらいの量が読み込まれたのかわかりません。あなたは "500kbから100kbをロード"のようなものを得る方法を考えていますか？ –

@Chris_Boesingはい、あなたは正しいです、私はあなたの質問の出発点にサンプルを与えることを試みます。 –

はい、みんな、それは動作しますが、クリスは私がパーセンテージがどのくらい完了したか知りたいと言った – Nav

はdesign（おおよそ）によれば、それは技術的にプリフェッチをサポートしていないので、それは理にかなってモジュールをオフに分割言及します。 GMailがコールバックを介してチェックされたモジュールの読み込み進行状況に基づいて進捗状況を示していると仮定することができます（つまり、GWT.runAsync()）。いないすべてのモジュールは、同じサイズですが、あなたは「guesstimate」と各モジュールの加重割合を割り当てることができます（参照GWTのcompile report）

あなたの最初のページサイズのダウンロードが大きい場合（> = 1 MB）、Iリファクタリングを検討し、デザインを最適化して軽量（足場）にすることをお勧めします。これはサーバへのより多くの旅行を意味するが、最初のダウンロードサイズを制限する。これは、ページが「働いている」（すなわち、不確定の進行状況バー）というユーザーへのより正確なフィードバックを提供し、不必要な精度を避けるための基礎を提供します。
合計ページサイズは、クライアント/ブラウザへの経路を実際に測定するのは難しいことですが、これをユーザーに表示するよりも大きな問題になります。は、いくつかの軽量モジュールでこれを実現しますが、ClientBundleのような生成されたすべてのリソースを補う必要があります。これは、GWTが各ブラウザ順列に対して特定のセットを作成するためです。

追記：ファイルをダウンロードするとき、ファイルサイズの精度の進行（1.29メガバイトの例えば80キロバイト（6％完了））のようなリアルタイムフィードバックは、典型的に使用されている（例えば、画像、ビデオ、音楽、など）をユーザーのハードドライブに追加します。その時点でのデータは一時的なものでなくなり、ストレージスペースが問題になる可能性があります。キャッシュがクリアされてフラッシュされるので、ウェブページの大きさは大して重要ではありません。

出典

2010-12-14 11:07:15

Apache Hupaと同じアプローチをとることができます。これは、アプリケーションの読み込み中にアニメーションGIFを表示するだけです。アプリケーションがロードされると、アニメーションGIFはホストページのdom構造体を介して削除されます。

出典

2010-12-17 11:50:47 crowne

GWTコード分割ダウンロードプログレスバー - Gmailのように

答えて

関連する問題