Directory

UI Flexers for Vaadin

A set of helper classes for creating a responsive Vaadin UI

Have you ever tried to create a responsive UI with components size set to 100%? Well it is possible thanks to feature called expand ratio. It's a great option but it has it's drawbacks... when resizing the browser window, it's easy for components to overlap each other... I've created bunch of simple 'flexer' classes, that can change the value of expand ratio according to height or width of browser window. You can add size constraints and pair them with desired expand ratio values. When resizing, expand ratios will change on the fly.

Sample code

        Flexer sidebarFlexer = new GridLayoutColumnFlexerImpl(this, 1);
        sidebarFlexer.addConstraint(1100, 15)
                .addConstraint(1180, 6)
                .addConstraint(1280, 4.5)
                .addConstraint(1350, 3.2)
                .addConstraint(1500, 2.2)
                .addConstraint(1700, 1.2)
                .addConstraint(1800, 1)
                .attach();

GridLayoutColumnFlexerImpl(GridLayout target, int colNo);
GridLayoutRowFlexerImpl(GridLayout target, int rowNo);
OrderedLayoutHeightFlexerImpl(AbstractOrderedLayout container, Component subject);
OrderedLayoutWidthFlexerImpl(AbstractOrderedLayout container, Component subject);

Links

• Source Code

Compatibility