java - 按钮上的 gwt 操作

Question

我创建了一个 GWT 项目，但遇到了下一个问题。当我单击不同的按钮时，没有任何附加内容。不过，我在每种情况下都创建了一个方法。我希望当我单击一个按钮时，小部件内容会被一条新消息修改。

我收到“选择项目”消息，例如，当我单击顶部按钮时，我希望看到:“ImDb API 上排名前 50 的电影列表”。

这是我的代码:

    public class GwtCA2MoviesKOZA implements EntryPoint {

// Attributs
private DockPanel dock;

private Widget header, menu, content;

private Label topHeader;
private Label bottomHeader;
private Label comingSoonHeader;

public void onModuleLoad() 
{

    // Get rid of scrollbars, and clear out the window's built-in margin,
    // because we want to take advantage of the entire client area.
    Window.enableScrolling(true);
    Window.setMargin("100px");

    /* Create all elem*/

    // Dock Panel
    dock = new DockPanel();
    dock.setBorderWidth(3);
    dock.setSize("100%", "100%");
    dock.setVerticalAlignment(HasAlignment.ALIGN_MIDDLE);
    dock.setHorizontalAlignment(HasAlignment.ALIGN_CENTER);
    dock.setStyleName("myStyle");

    //Header
    header = createHeaderWidget();
    dock.add(header, DockPanel.NORTH);
    dock.setCellHeight(header, "30px");

    // Menu
    menu = createMenuWidget();
    dock.add(menu, DockPanel.WEST);
    dock.setCellWidth(menu, "200px");

    //Content
    content = createContentWidget(null);
    dock.add(content, DockPanel.EAST);
    dock.setCellHeight(content, "530px");

    //add vp and vp1 at the RootPanel
    RootPanel.get().add(dock);

    topHeader = new Label("List of the top 50 Movies on the ImDb API");
    bottomHeader = new Label("List of the bottom 50 Movies on the ImDb API");
    comingSoonHeader = new Label("List of Movies coming soon on your cinema");

 }  


protected Widget createHeaderWidget() {

    HorizontalPanel pHeader = new HorizontalPanel();

    Image movieData = new Image();
    movieData.setUrl("http://i.myegy.to/images/1c58b25ce86e.original.png");
    movieData.setSize("25%", "25%");
    //Function if the user clicks on the image, he returns on the page of the begin

    Label titleHead = new Label ("Movies");

    pHeader.add(movieData);
    pHeader.add(titleHead);

    return pHeader;
}

protected Widget createContentWidget(String fct) {

    HorizontalPanel pContent = new HorizontalPanel();

    if (fct.equals("top") == true)
    {
        pContent.add(topHeader);
    }
    else if (fct.equals("bottom") == true)
    {
        pContent.add(bottomHeader);
    }
    else if (fct.equals("coming") == true)
    {
        pContent.add(comingSoonHeader);
    }
    else
    {
        Label titleContent = new Label ("Choose a item");   
        pContent.add(titleContent);
    }

    return pContent;
}


protected Widget createMenuWidget() {

    VerticalPanel pMenu = new VerticalPanel();

    Button top = new Button("Top 25");
    top.addClickHandler( new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            createContentWidget("top");
        }
    });

    Button bottom = new Button("Bottom 25");
    bottom.addClickHandler( new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            createContentWidget("bottom");
        }
    });

    Button coming = new Button("Coming Soon");
    coming.addClickHandler( new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            createContentWidget("coming");
        }
    });

    pMenu.add(top);
    pMenu.add(bottom);
    pMenu.add(coming);

    return pMenu;   
}   
}

非常感谢您的帮助。

米奇74

Answer 1

当您单击任何这些按钮时，您会调用createContentWidget(String ftc);，这将返回一个小部件实例，您将需要替换当前的内容小部件。

试试这个:

top.addClickHandler( new ClickHandler() {
    @Override
    public void onClick(ClickEvent event) {
        Widget newContent = createContentWidget("top");
        replaceContent(newContent);
    }
});

public void  replaceContent(IsWidget newContent){
     dock.remove(content);//Remove the old
     this.content = newContent.asWidget();
     dock.add(content, DockPanel.EAST);//Add the new one
}