Accessibility Now
Join our upcoming webinar about accessibility standards and legislation. May 19, 2022.
Blog

Using templates in Vaadin Designer

By  
Johannes Häyry
Johannes Häyry
·
On Oct 28, 2015 12:00:00 PM
·

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.

template imported into Vaadin Designer

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.

See more detailed instructions

Johannes Häyry
Johannes Häyry
I'm a developer disguised as a product marketer. I usually write about new Vaadin releases or the upcoming cool features on the roadmap.
Other posts by Johannes Häyry