MVP For GWT 系列資料轉載八：Swapping DIVs technique for navigation with gwt-presenter

源文轉自：Swapping DIVs technique for navigation with gwt-presenter

 

I have previously written about navigation in gwt-presenter using the DeckPresenter or WidgetContainerPresenter approaches. Those techniques work well for swapping out views in one portion of the page, and could be applied to the whole page, as well; however, here’s another simpler technique for situations in which you need to swap between totally unrelated views. For example, my main app has a header, footer, and content area in which views are swapped out using a WidgetContainerPresenter. However, I also need to replace the whole page (header, footer, and all) for a user registration page. To do this, I simply created two DIVs in the HTML host page:

 

<div id="roa-registration"></div>
<div id="container"></div>

 

My main AppPresenter loads all the presenters up front and fires a PlaceRequestEvent to the user registration presenter for new users. For existing users, it fires a PlaceRequestEvent based on the URL or to the default presenter if the URL is empty.

 

...
	public void go(final HasWidgets container)
	{
		this.container = container;
		loadMain();
		hideSplash();
		if (roaModel.getLoginInfo().getUser() != null)
		{
			showMain();
			String currentPlace = History.getToken();
			if ("".equals(currentPlace))
			{
				goToDefaultView();
			}
			else
			{
				// Load requested page
				placeManager.fireCurrentPlace();
			}
		}
		else
		{
			showRegistration();
		}
	}

	private void showRegistration()
	{
		// New user must register
		eventBus.fireEvent(new PlaceRequestEvent(new PlaceRequest(
			UserRegistrationPresenter.PLACE)));
	}

	private void hideSplash()
	{
		DOM.removeChild(RootPanel.getBodyElement(), DOM
			.getElementById(RoaStyles.ID_SPLASH));
	}

	private void loadMain()
	{
		// Hide while loading
		 DOM.setStyleAttribute(RootPanel.get(RoaStyles.CONTAINER_ID)
		 .getElement(), "display", "none");
		container.clear();
		HeaderPanel headerPanel = new HeaderPanel(roaModel.getLoginInfo());
		headerPanel.add(messagePresenter.getDisplay().asWidget());
		container.add(headerPanel);
		...
		container.add(bodyPanel);
		container.add(new FooterPanel());
	}

	private void showMain()
	{
		// Set GWT container visible
		DOM.setStyleAttribute(RootPanel.get(RoaStyles.CONTAINER_ID)
			.getElement(), "display", "block");
		// Load initial data
		prayerListService.refreshPrayerLists();
	}

	private void goToDefaultView()
	{
		// Nothing in URL, load default page
		eventBus.fireEvent(new PlaceRequestEvent(new PlaceRequest(
			ManageListsPresenter.PLACE)));
	}

 

Finally, I toggle the visibility of the two DIVs in the user registration presenter’s revealDisplay() method, which gets called in response to a PlaceRequestEvent. In addition, I call a hideDisplay() method in the presenter’s onBind() method (called from the constructor), so that its initial state is hidden.

 

@Override
public void revealDisplay()
{
	super.revealDisplay();
	RootPanel.get(RoaStyles.CONTAINER_ID).setVisible(false);
	RootPanel.get(RoaStyles.REGISTRATION_CONTAINER_ID).setVisible(true);
}

public void hideDisplay()
{
	RootPanel.get(RoaStyles.REGISTRATION_CONTAINER_ID).setVisible(false);
}

 

The downside to this technique is that it would be a pain to manage with more than a few DIVs, as each presenter would have to know how to show itself and hide the others; however, for swapping between completely different page layouts, I think it’s easier than creating nested WidgetContainerPresenters (if that would even work). On the plus side, multiple presenters can use each layout (DIV), and most applications are likely to need only a handful of completely distinct page layouts. YMMV.