Vaadin Window resize and component inside auto alignment

I have a class that extends Window as follows. I am only giving Window related code. Window Component code is removed to keep the code and question clear. I got a window looks like in the picture. When I resize the window, I was expecting that the components inside the window will also be resized. I guess there is some API call I am missing to maintain the component ration increased together with the window. Or do I need to do it by myself programmatically? Please let me know how it can be done?

public class VisibleColumnPanel extends Window implements Window.ResizeListener{

public VisibleColumnPanel(){

center();
setResizable(true);
setModal(true);
setImmediate(true);
//setSizeFull();
addListener(this);
this.setWidth(720, Unit.PIXELS);
this.setHeight(600, Unit.PIXELS);
}

@Override
public void windowResized(ResizeEvent resizeEvent) {

System.out.println("hit here now");

 }
 }

So is there any way that the component inside the window all also expend or maintain their ration together with the window?

I could programmatically do it if I could handle maximize button click event. I implemented implements Window.ResizeListener. windowResized event only fired when I try to resize the window by dragging the mouse. Is there any way to get maximize/restore button click event?

17053897.png
17053900.png

Did you set the TwinColSelect which in side window to be setWidth(“100%”)?

Also note, that there is documented bug, that TwinColSelect resizing does not always happen correctly in Window https://github.com/vaadin/framework/issues/10652 The good news is that fix for that is under works.

I am not using TwinColSelect. I am using Panel and table. I am using Vaadin 7. As:-

  faFormatTable = new Table("");
  faFormatTable.setHeight(420, Unit.PIXELS);
  faFormatTable.setWidth(280, Unit.PIXELS);
   Panel leftPanel = new Panel();
    leftPanel.setCaption(SalkkuTM.getI18N("VisibleColumnPanel.available.caption"));
    leftPanel.setHeight(450, Unit.PIXELS);
    leftPanel.setWidth(100, Unit.PERCENTAGE);
    leftPanel.setScrollLeft(800);
    leftPanel.setScrollTop(800);
    leftPanel.setContent(faFormatTable);

Can you please tell me. How can I catch maximise/restore button click?

You do not need catch resize event to accomplish what you are trying. Instead you should use layouting parameters correctly, so that components and layouts adjust correctly. This way it works more efficiently (i.e. no server roundtrip), since browser will know how to resize.

Here is a simplief example app

package com.example.myapplication;

import java.io.Serializable;
import java.util.Arrays;
import java.util.List;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {

	public class Person implements Serializable {

		public Person(String name, int birthyear) {
		    this.name = name;
		    this.birthyear = birthyear;
		}

		public String getName() {
		    return name;
		}

		public void setName(String name) {
		    this.name = name;
		}

		public int getBirthyear() {
		    return birthyear;
		}

		public void setBirthyear(int birthyear) {
		    this.birthyear = birthyear;
		}

		private String name;
		private int birthyear;
		}

	public class MyWindow extends Window implements Window.ResizeListener {
        final HorizontalLayout hLayout = new HorizontalLayout();

        public MyWindow() {
        	setCaption("Grid");
        	List<Person> people = Arrays.asList(
                new Person("Nicolaus Copernicus", 1543),
                new Person("Galileo Galilei", 1564),
                new Person("Johannes Kepler", 1571));

        	Grid<Person> grid1 = new Grid<>();
        	grid1.setItems(people);
        	grid1.addColumn(Person::getName).setCaption("Name");
        	grid1.addColumn(Person::getBirthyear).setCaption("Year of birth");
        	grid1.setWidth("100%");
        
        	VerticalLayout buttons = new VerticalLayout();
        
        	Button button1 = new Button("<-");
        	Button button2 = new Button("->");
        	buttons.addComponents(button1,button2);
        	buttons.setComponentAlignment(button1, Alignment.MIDDLE_CENTER);
        	buttons.setComponentAlignment(button2, Alignment.MIDDLE_CENTER);
        	
        	Grid<Person> grid2 = new Grid<>();
        	grid2.setItems(people);
        	grid2.addColumn(Person::getName).setCaption("Name");
        	grid2.addColumn(Person::getBirthyear).setCaption("Year of birth");
        	grid2.setWidth("100%");
        
        	hLayout.addComponents(grid1,buttons,grid2);
        	hLayout.setExpandRatio(grid1, 3);
        	hLayout.setExpandRatio(buttons, 1);
        	hLayout.setExpandRatio(grid2, 3);
        	hLayout.setWidth("100%");
        
        	setContent(hLayout);
        	setWidth("800px");
        	addResizeListener(this);
        }

		@Override
		public void windowResized(ResizeEvent e) {
			System.out.println("Window resized");
		}
	}
	
    @Override
    protected void init(VaadinRequest vaadinRequest) {
        final VerticalLayout layout = new VerticalLayout();
        Label label = new Label("Window example");
        layout.addComponent(label);
        
        final MyWindow window = new MyWindow();

        addWindow(window);
        
        window.addResizeListener(event -> {
        	Label lab = new Label("Window resized");
        	layout.addComponent(lab);
        });
        
        setContent(layout);
    }

    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

Edit: Remember to call addResizeListener(this) in MyWindow, otherwise the listener is not registered.

Hi Tatu Lund,

I tried the above sample but it does not work. When I press the + and _ button on the window, its not firing any event in my sample.

My window class would look like this:

public class TestWindow extends Window implements Window.ResizeListener {

private static final long serialVersionUID = 1L;
private GirdPanel mGirdPanel;

public TestWindow() {
	super();
}

public void createControls() {

	this.setCaption("Test");
	this.setClosable(true);
	this.setModal(true);
	this.setWidth("60%");
	this.setResizable(true);
	this.center();

	mGirdPanel = new PositionGrid2();
	mGirdPanel.createControl();

	this.setContent(mGirdPanel);
	addResizeListener(this);

}

@Override
public void windowResized(ResizeEvent e) {
	
	System.out.println("Window resized");

}

}

And I call this window when a button is clicked like below:

Button button = new Button(“Button”);
button.addClickListener(new ClickListener() {

			public void buttonClick(ClickEvent event) {
				eventButtonClick();
			}
		});

		addComponent(button);

	} catch (Exception e) {
		
	}
}

private void eventButtonClick() {
	TestWindow testWindow = new TestWindow();
	testWindow.createControls();

	getUI().addWindow(testWindow);
	
	testWindow.addResizeListener(event -> {
    	
		System.out.println("WINDOW RESIZED>>>>>>>");
    });
}

Still am not able to see any of those println line in my console in the event listener.
Please let me know whether I have gone wrong some where.

Thanks