Component Position

i have an simple portlet with few components : 3 Buttons 1 Slider 1 MenuBar and a Picture (generated by servlet) now when i switch between pictures ( have more of them) i want the picture to be placed at the old pictures position:

My picture is in the left corner of the portlet the buttons menubar and the slider are under the picture when i select another picture the new picture is being drawn under the other components (under the buttons , menubar , slider ) so the buttons … are top and the picture is at the bottom of the portlet

for example i change the background of the picture by selecting the color in the menu :


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

the new picture with the new background color is being draw under the other components

The addComponent() adds the Label at the end of the layout of the window.

You probably have the default VerticalLayout as the layout of the window. It has a
replaceComponent()
method, which allows you to replace a component in place. There’s also addComponent(Component, int index), which allows you to add a component at a certain index position.

Is there a reason for using a Label to display an image, and not an Embedded with a bound Resource? When you need to change the image, you can simply change the resource object without having to create a new Embedded component.

there is actualy no reason of using a Label to display an image it should be a fast solution .

    		public void menuSelected(MenuItem selectedItem){
    			if(pictureA.isVisible()){	
        			URL url = null;
					try {
						url = new URL("http://localhost:8888/portlet/KiviatDiagramm?background=blue");
					} catch (MalformedURLException e) {
						e.printStackTrace();
					}
        			Embedded newPicture = new Embedded("", new ExternalResource(url));
        		    newPicture.setType(Embedded.TYPE_IMAGE);
        			window.replaceComponent(pictureA, newPicture);
        		   } else {
                       window.showNotification("", Notification.TYPE_WARNING_MESSAGE);
        		   }
    		}

here is the solution i’ve tryed. it replaces the pictureA once when i select the color but if i click on the same color again the old picture remains and the new pic is again created under the old components .

Hi!

Why don’t you use what Marko said in his last paragraph?
You should just change the resource for the previously definied picture (which is an Embedded object) like this (the pictureA or the component what you want to change it’s good to be setImmediate(true) ) :

public void menuSelected(MenuItem selectedItem){
	if (pictureA.isVisible) {
		URL url = null;
		try {
			url = new URL("http://localhost:8888/portlet/KiviatDiagramm?background=blue");
		} catch (MalformedURLException e) {
			e.printStackTrace();
		}
        	Resource newPictureResource = new ExternalResource(url));
	        newPictureResource.setType(Embedded.TYPE_IMAGE);
        	pictureA.setResource(newPictureResource);
	} else {
		window.showNotification("", Notification.TYPE_WARNING_MESSAGE);
	}
}

Good luck and please let us know if this works, bye
Károly Kótay-Szabó

I put the images to a panel and fixed it over the other components so the pctures cant change their position.

I tryed to reasign the resource but it doesnt work :


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