Vaadin Tip: building UIs declaratively
If you have used GWT, then you would have probably found UiBinder quite useful to design complex UIs. In our series of posts about Vaadin, we want to draw parallels between Vaadin and GWT. Vaadin offers several tools and components out of the box for building complex and good looking UIs. One of them is the possiblity of building UIs declaratively, like UiBinder. Compared to GWT, Vaadin offers the possibility to use .html files directly.
The programmatic way :
As in GWT, Vaadin UIs can also be built programmatically. For example, let’s suppose we want to build a simple form to add a task to a todo list. One way to do it programmatically:
The declarative way :
The declarative way can be useful if the UI is complex, and has nested components. Vaadin developed HTML custom elements that can be bound to Java components. The custom elements start with vaadin-. The rest of the name of the element can extracted from the java class by separating words and making it lower case, as detailed in Vaadin’s website. The first step in creating a UI in a declarative way is to create the html file, let’s name it Form.html:
The second step is to create a java class that will be bound to this file.
now we can use it as a normal Component from our UI class:
To bind fields from the .html to fields in the java class, the _id attribute need to be setup. For example, to bind our textfield:
and then we can add it to the java file and it will be automatically bound:
Vaadin provides also an interesting tool for interactively designing UIs: Vaadin Designer. Vaadin designer allows designing UIs using the mouse and drag-&-drop. We have used the tool for demo purposes only, so we cannot really evaluate it. Vaadin-Designer can help increasing productivity by reducing the time to build the UIs and taking care of the “boilerplate” part. Unfortunately, Vaadin Designer is not free of charge, and its added value depends from one project to another.
Designing UIs in a programmatic way is not always convenient. Vaading has an interesting approach towards building UIs in a declarative way. The HTML custom elements provides a way to directly link .html files to java. Maybe this is a road to explore by GWT developers, as UiBinder will be removed in the next 3.0 version.