Using Built-in Vaadin Themes in your HTML5 Applications

Making an HTML5 application that looks like an application takes more than sticking some form controls on a page. It requires some slick CSS and client-side scripting to differentiate an application from a static web page. The Vaadin Mobile Application Framework has you covered in both cases. Today’s article will describe how Vaadin uses themes to give your applications a consistent and refined appearance using the Exercises Catalog application that we built in the previous instalment.

First Things First: Setting Field Ordering

Before we get into themes, we should set the order of our form fields the way we want them. At first I thought that there was no rhyme or reason to the field order, but it quickly dawned on me that they are sorted alphabetically by name! That’s why the “End Position Image” is first and the “Start Position Image” is last. To achieve the ordering we want, we just need to add components to the layout one at a time. That also gives us the ability to set our own labels.

In this new version of the init() method:

1. The Exercises bean is instantiated.
2. A BeanFieldGroup instance is initialized with the Exercises bean’s class property.
3. Each component is added to the layout by passing in the results of the BeanFieldGroup instance’s buildAndBind() method. It accepts two arguments: the label string and the name of the bean property to bind to.

@Override
public void init(VaadinRequest request) {
  VerticalLayout layout = new VerticalLayout();
  getPage().setTitle("Exercises Catalog");
 
  // Have a bean
  Exercises exercises = new Exercises("Bench Press", "chest", "front delts, triceps, lats", "barbell", "compound", "pushing");
         
  // Form for editing the bean
  final BeanFieldGroup<Exercises> binder = new BeanFieldGroup<Exercises>(Exercises.class);
  binder.setItemDataSource(exercises);
  layout.addComponent(binder.buildAndBind("Name", "name"));
  layout.addComponent(binder.buildAndBind("Main Muscle Worked", "mainMuscleWorked"));
  layout.addComponent(binder.buildAndBind("Other Muscles Worked", "otherMuscles"));
  layout.addComponent(binder.buildAndBind("Equipment", "equipment"));
  layout.addComponent(binder.buildAndBind("Mechanics Type", "mechanicsType"));
  layout.addComponent(binder.buildAndBind("Force", "force"));
  layout.addComponent(binder.buildAndBind("Start Position Image", "startPositionImage"));
  layout.addComponent(binder.buildAndBind("End Position Image", "endPositionImage"));
 
  setContent(layout);
}

Now the controls are organized more logically:

Themes vs. Regular CSS

Styling your web apps in Vaadin is not quite as simple as writing up CSS stylesheets. The reason is that Vaadin uses Sass mixins and functions to compute the various theme features. Sass, an acronym for “Syntactically Awesome Style Sheets”, is an extension of CSS that adds extra features to the basic language, including variables, nested rules, mixins, inline imports. You can spot Sass stylesheets by their .scss or .sass extension. The former, known as Sassy CSS, is an extension of CSS3 syntax. Hence any valid CSS3 stylesheet is also a valid SCSS file. In addition, SCSS supports most CSS hacks and vendor-specific syntax, such as IE’s old filter syntax. The latter is an older syntax known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. For the purposes of this tutorial, we will be working with SCSS because Vaadin’s built-in themes are written in that format, and it also the syntax supported by the Vaadin Sass compiler (more on that later…).

Built-in Themes

Vaadin currently includes the following built-in themes:

• valo, the default theme since Vaadin 7.3
• reindeer, the default theme in Vaadin 6 and 7
• chameleon, an easily customizable theme
• runo, the default theme in IT Mill Toolkit 5
• liferay, for Liferay portlets

The built-in themes are provided in the respective VAADIN/themes/<theme>/styles.scss stylesheets in the vaadin-themes JAR. The precompiled raw CSS files are also included, in case you want to use the themes directly.

To use any of the above themes other than the default, include the @Theme annotation with the theme name:

@SuppressWarnings("serial")
@Theme("chameleon")
public class ExercisesUI extends UI {

Using Specific Theme Options

Each of the above themes comes with an assortment of style constants that can be employed to assign a style to a specific element. The Vaadin Demo Pages are a good starting place to get an idea of what each of them looks like as well as their individual style options. You might find it difficult to locate each theme from the main page, so I listed all the themes I could find above (no luck with Liferay, I’m afraid).

Taking a look at the Labels tab of the reindeer demo, we can see that the theme defines four types of labels, H1, H2, default, and small.

@Override
public void init(VaadinRequest request) {
  VerticalLayout layout = new VerticalLayout();
       
  //set the page <title>
  getPage().setTitle("Exercises Catalog");

  //creates the <h2> header
  Label header = new Label("Exercises Catalog");
  header.addStyleName(Reindeer.LABEL_H2);
  layout.addComponent(header);

Here is the form again with our new header:

Conclusion

Vaadin’s built-in themes provide all of the styles you need to make great-looking HTML5 apps, but for those of you who want to take the next step, Vaadin also provides a way to extend the built-in themes or even create your own from scratch if you wish. That will be the topic of the next article.