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.
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);
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.
- BSD 2-clause "Simplified" License
- Vaadin 7.0+
- Browser Independent