How To: UiBinder + GWT MVP + multiple independent display areas

Question

I am using GWT MVP and UiBinder to create an app with a DockLayoutPanel. I want the north and south docks to be static, containing buttons and links. I want to have dynamic views in the center and two different areas of the east dock. As these dynamic areas should be independent of each other, I am setting up different ActivityMapper and ActivityManager's for each dynamic display area; center, east-top, and east-bottom.

How can I independently initialize these 3 different display areas when the application is loaded? How can I switch from one Activity to another in one display area without affecting the other areas?

When I use the the PlaceController's goTo to switch from one Place to another in one area, the other area's Activity is stopped.

Mayday, please help, mayday!

The following is some of my code:

AppViewImpl.ui.xml

<g:DockLayoutPanel styleName="{style.dockPanel}" unit="PX" width="975px" height="100%">

    <!-- DOCK PANEL EAST -->
    <g:east size="220">
        <g:LayoutPanel styleName="{style.eastPanel}">
            <g:layer left="0px" width="220px" top="0px" height="105px">
                <g:SimpleLayoutPanel ui:field="topRightPanel"/>
            </g:layer>

            <g:layer left="0px" width="220px" top="110px" height="340px">
                    <g:InlineLabel styleName="{style.label}" text="ANOTHER DISPLAY AREA"/>
            </g:layer>
        </g:LayoutPanel>
    </g:east>

    <!-- DOCK PANEL NORTH -->
    <g:north size="110">
        <g:LayoutPanel styleName="{style.northPanel}">
            <g:layer left="0px" width="755px" top="0px" height="105px">
                    <g:InlineLabel styleName="{style.label}" text="NORTH PANEL"/>
            </g:layer>
        </g:LayoutPanel>
    </g:north>

    <!-- DOCK PANEL SOUTH -->
    <g:south size="20">
        <g:LayoutPanel styleName="{style.southPanel}">
            <g:layer left="0px" width="755px" top="0px" height="20px">
                    <g:InlineLabel styleName="{style.label}" text="SOUTH PANEL"/>
            </g:layer>
        </g:LayoutPanel>
    </g:south>

    <!-- DOCK PANEL CENTER -->
    <g:center>
        <g:SimpleLayoutPanel ui:field="mainPanel" />
    </g:center>
</g:DockLayoutPanel>

MyModule.java

public class MyModule implements EntryPoint {

private Place defaultPlace = new DefaultPlace("");

public void onModuleLoad() {
    // Create ClientFactory using deferred binding so we can replace with 
    // different impls in gwt.xml
    ClientFactory clientFactory = GWT.create(ClientFactory.class);
    EventBus eventBus = clientFactory.getEventBus();
    PlaceController placeController = clientFactory.getPlaceController();

    // Start ActivityManager for the main widget with our ActivityMapper
    ActivityMapper topRightActivityMapper = new TopRightActivityMapper(clientFactory);
    ActivityManager topRightActivityManager = new ActivityManager(topRightActivityMapper, eventBus);
    topRightActivityManager.setDisplay(clientFactory.getAppView().getTopRightPanel());

    // Start ActivityManager for the main widget with our ActivityMapper
    ActivityMapper mainActivityMapper = new AppActivityMapper(clientFactory);
    ActivityManager mainActivityManager = new ActivityManager(mainActivityMapper, eventBus);
    mainActivityManager.setDisplay(clientFactory.getAppView().getMainPanel());

    // Start PlaceHistoryHandler with our PlaceHistoryMapper
    AppPlaceHistoryMapper historyMapper = GWT .create(AppPlaceHistoryMapper.class);
    PlaceHistoryHandler historyHandler = new PlaceHistoryHandler(historyMapper);
    historyHandler.register(placeController, eventBus, defaultPlace);
    RootLayoutPanel.get().add(clientFactory.getAppView());

    // Goes to place represented on URL or default place
    historyHandler.handleCurrentHistory();

    new AppController(clientFactory);
}

}

AppController.java

public class AppController implements AppView.Presenter {

    private ClientFactory clientFactory;

    AppController(ClientFactory clientFactory){
        this.clientFactory = clientFactory;
        goTo(new TopRightAPlace(""));
    }

    @Override
    public void goTo(Place place) {
        clientFactory.getPlaceController().goTo(place);
    }

}

TopRightAViewImpl.java

public class TopRightAViewImpl extends Composite implements TopRightAView {

    interface Binder extends UiBinder<Widget, TopRightAViewImpl> {
    }

    private static final Binder binder = GWT.create(Binder.class);

    private Presenter listener;
    @UiField
    Button button;

    public TopRightAViewImpl() {
        initWidget(binder.createAndBindUi(this));
    }

    @Override
    public void setName(String name) {
        button.setHTML(name);
    }

    @Override
    public void setPresenter(Presenter listener) {
        this.listener = listener;
    }

    @UiHandler("button")
    void onButtonClick(ClickEvent event) {
        listener.goTo(some other place);
    }
}

Fry

Answer 1

GWT Places, PlaceController, and PlaceHistoryMapper enable you to create bookmarkable URLs within your application that allow the browser's back button and bookmarks to work as one would expect. This is what GWT Places was designed for. Therefore it does not make sense to have more than one Place activated in an application at any point in time since you have one URL for the entire application.

PlaceController's goTo() method does notify the registered ActivityManager, which stops the current Activity upon receiving a PlaceChangeEvent.

My suggestion for you is not to use Places and PlaceChangeEvents for the two areas on the east side of your DockLayoutPanel. Use Places for your application's main screen, which is probably the center of your DockLayoutPanel. Fire different GwtEvent types, either one of the generic event types (ie. ValueChangeEvent) or a custom event type, for the areas on the east side when you need to have them updated. You could still use Activities for the east side, but you would need to create your own ActivityManager, which is actually not that hard. All you have to do is to copy GWT's ActivityManager, rename it, and replace the names of methods that handle PlaceChangeEvents and PlaceChangeRequestEvents with those that handle your own events.

Sternson

This is exactly what I ended up doing. Thanks! – Fry

Answer 2

Are you sure you really want to use google's mvp implementation? It's failry easy to implement this mechanism using mvp4g. The main module would be responsible for initializing main view and providing logic to reload dynamic areas. I used this framework in two large projects and works like a charm.

Abstraction