The Vaadin Designer 1.0 has been released packing a bunch of powerful features to help you quickly develop your application’s views. One of such features is the ability to use templates as a basis for your views. In this post I’ll teach you how to install and use the templates.
First you need a template. The 1.0 release ships with just a few basic templates, so we’re better off using a bit more comprehensive template. You can download a set of templates for a dashboard type application from vaadin.com/designer (scroll down to the templates section).
Next you need to install the template. First create a directory path .vaadin/designer/templates in your home directory. Then copy the template file to the templates directory. Once the template file is in the directory, Vaadin Designer will pick it up. The Designer template is a Vaadin declarative design file which Vaadin Designer can use as a basis of your new design. The template may also contain style definitions, which will be automatically copied to your application theme.
In your Vaadin project, create a new design by right-clicking your project and selecting New → Other... → Vaadin Design. Give a name to your design, e.g. MainViewDesign, and select the installed template from the list of available ones. The template you just added should be in the list. Select for instance NavigationTemplateVaadin and click next. The wizard finds style definitions from the template file and displays them in the text area. By default the option to automatically copy the style definitions to your application theme is selected. Click Finish and the design file and the backing Java file are created.
To use the design in your application, just instantiate the class defined in the backing Java file and set it as the content of your UI.
@Override
protected void init(VaadinRequest vaadinRequest) {
setContent(new MainViewDesign());
}
Now you have a great starting point for your dashboard style application. You can modify the design as you wish and preview your modifications as you edit them. Great job.