title: Component Position (Vaadin)
body: <p>I have a simple portlet with a few components : 3 <code>Button</code> objects, 1 <code>Slider</code>, 1 <code>MenuBar</code> and a picture assigned to a <code>Label</code> (generated by servlet). Now when I switch between pictures for a <code>Label</code> (I have more of them), I want the picture <code>Label</code> to be placed at the old picture <code>Label</code> object's position: </p>
  
  <p>My picture <code>Label</code> is in the left corner of the portlet. The <code>Button</code> objects, <code>MenuBar</code>, and the <code>Slider</code> are under the picture <code>Label</code> when I select another picture <code>Label</code> the new picture <code>Label</code> is being drawn under the other components (under the <code>Button</code> objects , <code>MenuBar</code> , <code>Slider</code> ) so the <code>Button</code> objects... are top and the picture <code>Label</code> is at the bottom  of the portlet </p>
  
  <p>for example, I change the background of the picture <code>Label</code> by selecting the color in the menu :</p>
  
  <pre><code>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("&lt;img src=http://localhost:8888/portlet/KiviatDiagramm?background=blue", Label.CONTENT_XHTML);
              window.addComponent(pictureA);
          } else {
              window.showNotification("", Notification.TYPE_WARNING_MESSAGE);
  
          }
      }
  });
  </code></pre>
  
  <p><strong>UPDATE :</strong> </p>
  
  <p>I have switched from <code>Label</code> objects to embedded images (<code>Embedded</code>) (which is a lot better) I have tried to reassign the resource on the <code>Embedded</code> object with the new color but it doesn't work, here is what I've done :</p>
  
  <pre><code>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");
                  }
          }
     });
  </code></pre>