如何在 GWT GXT 中编写菜单（简单按钮）？

Question

我有 GWT GXT 项目，我有一些问题：

我的主页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;
    }

}

和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>

我的运行部分：MainEntryPoint：

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

如果我需要，我必须在@UiHandler 中为按钮编写什么：如果单击 Buttun1 - 显示布局（FlowPanel buttonAlignPagePanel），如果单击 Buttun2 - 显示另一个布局，如果单击 Buttun3 - 显示任何测试，...

如何在按钮的@UiHandler 中实现？在 ui.xml?

我还有一个问题 - 我在我的主页中使用了 IsWidget 工具，可能需要使用 extends Composite 而不是 IsWidget？请帮助我。

Answer 1

帮助了我：在 GWT 中，它通过可见（真或假）来实现。在 GXT GWT 中，它由 CardLayoutContainer (com.sencha.gxt.widget.core.client.container.CardLayoutContainer) 完成，需要：

在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>

并在 .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));
}

如何在 GWT GXT 中编写菜单（简单按钮）？

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

java

gwt

widget

gxt