Announcing Vaadin declarative format

For all the years Vaadin has existed, the only supported way of building UIs has been through the use of a Java API. Java is a very powerful and flexible way to construct the component hierarchy but sometimes, it can become very verbose and tedious to write. Reading other peoples’ Java layout code can also sometimes be hard.

In Vaadin 7.4, we introduce a new, declarative way of defining your UIs.

A login form

can now be written using a concise HTML-like syntax

<v-panel>
<v-vertical-layout margin spacing>
    <v-label><h3>Sign In</h3></v-label>
    <v-horizontal-layout spacing>
        <v-text-field caption="Email" />
        <v-password-field caption="Password" />
    </v-horizontal-layout>
    <v-button style-name="primary">Sign In</v-button>
</v-vertical-layout>
</v-panel>

With the declarative format you can configure a Vaadin component using HTML attributes (which are mapped to setters) and tags (which are mapped to component classes). You can even use add-ons by mapping additional namespaces (the “v-” part of the name is a namespace mapping for com.vaadin.ui). Do note that even though the format looks like HTML, it is not actually sent to the browser but parsed on the server side into a component tree.

The declarative format is not aimed at replacing Java but to complement it. In the real world you will want to bind the declaratively defined fields to your Java code so you can bind data, add event listeners and more. The easiest way to do this is to create a Java class with fields, which are automatically mapped to the HTML file based on ids or captions.

@DesignRoot
public class Login extends Panel {
    private Button signIn;
    private TextField email;
    private PasswordField password;
    public Login() {
        Design.read(this);
        // Add some listeners or bind data using the fields
    }
}

This will nicely encapsulate your designed component tree inside a Vaadin component so you can use it like

UI.setContent(new Login());

There are other methods of reading the design, for the simple case when you just want the components you can to Design.read(InputStream). For more ways, see the Design class. There are even methods for writing out a design based on an existing component tree!

Update your Maven dependency to 7.4.0.beta1 today to try it out, or see the new sample for the declarative syntax.