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. This allows you for instance to change font sizes, margins etc. 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. 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. It’s a bit contrived, but shows the functionality: mainly how different parts of the UI adapt to changing widths of their container. What it doesĬheck out a quick demo of the add-on. 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. 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. 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). Some of you have asked how to do responsive layouts with Vaadin, but we haven’t had any proper answers. While it is more related to content heavy websites than web apps, the same principles can be applied to applications as well. 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). 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 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. 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. We’re releasing a preview version of an add-on, simply called Vaadin Responsive, for making responsive design possible in Vaadin applications.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |