GWT（Google Web Toolkit）のトピックに関するHWTに関する記事は多くありませんが、ほとんどの場合、「どのようなジョーク、どのようにわからない、何も理解しない」というキーで書かれています。 さらに、私の経験が示すように、ほとんどのGWTプログラマーは何も聞いていません。聞いたことがある人は、彼が「Hello World」以上の能力はないと思っています。 この素晴らしいフレームワークの助けを借りて、ほとんどのJavaScriptプログラマーにとっては非常に困難なことを実行できることをお見せします。
少し余談を始める前に、 「なぜ？」という質問は確かに聞こえます。 このサイトをGWTで書いたのは、 仕方がなかった。 私は、HTML、CSS、PHP、およびJavaScriptを（実際にはほとんどのJavaプログラマーのように）表面的には知っていましたが、アイデアと要望がありました。 しかし、私が持っていたものを使用し、それが判明したので、それはそれほど悪くありませんでした。
このサイトをご覧ください。 はい、これは傑作ではありませんが、GWTがJavaScriptでできることは何でもできることを示しています。 なぜもっと？ この質問に対する答えは、「なぜC ++がアセンブラよりも優れているのか」という質問に対する答えと完全に一致します。 このテーマについては、コメントで議論することを提案します。 そして、GWTに戻ります。 例を使用して何かを説明することほど良いものはありません（私の強い確信）。したがって、このサイトを詳しく分析することをお勧めします。
だから、私たちは始めました
リスナーを要素に掛けます
したがって、GWTアプリケーションは、少なくとも1つのHTMLページと多数のjavascriptで構成されます。 このまさにページを見てみましょう。 推測するのは難しくないので、最も興味深いことはすべて「コンテンツ」歌姫で起こります。 ヘッダーとフッター全体がハードコアになっています。 静的に、そして本質的にGWTとは何の関係もありません（JavaScriptをオフにして、私が意味することを理解してください）。 ただし、ボタンのクリックはGWTによって処理されます。 これはどのように行われますか？ div（ボタン）ごとにリスナーがハングします：
final Element element = DOM.getElementById("homeSite"); DOM.sinkEvents(element, Event.ONCLICK); DOM.setEventListener(element, new EventListener() { public void onBrowserEvent(Event event) { if (DOM.eventGetType(event) == Event.ONCLICK) { // } } });
それだけです、それはとても簡単です。 このコードではすべてが明確であると思いますが、次の行を除いてのみ可能です：
DOM.sinkEvents(element, Event.ONCLICK);
この行が必要です これは、この要素がクリックに反応することをブラウザに伝えます。 この行を捨てると、リスナーはイベントに関するシグナルを受け取らず、それに応じてロジックは処理されません。 実際のところ、この些細なことをどこでも、そしていつでも知る必要があります。
静的HTMLファイルをダウンロードします。
ただし、すべてのコンテンツがその場で生成されるわけではありません。 たとえば、中央ページは静的HTMLです。 どう？ Firebugはこれを確認します。 startRu.htmlが中央ページにロードされていることが表示されます（ブラウザーがネイティブ言語がドイツ語であると言う場合はstartDE.html）。 これはどのように行われますか？
RequestBuilder requestBuilder = new RequestBuilder(RequestBuilder.GET, GWT.getHostPageBaseURL() + "start/start" + language.getAbkurzung() + ".html"); try { requestBuilder.sendRequest(null, new RequestCallback() { public void onResponseReceived(Request request, Response response) { if (response.getStatusCode() != 200) { Window.alert(language.getrror() + "!"); } else { HTML startHTML = new HTML(response.getText()); RootPanel.get(„content“).getElement().setInnerHTML(""); RootPanel.get(„content“).add(startHTML); } } public void onError(Request request, Throwable exception) { Window.alert(language.getError() + "!"); } }); } catch (RequestException ex) { Window.alert(language.getError() + "!"); } }
たくさんのバフを言う人もいるかもしれませんが、私は彼らに同意します。 しかし一方で、各行は非常に明確であり、このコードを使用するとエラーに対応できます。 このページを読み込んだ後、リンクを初期化する必要があります（モデルの選択、バスケットに入れるなど）。 ご想像のとおり、初期化はディーバとまったく同じように行われます。
ページ間を移動する
ページ間の遷移がどのように発生するかに注意してください。 古いコンテンツはゆっくりと消え、新しいコンテンツもゆっくりと表示されます。 誰かがこの効果を好まないかもしれないので、この効果がオフになった場合にサイトがどのような印象を与えるかを見ました。 ご存知のように、フェルトペンの味と色は異なりますが、この効果がないとサイトを見るのは喜ばしくありませんでした。 これはどのように行われますか。 GWTにはAnimationクラスがあります。 インターネット上の例を見てください。 この記事のコードは面倒です。 しかし、一般的な考え方は次のとおりです。表示されるウィジェットへのリンクを取得するクラスを作成しました。 現在表示されている現在のウィジェットへのリンクは、ウェアハウス（レジストリパターン）として機能する中央クラスの静的フィールドに格納されます。 古いウィジェットのOpacityプロパティはゆっくりと1から0に変化し、古いウィジェットは新しいウィジェットに置き換えられ、Opacityプロパティは0から1に変化します。ウィジェットの置換は非常に簡単です。
oldWidget.removeFromParent(); RootPanel.get(„content“).add(newWidget);
同じ原則により、すべてのポップアップが表示されます。
最初はこれで十分だと思います。
このページには多くの興味深いことがあります。たとえば、サイトはインストールされた言語を記憶し、前後のボタンは機能します。サイトはロシア語からドイツ語へ、またはその逆に動的に翻訳されます（ところで、ページが表示される前にサイトが読み込まれるときの翻訳）キャッシュされます（startRu.htmlなどでリロードされるかどうかを確認します）。 「購入済み」製品の表にある小さな製品アイコンをポイントすると、1つの小さな焦点が表示されます。 些細なことですが、素晴らしい。 登録中にエラーを表示する美しいツールチップ。 クライアントのフィールドを確認します。 数字のみを受け入れるフィールドなど、1つの製品を「購入」し、リンクを取得して、何が起こるかを確認してください。 そして、あなたはこれがどのように起こるのだろうか？
そして、これらすべては、仕事、勉強、妻、子供からの自由時間にHTML、CSS、JavaScriptについてまったく知らない（またはまったく知らなかった）人によって行われ、友人とビールを飲む時間もありました！
この機能またはその機能の実装方法に興味がある場合は、質問してください。
ところで、私がこのサービスをどのように宣伝しようとしたかという話も、非常に興味深いものです。
そして今、私はあなたにこのトピックの本当の目的を明らかにします。 このプロジェクトの人々/投資家/パートナーを探しています。 どんなアイデア、願い、建設的な批判も歓迎します。