Vaadin Designer 1.2 comes with powerful new responsive design templates. With the new templates creating responsive application views is easier than ever before.
You use a template by creating a design: File ‣ New ‣ Vaadin Design. With Designer 1.2 you now have four new templates to choose from: Application Menu, Tile Layout, Responsive Form and Data Grid With Editor. All the templates work with all screen sizes. The templates contain style definitions, which means your application must have a custom application theme extending Valo theme, although you don’t need to do any changes to your theme’s SCSS files. If you don’t have a theme folder, the templates don’t look right and the responsive features don’t work. The styles are automatically imported to designs.scss file inside your theme folder.
Application Menu template
The Application Menu template has an action menu on the left side of the view. The menu changes its size and position depending on the screen size. The right side is the application content area, which you should use as a view display for your application views.
Tile Layout template
Tile Layout template is meant to be used in situations, where you need a view with a lot of information pieces to be shown together in a larger screen, but the content needs to adapt for smaller screen sizes too. The most obvious use case is for creating dashboard type views. The template comes with CSS classes you can use to control how the columns of the tile layout for each row are divided.
Responsive Form template
Responsive Form template has a comprehensive set of form fields grouped to sections. The field captions can be shown either on top of the fields or on the left side of the fields. You can use the template as the basis of your form - just remove any fields you don’t need. Naturally, the template displays the fields optimally for all screen sizes.
Data Grid With Editor template
Data Grid With Editor template gives you a data grid with a search field, and an editor form you can show in a row selection. The form is displayed differently depending on the available screen size.
Update to Vaadin Designer 1.2 today
Create good-looking and well designed UIs easily with the new responsive view templates. Update to Designer 1.2 today. I think you’re going to love it. To learn more details on how to use the templates, read this tutorial.
If you are not using Designer yet, check the product page for more details and start your free trial today.
Try Vaadin Designer 1.2