Directory

← Back

UI Flexers for Vaadin

A set of helper classes for creating a responsive Vaadin UI

Author

Rating

Popularity

<100

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

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Released
2014-06-30
Maturity
STABLE
License
BSD 2-clause "Simplified" License

Compatibility

Framework
Vaadin 7.0+
Browser
Browser Independent

UI Flexers for Vaadin - Vaadin Add-on Directory

A set of helper classes for creating a responsive Vaadin UI UI Flexers for Vaadin - Vaadin Add-on Directory
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.
Online