UI repainting

Hi,
Could somebody give me an explanation on how to force repainting of a nested ‘panel’?
(When I say panels I mean Layouts)

I’m very confused with
requestRepaint
and
replaceComponent
mechanisms… which is the best strategy?

MyApplication.getInstance().panelPrincipal.panelSuperior.panelConectado.requestRepaint();
MyApplication.getInstance().panelPrincipal.panelSuperior.replaceComponent(oldPanelConectado, newPanelConectado);

Thanks

Hi,

If you are just using standard Vaadin components, there should never be a need to call the requestRepaint() method. If this is required and you’ve not created your own component, then it is possibly a bug in Vaadin.

The replaceComponent call will (as it name suggests) remove the old component from the component container and replace it with a new one. However it is usually enough just to update the fields of the old component when updating data in the UI, e.g. set a new value to a label or a new datasource to a Table/Tree/ComboBox etc.

Please provide more info on what exactly is the use case you need this for and I’ll try to provide a more accurate answer.


Tepi

Hi Teppo,
There is some more info…

I want to ‘refresh’ my PanelConectado component, nested inside similar components (panelPrincipal/panelSuperior/panelConectado), all of which follows similar structure:

public class PanelConectado extends CustomComponent {

	private HorizontalLayout mainLayout = null; 

	public PanelConectado() {
		buildMainLayout();
		setCompositionRoot(mainLayout);
	}

	public void buildMainLayout() {
		//Data things
		//...
		
		//UI things
		//...
			
		mainLayout = new HorizontalLayout();				
			//mainLayout.addComponent(...);
			//mainLayout.addComponent(...);
			//...
	}
	
}
  1. Next snippet, which follows replaceComponent mechanism, works for me (although I need to repeat laying ‘instructions’ and seems to me not very straightforward ):
newPanelConectado = new PanelConectado();        
PanelSuperior panelSuperior = MyApplication.getInstance().panelPrincipal.panelSuperior;
panelSuperior.mainLayout.replaceComponent(panelSuperior.panelConectado, newPanelConectado);                        
    	panelSuperior.mainLayout.setComponentAlignment(newPanelConectado, Alignment.MIDDLE_RIGHT);		panelSuperior.mainLayout.setExpandRatio(newPanelConectado, 2.0f);    		    		        
    	panelSuperior.panelConectado = newPanelConectado;
  1. Next snippet, which follows your suggested strategy (as long as I understand) doesn’t work for me (=panelConectado doesnt get refreshed):
MyApplication.getInstance().panelPrincipal.panelSuperior.panelConectado.buildMainLayout();

Thanks for your hints…

This works correctly because you’re building an entirely new instance of PanelConectado and replacing the old one with it.

This does not work because it builds a new mainLayout with all the new component but does not put the layout anywhere, so the old layout is still the composition root of your PanelConectado.

I’d probably extract the components requiring refreshing to fields in the PanelConectado component. That way you only have to create the components once. Then you can add e.g. an update() method to PanelConectado which sets the new values to the components which are already attached to your mainLayout.

There is basically nothing wrong with the method you describe first, but it requires more code on every refresh (instantiate component, replace the old one with it and set component properties), and new components are instantiated on every refresh.


Tepi

I’ve got it, thank you very much.

MyApplication.getInstance().panelPrincipal.panelSuperior.panelConectado.refresh();
public class PanelConectado extends CustomComponent {

	private HorizontalLayout mainLayout = null; 	
	private MyButton btn1 = null;

	public PanelConectado() {
		buildMainLayout();
		refresh();
		setCompositionRoot(mainLayout);
	}

	private void buildMainLayout() {
		btn1 = new MyButton("", this, "editarCuentaBtnClick");	
		 	btn1.addStyleName("first");
		 	btn1.addStyleName("last");		 	
		 	
		mainLayout = new HorizontalLayout();				
			mainLayout.addComponent(btn1);
			mainLayout.setStyleName("segment");
			mainLayout.addStyleName("segment-alternate");
	}
	
	public void refresh() {
		//Datos
		Administrador administrador = MyApplication.getInstance().administrador;
		Local local = administrador.getLocal();		
		String nombreCompleto = administrador.getNombreCompleto();
					
		String siglasLocal = local.getSiglasCulturaGlobal();
		if (local.getSiglasCulturaLocal() != null) {
			siglasLocal = siglasLocal + "_" + local.getSiglasCulturaLocal();
		}
		
		String nombresLocal = local.getNombreCulturaGlobal();
		if (local.getNombreCulturaLocal() != null) {
			nombresLocal = nombresLocal + ", " + local.getNombreCulturaLocal();
		}

		//UI
		ThemeResource bandera = new ThemeResource("img/locales/" + siglasLocal + ".png");
		
		btn1.setCaption(" " + nombreCompleto);
		btn1.setIcon(bandera);
		btn1.setDescription(nombresLocal + " (" + siglasLocal + ")");		
	}

	public void editarCuentaBtnClick(Button.ClickEvent event) {					
		MyApplication.getInstance().editarCuenta();		
	}		
		
}