2

私はGWTが初めてで、これはSOのどこかで答えられていると確信していますが、まだ見つけていません

GWT 2.0 eclipse プラグインをダウンロードしたところ、スターター プロジェクトが付属していることを嬉しく思いました。

しかし、動かしてみるとちらつきが気になる…。

  1. テキストは最初に CSS なしで読み込まれます
  2. セレクトボックスが表示されるまで時間がかかる

(ちらつきが表示されない場合は、押しF5て更新してみてください)

すべての成熟した GWT アプリにはそれ以前にローダーがあるようですが、それを追加する簡単で標準的な方法は見つかりませんでした。

このアプリは次の順序で読み込まれるようです:

  • 基本レイアウト HTML、
  • すべての JavaScript、および CSS
  • 「onload」イベントでロジックを実行します (コンパイルされた JavaScript が開始できる最も早い時間 - ?)

そのため、GWT がロードされる前にプログラムでローディング スピナーを追加することはできません。

基本的なものが欠けていますか？その初期スピナーを追加するベストプラクティスの方法はありますか?

アニメーションgifを含むdivを追加するだけで、onloadイベントで非表示にすることを考えていました。

しかし、私はもっと良いものがあると確信しています。

これが重複した質問であるかどうかを教えてください

更新:この関連する質問が見つかりましたが、私の回答ではありません...

4

4 に答える 4

2

Ehrann：今のところ、上記の回答に記載されている方法が唯一の方法だと思います。GWTは、「オンザフライ」で「読み込み中」のフレームを表示/非表示にするための同様の機能を提供していません。その理由の1つは、この要件がすべてのGWTユーザーにとってそれほど「一般的」ではないためだと思います。ある人は、他の人とは非常に異なるスタイルの「ロード」を望んでいる可能性があります。だからあなたは自分でそれをしなければなりません。

GXTショーケースページ（GWTにも基づいています）を見ることができます：http：//www.extjs.com/explorer/その方法については。ソースについては、Ext GWT 2.1.0 SDKをここからダウンロードしてください：http：//www.extjs.com/products/gxt/download.php抽出後、samples/explorerフォルダーを確認してください。詳細については、以下の編集を参照してください。

編集

http://www.extjs.com/examples/explorer.htmlのソースコードを確認すると、IDが「loading」のdivが表示されます。サンプル（ビューポートの拡張）ごとに、GXT.hideLoadingPanel（loadingPanelId）がonAttach（）（初期化）で呼び出され、ロードフレームが非表示になります。

ビューポートのソースコードをここで確認してください

GXT.hideLoadingPanelのソースコードはこちらで確認してください

同様の方法でそれを行うことができます。

于 2010-01-20T02:56:31.503 に答える
2

この問題は、GWT モジュールを使用して CSS をロードするのではなく、タグ自体に直接ロードすることで以前に対処しました。これを行うと、GWT JS が読み込まれる前であっても、ブラウザーは常に最初に CSS を読み込みます。

これは、柔軟性と速度が少し失われることを意味しますが、これまでに使用した唯一の回避策です。

編集:追加情報は、賞金が欲しいからです:D

module.gwt.xml ファイルからを削除しない場合 <inherits name='com.google.gwt.user.theme.standard.Standard'/>、GWT が作成する JS ファイルに GWT 標準テーマがロードされます。この JS ファイルは、HTML ページのレンダリング後に読み込まれ、読み込み後に CSS が挿入されます。したがって、ちらつき。

ちらつきを避けるには、その行をコメントアウトして、独自のスタイルシートを<head>HTML ファイルの に挿入します。これにより、HTML がレンダリングされる前に CSS がロードされ、ちらつきが回避されます。本当に GWT テーマが必要な場合は、ソース コードから取得します。

GWT でスピナーを使用するのは非常に簡単です。簡単な方法の 1 つは、HTML ファイル自体の id を使用して div に保持することです。次に、 で、onModuleLoad()呼び出してその div を非表示にするだけですRootPanel.get("spinner").setVisible(false);

GWT が読み込まれるまで、スピナーが表示されるはずです。

于 2010-01-10T04:20:57.600 に答える
2

スピナーを実装するために行うことは次のとおりです。

アプリケーションをロードするスクリプト行 (つまり、nocache.js を含む行) のすぐ下に、次の HTML のようなものを配置します。例えば：

    <div id="loading">
        <div id="loading-msg">
            <img src="icons/loading-page.gif" lt="loading">
            <span>Loading the application, please wait...</span>
        </div>    
    </div>

次に、アプリケーションの EntryPoint で、DOM を使用してページに到達し、その div を削除します。例えば

final RootPanel loading = RootPanel.get("loading");
if (loading != null) {
    DOM.removeChild(RootPanel.getBodyElement(),
                    loading.getElement());
}
于 2010-01-19T14:50:07.027 に答える
1

HTML 読み込みメッセージをホスト ページに配置し (スタイル属性を使用するか、ヘッダーにスタイル タグを埋め込んで、スタイルが設定されていることを確認します)、モジュールが読み込まれたらメッセージを削除できます (Document.get().getBody( など))。 ) .setInnerHTML("") または .removeChild() を使用して、必要に応じてプログラムでアプリケーションを表示します。

于 2010-01-14T09:56:40.560 に答える