We’re releasing a preview version of an add-on, simply called Vaadin Responsive, for making responsive design possible in Vaadin applications. With this early version, we hope to gather feedback about responsive design in general, what wishes and needs you have, and to improve the add-on from there. It provides us with a good proving ground for such features, and we will consider adding them directly to the core framework if they prove to be useful for many.
What is responsive design
If you’ve been following the web development community during the last few years, you’ve probably encountered the term “responsive web design” (RWD). It is a web design approach aimed at crafting sites to provide an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices (from desktop computer monitors to mobile phones) (from Wikipedia). While it is more related to content heavy websites than web apps, the same principles can be applied to applications as well.
Some of you have asked how to do responsive layouts with Vaadin, but we haven’t had any proper answers. Of course, it has been possible to use CSS Media Queries to adapt your layouts to different browser window sizes, but they don’t work in Internet Explorer 8, which is somewhat problematic for Vaadin apps (you could argue IE8 doesn’t need responsive layouts, but let’s not get into that now). Another issue is that media queries (viewport dimensions specifically) are relative to the whole browser window size, making it difficult to use them for sub-parts of your applications. For instance, you can’t know the size of a side of a split panel, since the user can drag the splitter into different positions without the browser window size changing.
What it does
Check out a quick demo of the add-on. It’s a bit contrived, but shows the functionality: mainly how different parts of the UI adapt to changing widths of their container.
The Vaadin Responsive is an extension that can be added to any component or UI, making that particular component/UI instance react to its width and height changes in the browser. You can then define width and height ranges (something that web designers like to call breakpoints, but that term is a bit misleading in the tradional developer context) in CSS and adjust the styles to suit those particular ranges.
This allows you for instance to change font sizes, margins etc. depending on the size of a component, or to arrange the contents of a layout from horizontal to vertical when there is not enough room to show it horizontally.
That’s all it does now, but it could for instance communicate those same ranges back to the server and tell when each of them is active, allowing the developer to adjust more than just the styling of the component. That’s why we need your feedback, so we can decide what functionalities are the most important.
How to use it
You can download the first preview version of the add-on from the Directory. If you need help using add-ons, here are the instructions.
A simple use example:
Java
CssLayout layout = new CssLayout();
// The responsive component needs to have 100% width for
// width-ranges to work, and similarly for height-ranges
layout.setSizeFull();
// Set a style name to target just this instance
layout.addStyleName("my-responsive-layout");
// Add the responsive functionality to the layout
new Responsive(layout);
CSS
.my-responsive-layout[width-range~="0-800px"] {
// Styles for 0-800px width
}
.my-responsive-layout[width-range~="801px-"] {
// Styles for 801px and wider
}
.my-responsive-layout[height-range~="0-100px"] {
// Styles for 0-100px height
}
How to help
As said, we’re looking for feedback for this early release. We need you to take it for a spin and tell us what works and what doesn’t, what use cases you have in mind for it and how well it currently handles them. And since it’s just an extension, it is easy to just try it out and remove it if you don’t find it necessary or suitable.
The source code is living in GitHub, and you can report any issues and suggestions there as well. Leave a comment here on the blog if you wish, we’re looking forward to hearing your opinions!