组件位置 (Vaadin)

Question

我有一个简单的 portlet，包含几个组件：3 个 Button 对象、1 个 Slider、1 个 MenuBar 和分配给 Label 的图片（由 servlet 生成）。现在，当我在 Label 的图片之间切换时（我有更多图片），我希望将图片 Label 放置在旧图片 Label 处> 对象的位置：

我的图片Label 位于portlet 的左上角。当我选择另一张图片 时，Button 对象、MenuBar 和 Slider 位于图片 Label 下方Label 新图片 Label 正在其他组件下绘制（在 Button 对象、 MenuBar 、 Slider< /代码> ）所以Button 对象...位于顶部，图片 Label 位于 portlet 的底部，

例如，我更改图片 Label 的背景通过在菜单中选择颜色：

newItem1.addItem("Blue",new Command(){
    public void menuSelected(MenuItem selectedItem){
        if(pictureA.isVisible()){
            pictureB.setVisible(false);
            pictureC.setVisible(false);
            window.removeComponent(pictureA);
            pictureA= new Label("<img src=http://localhost:8888/portlet/KiviatDiagramm?background=blue", Label.CONTENT_XHTML);
            window.addComponent(pictureA);
        } else {
            window.showNotification("", Notification.TYPE_WARNING_MESSAGE);

        }
    }
});

更新：

我已从Label对象切换为嵌入图像（Embedded）（这要好得多）我尝试重新分配资源具有新颜色的嵌入对象，但它不起作用，这是我所做的：

public void init() {

    URL PictureAUrl= null;
    try {
        pictureAUrl= new URL("http://localhost:8888/portlet/pictureA");
    } catch (MalformedURLException e) {
        e.printStackTrace();
    }
    URL PictureBUrl= null;
    try {
        pictureAUrl= new URL("http://localhost:8888/portlet/pictureB");
    } catch (MalformedURLException e) {
        e.printStackTrace();
    }
    URL pictureCUrl= null;
    try {
        pictureCUrl= new URL("http://localhost:8888/portlet/pictureC");
    } catch (MalformedURLException e) {
        e.printStackTrace();
    }
    final Embedded pictureA = new Embedded("", new ExternalResource(pictureAURL));
    pictureA .setType(Embedded.TYPE_IMAGE);
    final Embedded pictureB = new Embedded("", new ExternalResource(pictureBURL));
    pictureB .setType(Embedded.TYPE_IMAGE);
    final Embedded pictureC = new Embedded("", new ExternalResource(pictureCURL));
    pictureC .setType(Embedded.TYPE_IMAGE);


    newItem.addItem("ColorBlue", new Command(){
            public void menuSelected(MenuItem selectedItem) {
                if(!pictureA.equals(pictureB )){

        Resource newPictureResource = new ExternalResource("http://localhost:8888/portlet/pictureA?background=blue");
        newPictureResource.setType(Embedded.TYPE_IMAGE);
        pictureA.setResource(newPictureResource);

                }
                else {
                    window.showNotification("Please select pictureA");
                }
        }
   });

Answer 1

rickthomas 是正确的，您应该使用 ReplaceComponent 方法。我很确定这里的主要问题是，在删除图片后，您调用 addComponent(pictureA) ，它实际上将组件添加到组件列表的末尾。如果您没有对旧图片的引用并且它是第一个组件，那么您可以使用这个：

window.replaceComponent(window.getComponentIterator().next(), newPicture);

除此之外，您不必编写 HTML 来显示图像。您可以使用嵌入式。

如果图像在您的类路径中，您可以使用以下命令：

Embedded newPicture = new Embedded("", new ClassResource("my-picture.png", myApplication));
newPicture.setType(Embedded.TYPE_IMAGE);
window.replaceComponent(oldPicture, newPicture);

如果在其他地方找到它们，请使用此命令：

URL url = new URL("http://localhost:8888/portlet/KiviatDiagramm?background=blue");
Embedded newPicture = new Embedded("", new ExternalResource(url));
newPicture.setType(Embedded.TYPE_IMAGE);
window.replaceComponent(oldPicture, newPicture);

这可能会解决您的问题。

Answer 2

查看 Vaadin API javadoc，

我发现

public void replaceComponent(Component oldComponent,Component newComponent)

我还没有测试它......但它应该可以工作。