GWT: Getting a Reference to a DockLayoutPanel from a MenuBar

Question

I am a newbie trying to use a MenuBar to swap the displayed panel in a DeckPanel.

I have 2 classes and 2 associated uibinder XML files:

ApplicationUi.java
ApplicationUi.ui.xml
ApplicationMenu.java
ApplicationMenu.ui.xml

In ApplicationUi.java and the UI XML, the root is bound to a DockLayoutPanel. The ApplicationMenu is meant to be in the North section of the DockLayoutPanel. The MenuBar options will affect the DeckPanel in the Center section.

In ApplicationMenu, how can I get a reference to the DeckPanel so I can call showWidget() to swap the displayed panel?

Also, since I'm a newb, any suggestions or reviews of this code are welcome. I've done the best I can on Google, but alot of what I'm looking for doesn't seem to be out there.

(This is a followup to Replace GWT DockLayoutPanel Contents).

Source: ApplicationUi.java

import org.jason.datacenter.client.forms.NewRequirementForm;

public class ApplicationUi extends Composite {

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

interface Binder extends UiBinder<Widget, ApplicationUi> {
}

@UiField DockLayoutPanel dlp;
@UiField VerticalSplitPanel headerPanel;
@UiField DeckPanel deckPanel;

public ApplicationUi() {
    initWidget(binder.createAndBindUi(this));

    // add the NewRequirementForm to the deckpanel as index #0
    deckPanel.add(new NewRequirementForm());
}

public void switchDeck(int newIndex) {
    deckPanel.showWidget(newIndex);
}
}

ApplicationUi.ui.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'  xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:style>
    .panel {
        background-color: ivory;
    }
</ui:style>


<g:DockLayoutPanel ui:field="dlp">
    <g:north size="800">
        <g:VerticalSplitPanel ui:field="headerPanel">

        </g:VerticalSplitPanel>
    </g:north>
    <g:center>
        <g:DeckPanel ui:field="deckPanel" />
    </g:center>
</g:DockLayoutPanel>

</ui:UiBinder>

ApplicationMenu.java:

public class ApplicationMenu extends Composite {

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

interface Binder extends UiBinder<Widget, ApplicationMenu> {
}

@UiField MenuBar applicationMenu;
@UiField MenuItem mitmNewPower;

public ApplicationMenu() {
    initWidget(binder.createAndBindUi(this));

    mitmNewPower.setCommand(new Command() {

        @Override
        public void execute() {
            RootLayoutPanel rlp = RootLayoutPanel.get();
            DockLayoutPanel dlp = (DockLayoutPanel) rlp.getWidget(0);

        }
    });
}

}

ApplicationMenu.ui.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:style>
    .panel {
        background-color: ivory;
    }
</ui:style>

<g:MenuBar ui:field="applicationMenu">
    <g:MenuItem>
        Process
        <g:MenuBar>
            <g:MenuItem ui:field="mitmNewPower" />
        </g:MenuBar>
    </g:MenuItem>

</g:MenuBar>

</ui:UiBinder>

I wrote a long answer on using MVP with GWT a while back, and using some of the ideas in it could help you achieve what you're trying to do. http://stackoverflow.com/questions/2832779/is-there-a-recommended-way-to-use-the-observer-pattern-in-mvp-using-gwt/2832919#2832919 — Mia Clarke, Feb 07 '11 at 21:05

score 2 · Accepted Answer · answered Feb 07 '11 at 20:41

One way you could do this would be to use an EventBus. Create an event type and have your ApplicationMenu fire an event of that type when a menu item gets clicked. The ApplicationUi object can subscribe to that event and respond to it by updating the contents of the DeckPanel. This avoids the menu object needing to know about the DeckPanel at all.

GWT: Getting a Reference to a DockLayoutPanel from a MenuBar

1 Answers1