How can to write menu (simple buttons) in GWT GXT?

Question

I have GWT GXT project, I have some questions:

My main page class:

public class MainMenuPage implements IsWidget {

    private static MainMenuPageUiBinder mainMenuPageUiBinder = GWT.create(MainMenuPageUiBinder.class);

    @UiTemplate("MainMenuPage.ui.xml")
    interface MainMenuPageUiBinder extends UiBinder<Component, MainMenuPage> {
    }

    private BorderLayoutContainer widget;

    @UiField
    TextButton menuButton1;

    @UiField
    TextButton menuButton2;

    @UiField
    com.google.gwt.user.client.ui.FlowPanel buttonAlignPagePanel;

    @UiHandler("menuButton1")
    void selectOnMenu1(SelectEvent event) {
        //change params in center part of BorderLayoutContainer - How can do it?
    }

    @UiHandler("menuButton2")
    void selectOnMenu2(SelectEvent event) {
      //change params in center part of BorderLayoutContainer - How can do it?
    }

    @UiHandler("menuButton3")
    void selectOnMenu3(SelectEvent event) {
      //change params in center part of BorderLayoutContainer - How can do it?
    }

    @UiHandler("menuButton4")
    void selectOnMenu4(SelectEvent event) {
       //change params in center part of BorderLayoutContainer - How can do it?
    }

    @Override
    public Widget asWidget() {
        if (widget == null) {
            widget = (BorderLayoutContainer) mainMenuPageUiBinder.createAndBindUi(this);
            ButtonAlignPage buttonAlignPage = new ButtonAlignPage();
            buttonAlignPagePanel.add(buttonAlignPage);
        }
        return widget;
    }

}

and MainMenuPage.ui.xml:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder
        xmlns:g="urn:import:com.google.gwt.user.client.ui"
        xmlns:gxt="urn:import:com.sencha.gxt.widget.core.client"
        xmlns:ui='urn:ui:com.google.gwt.uibinder'
        xmlns="urn:import:com.sencha.gxt.widget.core.client.container"

xmlns:container="urn:import:com.sencha.gxt.widget.core.client.container"
xmlns:button="urn:import:com.sencha.gxt.widget.core.client.button">

    <ui:with type="com.sencha.gxt.core.client.util.Margins" field="northMargins" ...
    </ui:with>
...
    <BorderLayoutContainer borders="true">

        <north layoutData="{northData}">
            <gxt:ContentPanel headingText="The Best Menu:">
            </gxt:ContentPanel>
        </north>

        <west layoutData="{westData}">
            <gxt:ContentPanel headingText="The Menu:">
                <VBoxLayoutContainer ui:field="mainMenu" padding="{mainMenuPadding}"
                                     vBoxLayoutAlign="STRETCHMAX">

                    <child layoutData="{mainMenuLayoutData}">
                        <button:TextButton ui:field="menuButton1" text="Menu_1"/>
                    </child>
                    <child layoutData="{mainMenuLayoutData}">
                        <button:TextButton ui:field="menuButton2" text="Menu 2 bla.. bla..2"/>
                    </child>
                    <child layoutData="{mainMenuLayoutData}">
                        <button:TextButton ui:field="menuButton3" text="Menu_3"/>
                    </child>
                    <child layoutData="{mainMenuLayoutData}">
                        <button:TextButton ui:field="menuButton4" text="Menu_4 bla.."/>
                    </child>

                </VBoxLayoutContainer>
            </gxt:ContentPanel>
        </west>

        <center>
            <gxt:ContentPanel headingText="bla bla...">
                <g:FlowPanel ui:field="buttonAlignPagePanel"/>
                I need change layout in this part
            </gxt:ContentPanel>
        </center>
        <south layoutData="{southData}">
            <gxt:ContentPanel headingText="bla.. bla.. needless text.."/>
        </south>
    </BorderLayoutContainer>

</ui:UiBinder>

My run part: MainEntryPoint:

@Override
public void onModuleLoad() {
    Viewport viewport = new Viewport();
    viewport.add(new MainMenuPage());
    RootPanel.get().add(viewport);
}

What I must to write in @UiHandler for buttons, If I need: if clicked Buttun1 - show layout (FlowPanel buttonAlignPagePanel), if clicked Buttun2 - show another layout, if clicked Buttun3 - show any test, ...

How can do it in @UiHandler of button? and in ui.xml?

and I have another one question - I use implements IsWidget in my main page, may be to need use extends Composite instead of IsWidget? Help me, please.

Answer 1

helped me: in GWT it do by visible (true or false). in GXT GWT it do by CardLayoutContainer (com.sencha.gxt.widget.core.client.container.CardLayoutContainer), need:

in ui.xml:

<container:CardLayoutContainer ui:field="layoutContextMenu">

                    <!-- context 1 for Button1 -->
                    <container:CenterLayoutContainer>
                        <gxt:ContentPanel borders="true" bodyStyle="padding: 20px" headingText="Center Layout"
                                          width="400" height="200">
                            <g:Label text="I should be centered."/>
                        </gxt:ContentPanel>
                    </container:CenterLayoutContainer>

                    <!-- context 2 for Button2 -->
                    <container:SimpleContainer ui:field="contextByButton2"/>

</container:CardLayoutContainer>

and in .java:

@UiField
CardLayoutContainer layoutContextMenu;

@UiHandler("menuButton1")
void selectOnMenu1(SelectEvent event) {
     //show context 1, if click on Button1   
     layoutContextMenu.setActiveWidget(layoutContextMenu.getWidget(0));
}

@UiHandler("menuButton2")
void selectOnMenu2(SelectEvent event) {
    //show context 2, if click on Button2
    layoutContextMenu.setActiveWidget(layoutContextMenu.getWidget(1));
}