1

私は、GWT の主要な API 機能のほとんどを利用する、最初の超単純な GWT アプリを設計しようとしています。私はそこまでの道のりの約 70 - 80% だと思いますが、GWT のドキュメント、無数の記事、および他の多くの GWT 関連の質問を SO に投稿した後でも、最後の 20 を理解するのにまだ苦労しています -このアプリを完全に配置するには 30% が必要です。

この最初の test app を呼び出し、次のClickItToWinItように表示します。

ここに画像の説明を入力

ユーザーが「Win」ボタンをクリックするwin-pic.pngと、左側の画像フレームに画像 (「 」) がポップアップ表示されます。ユーザーが「Lose」ボタンをクリックするlose-pic.pngと、同じフレームに画像 (" ") がポップアップ表示されます。ユーザーは、ボタン間を前後にクリックして、さまざまな画像を表示できます。これは、私のマシンでローカルにホストされる単一ページのアプリであり、1 つのホームページ、1 つのモジュール/エントリポイントなどを含めるだけで済みます。

ClickItToWinIt以下で提案されているパッケージ化/クラス構造は、このような単純なアプリには確かにやり過ぎであることに注意してください。しかし、近いうちに GWT を使ってより大きくより良いものに移行したいと考えているため、より複雑な UI を備えたより大きなアプリに取り組む前に、適切な GWT コーディングを理解することが重要です。

また、以下で提案されている構造は、Google が絶え間なく奨励しているように見える 3 つの GWT 原則に基づいています。

  • パフォーマンス; クライアント側の速度
  • 安全
  • テストを容易にするための関心の分離 (MVP など)

ここで最後の項目: 通常、私の PHP webdev 時代には、同じ DOM 要素に異なるスタイリング ルールを単純に適用する別の CSS ファイルを使用してサイトをデプロイすることで、一部のサイトで "テーマ/スキン" の概念を使用していました。したがってnormal-styles.css、サイトを「通常」に見せる " facebook-styles.css" ファイルと、サイトに Facebook などのルック アンド フィール (色、フォントなど) を与える " " ファイルがあるとします。ここで同じことを達成したいと思っており、サブクラスnet.bfodder.c2w.client.views.themesを持つパッケージを提案しています。AbstractThemeこれらのサブクラスは、ビルド時に何らかの方法でビュー/プレゼンターに注入/焼き付けされ、別のテーマまたはスキンでアプリを展開する方法を提供します。ClientBundleCssResourceが正しいです) GWTはGWT POJO にオブジェクト化された CSS スタイルを持っているようです。私のサブクラスは、私のすべての のスタイルにAbstractTheme何らかの形で関連付けられ、定義されます。CssResourceWidget

したがって、提案されたsrc/main/java構造は次のClickItToWinItとおりです（私はGoogle-Eclipseプラグインを使用してEclipse 3.7 Indigoで開発しています）：

ClickItToWinIt/
    src/main/java/
        net.bfodder.c2w
            net.bfodder.c2w.client
                MainModule (implements EntryPoint)
                AppController
                ClientFactory
                net.bfodder.c2w.client.views
                    net.bfodder.c2w.client.views.ui
                        WinButton (extends Composite implements ClickHandler; hasA TextButton)
                        LoseButton (extends Composite implements ClickHandler; hasA TextButton)
                        ImageViewer (extends Composite; hasAn Image)
                    net.bfodder.c2w.client.views.containers
                        MainContainer
                        ButtonContainer
                        ImageContainer
                    net.bfodder.c2w.client.views.displays
                        WinActivity (extends AbstractActivity implements AcceptOneWidget)
                        LoseActivity (extends AbstractActivity implements AcceptOneWidget)
                    net.bfodder.c2w.client.views.themes
                        AbstractTheme
                        NormalTheme
                        FacebookTheme --> I really dont't care about FB, just using as an example of a well-known theme/skin
                net.bfodder.c2w.client.presenters
                    IPresenter
                    ButtonPresenter (extends AbstractActivity implements IPresenter)
                    ImagePresenter (extends AbstractActivity implements IPresenter)
                net.bfodder.c2w.client.history
                    InitialPlace (corresponds to http://localhost/clickittowinit)
                    WinPlace (corresponds to http://localhost/clickittowinit/#winning)
                    LosePlace (corresponds to http://localhost/clickittowinit/#losing)
                net.bfodder.c2w.client.events
                    EventBus impl and GwtEvent impls
            net.bfodder.c2w.server
                Not worried about server-side for now; I think I "get" that much!

これは、特定のサブクラスAppControllerに属さない、変わったアプリ レベルのビジネス ロジック用です。IPresenterここMainModuleですべてが開始されます (DI、予選Activityの開始など)。ボタンは 内ButtonContainerに配置され、 は内ImageViewerに配置されImageContainer、これらの両方の内部コンテナーは 内に配置されますMainContainer(これは で作成されていると想定MainModuleしています)。これらの UI コンポーネントのレイアウトとスタイルに関しては、先ほど述べたようにAbstractTheme、ルール セットで注入/構成された定義によって決まります。

アプリの GWT 配管の主要部分に簡単にアクセスできるように、ここClientFactoryで推奨されている を使用しています。

MVPの「もの」に関しては、私が考えていたことは次のとおりです。

public class WinActivity extends AbstractActivity {
    private final ClientFactory clientFactory;
    private final WinPlace place;

    public WinActivity(ClientFactory clientFactory, WinPlace place) {
        this.clientFactory = clientFactory;
        this.place = place;
    }

    @Override
    public void start(AcceptsOneWidget panel, EventBus eventBus) {
        ImagePresenter presenter = clientFactory.getImagePresenter();

        // Inject the presenter with any stateful data here
        // presenter.setImage(getWinImageUri());

        presenter.go(panel);
    }
}

質問）！

私が上で言ったように、私はほとんどそこにいると信じています.いくつかのギャップを埋めるのに苦労しています. だから私は尋ねます：

  1. AbstractThemeサブクラスを接続して使用CssResourceしClientBundle、アプリが正しいテーマで挿入/構成され、クライアント ブラウザーが正しい CSS ファイル (normal-style.cssまたは) をダウンロードするようにするにはどうすればよいfacebook-style.cssですか?
  2. IPresenter誰かが(クラシック MVP から) AbstractActivity、「表示領域」( AcceptsOneWidget) とPlaces の関係を適切に説明できますか? ここに 1 対 1 対 1 対 1 の関係がありますか、それとも GWT の意図は、たとえば、すべてAbstractActivityの 、またはその他の比率のセットに対して複数の表示領域を持つことですか?
  3. WinPlaceを GWT の History APIに接続するにはどうすればよいですか? ユーザーがWinButton, LoseButton,をクリックした場合、WinButtonそれをブラウザの履歴に保存して、ブラウザの進む/戻るボタンを押して、この使用パターンを何度も再現できるようにするにはどうすればよいでしょうか?
  4. がWinButtonクリックされると、イベント バスにいくつかのクリック イベントが配置されます。ImageViewer(a) 内の画像を変更し、(b) この状態の変更を History API に保存することを認識する EventBus にハンドラー/リスナーを接続する場所と方法は?
  5. のアイデアはこの記事AppControllerから得ましたが、残念ながらが実際にどのように見えるかについてのコード スニペットは提供されていません。誰でも ( GWT のパターンに精通している)、これがどのように見えるかについて光を当てることができますか? おそらく、特定のコンポーネントやビューコンポーネントを持たないサブクラスでしょうか?AppControllerAppControllerIPresenterActivity
  6. 一般的に、この種の " amidoinitrite? " スタイルの質問は SO では推奨されないことを私は知っていますが、戦場で使い古された GWT の退役軍人に尋ねなければなりません: 私はここで基地から外れているのでしょうか、それとも多かれ少なかれでしょうか? GWT のベスト プラクティスに沿って進んでいますか? 助言がありますか？

ここでそのような「スーパークエスチョン」をするのは嫌いですが、SO を 6 つの中規模の質問で混乱させて、同じ問題のセットアップを何度も繰り返し続けるよりも、むしろこれを行います。さらに、適切なコード例があれば、おそらく 6 つすべてに一挙に答えることができるので、ここでチャンスをつかみました。

前もって感謝します。

4

0 に答える 0