是否可以替换 Panel 内的 Vaadin 布局组件？答案

【问题标题】：Can replace Vaadin layout component inside Panel?是否可以替换 Panel 内的 Vaadin 布局组件？
【发布时间】：2015-04-13 11:31:54
【问题描述】：

我正在使用 Vaadin 7.3.10。

我在面板中添加了一个布局组件，以便如果需要，布局应滚动。

但是，当我尝试替换布局组件时，新的组件添加到（如下所示）而不是替换现有组件 - 请参阅下面的代码示例。

如何/可以做到这一点？

n.b.如果布局不包含在面板内，则更换正确发生。另外，我不需要为此使用导航器。

谢谢，史蒂夫...

import com.vaadin.ui.Button;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Button.ClickEvent;

public class NewComponent extends VerticalLayout {

private VerticalLayout mainLayout = new VerticalLayout();
private Panel panel = new Panel();

public NewComponent() {

    mainLayout.addComponent(new Label("Main"));
    mainLayout.setSizeFull();       
    addComponent(mainLayout);

    panel.setWidth("1000px");
    panel.setHeight("500px");       
    panel.setContent(mainLayout);

    Button button = new Button("Click Me");
    button.addClickListener(new Button.ClickListener() {
        public void buttonClick(ClickEvent event) {
            replaceComponent(mainLayout,  new Label("what's wrong?"));
        }
    });

    mainLayout.addComponent(button);    
    addComponent(panel);            
}
}

public class TestUI extends UI {

@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = TestUI.class)
public static class Servlet extends VaadinServlet {
}

@Override
protected void init(VaadinRequest request) {
    setContent(new NewComponent());
}

【问题讨论】：

标签： vaadin vaadin7

【解决方案1】：

您必须在mainLayout 上调用replaceComponent ，而不是与。

现在看起来像这样：

<newComponent>
    <panel>
        <mainLayout>
            <labelMain/>
            <clickMeButton/>
        </mainLayout>
    </panel>
</newComponent>

然后你在newComponent上调用replaceComponent，它会添加这样的标签

<newComponent>
    <panel>
        <mainLayout>
            <labelMain/>
            <clickMeButton/>
        </mainLayout>
    </panel>
    <whatsWrongLabel/>
</newComponent>

它应该如下所示：

<newComponent>
    <panel>
        <mainLayout>
            <labelMain/>
        </mainLayout>
    </panel>
    <clickMeButton/>
</newComponent>

然后是mainLayout.replaceComponent(labelMain, whatsWrongLabel)。

【讨论】：

【解决方案2】：

mainLayout 不在 VerticalLayout 中，这就是为什么简单地将新组件添加到其中的原因。您必须替换面板的内容。

改变

    replaceComponent(mainLayout,  new Label("what's wrong?"));

到

    panel.setContent(new Label("what's wrong?"));

【讨论】：