MediaQuery

Simple extension to bind CSS Media query in Java, help to build responsive UI

View larger

Close

View larger

Close

Feature 1

Add CustomMediaQuery in your view with a action and a Media query. When the result of the CSS media query result changed, call the action. This helps to build responsive UI from the Java side. For example, you can show a component only if the width of the view is less than 800px.

Use Case

Display or hide a column for a Vaadin Grid if screen size < 1000px

Feature 2

Use ClientMediaQuery to update your styles from Java.

Feature 3

ElementMediaQuery is similar to CustomMediaQuery but you can apply the Media Query to an element. For example, you can show a component only if the width of the component is less than 800px. It's based on ResizeObserver so not working in Internet Explorer 11. https://caniuse.com/#feat=resizeobserver It's heavier than CustomMediaQuery since it emulates the native media query to an element in Javascript.

You can find an example in github.

Sample code

@Route("")
public class DemoView extends VerticalLayout {

    private final Grid<Person> grid;
    public DemoView() {

        List<Person> persons = new ArrayList<>();

        for (int i = 0; i<20; i++) {
            persons.add(new Person("name"+i, "surname"+i, "ES"));
        }

        grid = new Grid<>(Person.class);

        grid.setItems(persons);
        expand(grid);
        CustomMediaQuery customMediaQuery1200 = new CustomMediaQuery(this::toggleColumnCountry);
        CustomMediaQuery customMediaQuery800 = new CustomMediaQuery(this::toggleColumnSurname);
        add(new H1("Grid"));
        add(customMediaQuery1200, customMediaQuery800, grid);
        customMediaQuery1200.setQuery("(min-width: 1200px)");
        customMediaQuery800.setQuery("(min-width: 800px)");
    }

    private void toggleColumnCountry(boolean visible){
        grid.getColumnByKey("country").setVisible(visible);
    }

    private void toggleColumnSurname(boolean visible){
        grid.getColumnByKey("surname").setVisible(visible);
    }


    public class Person {

        private String name;
        private String surname;
        private String country;

        public Person(String name, String surname, String country) {
            this.name = name;
            this.surname = surname;
            this.country = country;
        }

        public String getName() {
            return name;
        }

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

        public String getSurname() {
            return surname;
        }

        public void setSurname(String surname) {
            this.surname = surname;
        }

        public String getCountry() {
            return country;
        }

        public void setCountry(String country) {
            this.country = country;
        }

        @Override
        public String toString() {
            return "Person{" +
                    "name='" + name + '\'' +
                    ", surname='" + surname + '\'' +
                    ", country='" + country + '\'' +
                    '}';
        }
    }
}

        Div div = new Div();
        div.setWidth("200px");
        div.setHeight("200px");
        ClientMediaQuery clientMediaQuery1200 = new ClientMediaQuery(div);
        ClientMediaQuery clientMediaQuery800 = new ClientMediaQuery(div);
        ClientMediaQuery clientMediaQuery0 = new ClientMediaQuery(div);
        clientMediaQuery1200.setQuery(new MediaQuery(new MinWidth("1200px")));
        clientMediaQuery800.setQuery(new MediaQuery(new MinWidth("800px"),new MaxWidth("1200px")));
        clientMediaQuery0.setQuery(new MediaQuery(new MaxWidth("800px")));
        clientMediaQuery1200.getQueryStyle().set("background","green");
        clientMediaQuery800.getQueryStyle().set("background","blue");
        clientMediaQuery0.getQueryStyle().set("background","red");

/**Change the color of a div is the window size < 1024px and div width < 300px **/
@Route("mediaquery")
public class MediaQueryView extends VerticalLayout {

    private boolean div300pxOrLess = false;
    private boolean window1024OrLess = false;
    private Div div;
    private Span textWindow;
    private Span textDiv;

    public MediaQueryView() {
        setSizeFull();
        div = new Div();
        div.setWidth("50%");
        div.setHeight("100px");
        textWindow = new Span("window1024OrLess");
        textDiv = new Span("div300pxOrLess");
        add(div, textWindow, textDiv);
        CustomMediaQuery customMediaQuery1024 = new CustomMediaQuery(this::updateWindows1024OrLess);
        add(customMediaQuery1024);
        customMediaQuery1024.setQuery(new MediaQuery(new WidthAttributes.MaxWidth("1024px")));
        ElementMediaQuery elementMediaQuery300 = new ElementMediaQuery(this::updateDiv300OrLess);
        elementMediaQuery300.setElement(div);
        elementMediaQuery300.setQuery(new MediaQuery(new WidthAttributes.MaxWidth("300px")));
        add(elementMediaQuery300);
    }

    private void updateWindows1024OrLess(Boolean window1024OrLess) {
        this.window1024OrLess = window1024OrLess;
        textWindow.setVisible(window1024OrLess);
        updateCondition();
    }

    private void updateDiv300OrLess(Boolean div300pxOrLess) {
        this.div300pxOrLess = div300pxOrLess;
        textDiv.setVisible(div300pxOrLess);
        updateCondition();
    }
    private void updateCondition() {
        if (window1024OrLess && div300pxOrLess) {
            div.getStyle().set("background-color", "green");
        } else {
            div.getStyle().set("background-color", "red");
        }
    }

}

Links

• Source Code
• Issue tracker

Compatibility