Replace GWT DockLayoutPanel Contents - gwt

Question

I'm trying to replace the contents of the CENTER portion of a DockLayoutPanel from a MenuBar. The MenuBar will sit at the North, but "content" (forms, reports, etc) will reside in Center.
I thought I could do it by grabbing the entire DockLayoutPanel from the RootPanel (index 0, since that's the only widget directly attached to it), then somehow remove the current contents of center and insert the new. Unfortunately, getWidget(int index) is non-static, so it's not working.
Can anyone how me with the right way to do this? Non-working code is below:
// snipped package and import details
public class menubar extends Composite {
private static menubarUiBinder uiBinder = GWT.create(menubarUiBinder.class);
interface menubarUiBinder extends UiBinder<Widget, menubar> {
}
#UiField MenuBar applicationMenuBar;
#UiField MenuBar processMenuBar;
#UiField MenuBar reportsMenuBar;
#UiField MenuItem addPowerRequirementCmd;
#UiField MenuItem powerUsageReportCmd;
public menubar() {
initWidget(uiBinder.createAndBindUi(this));
// command to replace whatever is in DockLayoutPanel.CENTER w/ AddPowerRequirement
// FormPanel
addPowerRequirementCmd.setCommand(new Command() {
#Override
public void execute() {
// get DockLayoutPanel from the RootPanel (it's the only widget, should be
// index 0
DockLayoutPanel dlp = (DockLayoutPanel) RootPanel.getWidget(0);
// clear out DockLayoutPanel.CENTER
// insert the FormLayoutPanel into DockLayoutPanel.CENTER
dlp.add(new PowerRequirementForm());
}
});
// command to replace whatever is in DockLayoutPanel.CENTER w/ power usage report
powerUsageReportCmd.setCommand(new Command() {
#Override
public void execute() {
}
});
}
}
Thanks!

Answer 1

Use a ui:field attribute, like you do for the MenuBar, to get a reference to the DockLayoutPanel from UiBinder:
<g:DockLayoutPanel ui:field="dockPanel"/>
and in the class:
#UiField DockLayoutPanel dockPanel;
However, it sounds like you want to have a set of widgets that are shown in the center of the panel depending on application state. A DeckPanel is a better solution for this:
<g:DockLayoutPanel>
<g:center>
<g:DeckPanel ui:field="deck">
<g:FlowPanel>Panel #0</g:FlowPanel>
<g:FlowPanel>Panel #1</g:FlowPanel>
</g:DeckPanel>
</g:center>
</g:DockLayoutPanel>
And then to switch the displayed child of the DeckPanel:
deck.showWidget(1); // Show Panel #1
deck.showWidget(0); // Show panel #0