java - 组件位置 (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 )(这要好得多)我尝试重新分配 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 .

如果图像位于您的类路径中，您可以使用以下内容:

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);

这可能会解决您的问题。