プレゼンターとの作業のGWTプラットフォームの基本

すべてのhabrazhitel良い一日！



私は初心者のJavaプログラマーであり、GWTで本格的なアプリケーションを開発することから自分のキャリアを始めました。 ハブにはGWTトピックに関する非常に多くの記事がありますが、何らかの理由で、すばらしいGWT-Platformフレームワークに関する情報はまったくありません。 このフレームワークの詳細については 、 こちらをご覧ください 。簡単なアプリケーションの例で作業する際の基本について簡単に説明します。



このアプリケーションには、現在のビューを切り替えるためのボタンが配置されたナビゲーションパネルが含まれます。 状況に応じて目的のコンテンツを挿入する2つの列もあります。 わかりやすくするために2つの列を作成しました。 実際には、もちろん1つが必要になります。



ナビゲーションバーのボタンをクリックすると、アプリケーションの左側が開くか、意味のないテキストのある右側が開きます。



デフォルトでは、左側の列が開き、名前と姓を入力するためのダイアログボックスを開くためのボタンがあります。 確認ボタンを押すと、このデータが右の列に転送されて表示されます。













したがって、まず最初に、IDEでGWTプロジェクトを作成する必要があります。 GWTPを使用するには、プロジェクトにライブラリguice-2.0.jar、guice-3.0.jar、gwtp-all-1.0.jar、aopalliance.jar、guice-assistedinject-3.0.jarを追加する必要があります。 また、gwt-bootstrap-2.2.2.0-SNAPSHOT.jarを追加して、アプリケーションに「美」を追加しました。







Eclipseにgwt-platformプラグインをインストールできます。 それは人生を大いに促進します。 その助けを借りて、新しいプロジェクトとプレゼンテーションプレゼンテーションバンドルの両方を作成できます。 このリンクからダウンロード： plugin.gwt-platform.googlecode.com/hg/update



続行：

クライアントモジュールとGinjectorを作成する必要があります。 プラグインを使用してアプリケーションを作成すると、自動的に作成されます。

configure（）メソッドでは、プレゼンターをインターフェイスにバインドして実装します。

public class ClientModule extends AbstractPresenterModule { @Override protected void configure() { install(new DefaultModule(ClientPlaceManager.class)); bindPresenter(MainPagePresenter.class, MainPagePresenter.MyView.class, MainPageView.class, MainPagePresenter.MyProxy.class); bindConstant().annotatedWith(DefaultPlace.class).to(NameTokens.main); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

  @GinModules({ DispatchAsyncModule.class, ClientModule.class }) public interface ClientGinjector extends Ginjector { EventBus getEventBus(); PlaceManager getPlaceManager(); Provider<MainPagePresenter> getMainPagePresenter(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次はエントリポイントです。ここでは、プレースマネージャに現在のページ（場所）に移動するように指示します。 つまり、ブラウザのアドレスバーに必要な場所を決定するトークンを入力した場合、そこに到達します。 もちろん、アクセス権があれば提供されます。 （たとえば、GateKeeperがこれを担当する場合があります）。

 public class HabraTest implements EntryPoint { private final ClientGinjector ginjector = GWT.create(ClientGinjector.class); @Override public void onModuleLoad() { DelayedBindRegistry.bind(ginjector); ginjector.getPlaceManager().revealCurrentPlace(); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私は場所での作業に集中しません。 すでにハブには、GWTに関する多くの注目すべき記事がありました。 たとえば、 これ 。



場所を使用せずに（より正確には、1つの場所で）小さなGWTアプリケーションを作成する方法を示します。



まず、アプリケーションのメインプレゼンターを作成します。

 public class MainPagePresenter extends Presenter<MainPagePresenter.MyView, MainPagePresenter.MyProxy> implements MainPageUiHandlers, FirstPageEvent.Handler{ public interface MyView extends View, HasUiHandlers<MainPageUiHandlers> { } //       public final static Object SLOT_FIRST_PAGE = new Object(); public final static Object SLOT_SECOND_PAGE = new Object(); //  private FirstPagePresenter firstPagePresenter; private SecondPagePresenter secondPagePresenter; @ProxyStandard @NameToken(NameTokens.main) public interface MyProxy extends ProxyPlace<MainPagePresenter> { } private EventBus eventBus; private final PlaceManager placeManager; //    @Inject public MainPagePresenter(final EventBus eventBus, final MyView view, FirstPagePresenter firstPagePresenter, SecondPagePresenter secondPagePresenter, final MyProxy proxy, final PlaceManager placeManager) { super(eventBus, view, proxy); this.placeManager = placeManager; this.firstPagePresenter = firstPagePresenter; this.secondPagePresenter = secondPagePresenter; this.eventBus = eventBus; //      getView().setUiHandlers(this); eventBus.addHandler(FirstPageEvent.getType(), this); } //       @Override protected void revealInParent() { RevealRootContentEvent.fire(this, this); } @Override protected void onBind() { super.onBind(); //       getView().setInSlot(SLOT_FIRST_PAGE, firstPagePresenter); } //       MainPageView @Override public void onRightBtnClicked() { showRightContent(); MainPageEvent mainPageEvent = new MainPageEvent( MainPageEvent.Action.SHOW_LOREM_IPSUM); eventBus.fireEvent(mainPageEvent); } //     @Override public void onLeftBtnClicked() { showLeftContent(); } public void showLeftContent() { removeFromSlot(SLOT_SECOND_PAGE, secondPagePresenter); getView().setInSlot(SLOT_FIRST_PAGE, firstPagePresenter); } public void showRightContent() { removeFromSlot(SLOT_FIRST_PAGE, firstPagePresenter); getView().setInSlot(SLOT_SECOND_PAGE, secondPagePresenter); } @Override public void onFirstPageEvent(FirstPageEvent event) { //      ,         showRightContent(); MainPageEvent mainPageEvent = new MainPageEvent( MainPageEvent.Action.SHOW_FORM_RESULT, event.getFirstName(), event.getLastName()); eventBus.fireEvent(mainPageEvent); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

FirstPagePresenter firstPagePresenter、SecondPagePresenter secondPagePresenterのコンストラクターに注入したことに注意してください。

これらはプレゼンターになります-アプリケーションの左部分と右部分を表すウィジェット（つまり、理論的には個別のページ）。



GWTPには、主に3種類のプレゼンターがあります。

• また配置されているトランスポンダー
• トランスポンダーウィジェット（PresenterWidget）
• ポップアップウィンドウを表すプレゼンターウィジェット

プレゼンタープレースは、アプリケーションの個別のページを作成し、ブラウザのアドレスバーに追加されたいわゆるトークンを使用してナビゲートするために使用されます。

このような各プレゼンターには、プレゼンターに添付されているトークンを示す注釈が含まれている必要があります。

この場合、このようなプレゼンターは1つだけ使用します。



「ページ」を変更するには、スロットのシステムとスロットに配置されたプレゼンターウィジェットを使用します。

プレゼンターウィジェットは、必ずしもシングルトンではないプレゼンターです。 多くの独立したインスタンスを持つことができます。

スロットシステムのおかげで、他のプレゼンター内でプレゼンターを無限にプレゼンできます。 プレゼンターウィジェットを別のプレゼンターに配置するには、親プレゼンターでスロットを定義し、親プレゼンターのビューでsetInSlot（）メソッドをオーバーライドする必要があります。



MainPagePresenterクラスは、スロットが単なるオブジェクトであることを示しています。

  public final static Object SLOT_FIRST_PAGE = new Object(); public final static Object SLOT_SECOND_PAGE = new Object();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

対応するビューで、プレゼンターをスロットに挿入するためのルールを定義します。

 public class MainPageView extends ViewWithUiHandlers<MainPageUiHandlers> implements MainPagePresenter.MyView { //    @UiField HTMLPanel main; //   @UiField ResponsiveNavbar navbar; //   @UiField Button firstPageBtn, secondPageBtn; private static MainPageViewUiBinder uiBinder = GWT .create(MainPageViewUiBinder.class); interface MainPageViewUiBinder extends UiBinder<Widget, MainPageView> { } //     @UiField Column leftColumn, rightColumn; @Inject public MainPageView() { uiBinder.createAndBindUi(this); navbar.setInverse(true); //   firstPageBtn.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { getUiHandlers().onLeftBtnClicked(); } }); secondPageBtn.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { getUiHandlers().onRightBtnClicked(); } }); } @Override public Widget asWidget() { return main; } //       @Override public void setInSlot(Object slot, IsWidget content) { if(slot == MainPagePresenter.SLOT_FIRST_PAGE ) { leftColumn.add(content); } else if(slot == MainPagePresenter.SLOT_SECOND_PAGE ){ rightColumn.add(content); } else { super.setInSlot(slot, content); } } //       @Override public void removeFromSlot(Object slot, IsWidget content) { if(slot == MainPagePresenter.SLOT_FIRST_PAGE ) { leftColumn.remove(content); } else if(slot == MainPagePresenter.SLOT_SECOND_PAGE ){ rightColumn.remove(content); } else { super.removeFromSlot(slot, content); } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてが非常に簡単です。setInSlot（）はプレゼンターとそれに対応するスロットを受け入れます。

このプレゼンターを配置するウィジェットを指定するだけです。 この場合、これらは2つのブートストラップ列leftColumnとrightColumnです。

この場合も繰り返しますが、ページの通過をシミュレートするには、すべてを1つの列に入れる方が適切です。



さらに、プレゼンターウィジェットとそのビュー：

 public class FirstPagePresenter extends PresenterWidget<FirstPagePresenter.MyView> implements FirstPageUiHandlers, PopupEvent.Handler{ public interface MyView extends View, HasUiHandlers<FirstPageUiHandlers> { } //    FirstPagePopupPresenter firstPagePopupPresenter; EventBus eventBus; @Inject public FirstPagePresenter(final EventBus eventBus, final MyView view, FirstPagePopupPresenter firstPagePopupPresenter ) { super(eventBus, view); this.firstPagePopupPresenter = firstPagePopupPresenter; this.eventBus = eventBus; getView().setUiHandlers(this); //    PopupEvent eventBus.addHandler(PopupEvent.getType(), this); } @Override public void onShowFormBtnClicked() { //      showForm(true); } private void showForm(boolean show) { if(show){ addToPopupSlot(firstPagePopupPresenter, true); firstPagePopupPresenter.getView().show(); } else { removeFromPopupSlot(firstPagePopupPresenter); } } @Override public void onPopupEvent(PopupEvent event) { showForm(false); eventBus.fireEvent(new FirstPageEvent(event.getFirstName(), event.getLastName())); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

特定のFirstPagePopupPresenter firstPagePopupPresenterを挿入したことに注意してください（コードは以下になります）。 これはフォームのポップアップです。 同様に、任意のプレゼンターウィジェットを任意の量で、任意のネストで挿入できます。 主なことは、階層を壊さないことです。

 public class FirstPageView extends ViewWithUiHandlers<FirstPageUiHandlers> implements FirstPagePresenter.MyView { private final Widget widget; @UiField Button showFormBtn; public interface Binder extends UiBinder<Widget, FirstPageView> { } @Inject public FirstPageView(final Binder binder) { widget = binder.createAndBindUi(this); showFormBtn.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { getUiHandlers().onShowFormBtnClicked(); } }); } @Override public Widget asWidget() { return widget; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ビューは、型指定されたViewWithUiHandlersクラスを継承することを除いて、特別なものではありません。

私たちはMVPの原則に違反したくないため、ビューからプレゼンターに直接アクセスすることはできません（逆に、できます）。 このために、インターフェイスを使用します。 getUiHandlers（）を使用してボタンのクリックについて通知しますOnShowFormBtnClicked（）;

 public interface FirstPageUiHandlers extends UiHandlers{ void onShowFormBtnClicked(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

getUiHandlers（）は、対応するプレゼンターに実装するメソッドを指定するFirstPageUiHandlersインターフェイスを返します。 当然、プレゼンターはこのインターフェイスを実装する必要があり、それに埋め込まれたMyViewインターフェイスはHasUiHandlers型インターフェイスを継承する必要があります。 そして、主なことは、プレゼンターで自分をビューイベントのハンドラーとして割り当てることを忘れないことです-getView（）。SetUiHandlers（this）;



次に、プレゼンターと2番目のページの対応するビュー：

 public class SecondPagePresenter extends PresenterWidget<SecondPagePresenter.MyView> implements MainPageEvent.Handler { public interface MyView extends View { void showLoremIpsum(); void showFormInfo(String firstName, String lastName); } EventBus eventBus; @Inject public SecondPagePresenter(final EventBus eventBus, final MyView view) { super(eventBus, view); this.eventBus = eventBus; eventBus.addHandler(MainPageEvent.getType(), this); } @Override public void onMainPageEvent(MainPageEvent event) { switch(event.getAction()) { case SHOW_FORM_RESULT: showFormInfoWidget(event.getFirstName(), event.getLastName()); break; case SHOW_LOREM_IPSUM: showLoremIpsumWidget(); break; default: break; } } private void showLoremIpsumWidget() { getView().showLoremIpsum(); } private void showFormInfoWidget(String firstName, String lastName) { getView().showFormInfo( firstName, lastName); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 public class SecondPageView extends ViewImpl implements SecondPagePresenter.MyView { private final Widget widget; @UiField FlowPanel contentPanel; public interface Binder extends UiBinder<Widget, SecondPageView> { } @Inject public SecondPageView(final Binder binder) { widget = binder.createAndBindUi(this); } @Override public Widget asWidget() { return widget; } @Override public void showLoremIpsum() { contentPanel.clear(); contentPanel.add(new LoremIpsumWidget()); } @Override public void showFormInfo(String firstName, String lastName) { contentPanel.clear(); contentPanel.add(new FormInfoWidget(firstName, lastName)); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

GWTの開発者にとって特に面白くて新しいものはありません。 プレゼンター間の通信は、標準イベント（GwtEvent）を介して行われます。



最後に、フォームでポップアップします：

 public class FirstPagePopupPresenter extends PresenterWidget<FirstPagePopupPresenter.MyView> implements PopupUiHandlers { public interface MyView extends PopupView , HasUiHandlers<PopupUiHandlers>{ } EventBus eventBus; @Inject public FirstPagePopupPresenter(final EventBus eventBus, final MyView view) { super(eventBus, view); this.eventBus = eventBus; getView().setUiHandlers(this); } @Override public void onSubmitBtnClicked(String firstName, String lastName) { eventBus.fireEvent(new PopupEvent(firstName, lastName)); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 public class FirstPagePopupView extends PopupViewWithUiHandlers<PopupUiHandlers> implements FirstPagePopupPresenter.MyView { @UiField PopupPanel main; @UiField Button submitBtn; @UiField TextBox firstName, lastName; public interface Binder extends UiBinder<Widget, FirstPagePopupView> { } @Inject public FirstPagePopupView(final EventBus eventBus, final Binder binder) { super(eventBus); binder.createAndBindUi(this); main.setAnimationEnabled(true); main.setModal(true); main.setGlassEnabled(true); submitBtn.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { getUiHandlers().onSubmitBtnClicked(firstName.getValue(), lastName.getValue()); } }); } @Override public Widget asWidget() { return main; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、popupはプレゼンターウィジェットでもありますが、そのビューインターフェイスはPopupViewを継承する必要があります。 また、メインビューパネルはPopupPanel、またはこのクラスの相続人でなければなりません。 従来のプレゼンターウィジェットとのもう1つの違いは、ページにポップアップを表示するためにスロットと挿入パネルが必要ないことです。 addToPopupSlot（）メソッドを使用するだけで十分です。



また、すべてのバンドルで、プレゼンテーションプレゼンテーションはuibinderを使用しました。 対応する* ui.xmlファイルをアップロードしません。 そこでは、原則として、GWT開発者にとって興味深いものは何もありません。



プロジェクト自体は、 このアドレスでしばらく利用可能になります。



それで、プロジェクトについて説明し、何が起こっているのか、プレゼンターがどのように関係しているのかを説明します。



オーバーライドされたonBind（）メソッドでMainPagePresenterをロードすると、すぐに最初のページがスロットに配置されます。

  @Override protected void onBind() { super.onBind(); getView().setInSlot(SLOT_FIRST_PAGE, firstPagePresenter); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

（プレゼンターとメソッドonBind（）、onUnbind、onReveal（）、onReset（）、onHide（）のライフサイクルについては、次の記事で説明します。）



したがって、FirstPagePresenter'aビューは画面の左側に表示されます。 ボタンをクリックすると、FirstPageUiHandlersインターフェイスで説明されているFirstPagePresenterのonShowFormBtnClicked（）メソッドの実装を呼び出します。



呼び出し：

  showFormBtn.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { getUiHandlers().onShowFormBtnClicked(); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

FirstPagePresenter 'eでは、次のことが起こります。

  addToPopupSlot(firstPagePopupPresenter, true);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スロットにポップアッププレゼンターを設定します。 すでに述べたように、ポップアップの場合、スロットを定義する必要はありません。 唯一の条件は、ポップアップが呼び出されるプレゼンター自体が親のスロットに存在する必要があることなどです。 addToPopupSlot（）メソッドの2番目のパラメーターは、ポップアップをアプリケーションウィンドウの中央に配置するかどうかを示します（メソッドにはいくつかのオーバーロードがあり、このパラメーターは通常オプションです）。



ウィンドウにポップアップが表示されたら、そこにデータを入力して確認ボタンを押します。 さらに、同様のスキームによれば、getUiHandlers（）を介してポップアップがそのプレゼンターのハンドラーを呼び出し、それがイベントをスローします。 ：

  @Override public void onPopupEvent(PopupEvent event) { showForm(false); eventBus.fireEvent(new FirstPageEvent(event.getFirstName(), event.getLastName())); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初に、showForm（）メソッドで、スロットからポップアップを削除します。

 removeFromPopupSlot(firstPagePopupPresenter);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、新しいイベント（現在はFirstPageEvent）をさらにスローします。 MainPagePresenterはそれにサブスクライブされています。

  @Override public void onFirstPageEvent(FirstPageEvent event) { //       ,         showRightContent(); MainPageEvent mainPageEvent = new MainPageEvent( MainPageEvent.Action.SHOW_FORM_RESULT, event.getFirstName(), event.getLastName()); eventBus.fireEvent(mainPageEvent); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

MainPagePresenterはそれを受信すると、スロットから最初のページを削除し、2番目のページを挿入します。

  public void showRightContent() { removeFromSlot(SLOT_FIRST_PAGE, firstPagePresenter); getView().setInSlot(SLOT_SECOND_PAGE, secondPagePresenter); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さらに彼はすでにMainPageEventがさらに飛ぶ。 名前と姓だけでなく、アクションも文句を言っています。



onMainPageEvent（）メソッドでイベントを受け取ったSecondPagePresenterは、ページに表示するものを決定します。 この場合、これらはプレゼンターのない通常のウィジェットです。

  @Override public void onMainPageEvent(MainPageEvent event) { switch(event.getAction()) { case SHOW_FORM_RESULT: showFormInfoWidget(event.getFirstName(), event.getLastName()); break; case SHOW_LOREM_IPSUM: showLoremIpsumWidget(); break; default: break; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それだけです。 このような単純なアクションにはコードが多すぎるように思えるかもしれませんが、次のとおりです。

• 私たちはMVPの原則に違反しません-ビューはプレゼンターについて何も知らないはずです
• アプリケーションをモジュールに分割することにより、コードは再利用可能かつ柔軟になります。

また、いくつかはおそらく激怒するでしょう-なぜイベントの伝達のそのような長い連鎖？ ただし、イベントを受信した後、プレゼンターは次のイベントを送信する前に何らかの操作を行うことに気付くかもしれません。 たとえば、不必要なプレゼンターを削除したり、受信したデータを何らかの方法で処理したりします。



一般的に、この記事が誰かにとって有用であり、彼がGWT-Platformに目を向けることを願っています。



PS：物語と考えられる誤りの混乱をおaびします。 これは私の最初のIT投稿です。 合理的な批判とアドバイスは大歓迎です。