Vaadin Window resize and component inside auto alignment

Question

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

}


}

Normal window without maximizing it:-

After maximizing the window:-

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?

Answer 1

@AndréSchild 's comment is right one, e.g. set the TwinColSelect 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.

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

        @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 {
    }
}