Vaadin 7 FAQ

How to remove UI component from tab order?

Setting a negative tab index removes the component from the tab order and cannot be reached via tab.


How to scroll to the top of the page?


How to get the ServletContext?

In Vaadin 7 some things are stored by using ThreadLocal.

ServletContext servletContext = VaadinServlet.getCurrent().getServletContext();

How to bind nested properties?

Generally the FieldGroup class is used to bind properties to fields. But for nested properties the class BeanFieldGroup must be used as only this class supports nested propeties. The nested property is specified as follows:

fieldgroup.bind(field, "property.nestedproperty");


fieldgroup.bind(streetField, "address.street");

How to format numeric field?

From Vaadin 7 on numbers in fields are converted using default converters like StringToIntegerConverter. These converters use the default number formats for the current Locale. This can be overridden by extending the converter.

TextField idField.setConverter(new StringToIntegerConverter() {
            private static final long serialVersionUID = -1725520453911073564L;

            protected NumberFormat getFormat(Locale locale) {
                return new DecimalFormat("#");

How to format numeric values in a table?

One way of handling numbers is to create a generated column and format the value by yourself (making a String from the Integer/Long/Double). Another possibility is to override formatPropertyValue() like this:

Table table = new Table() {                                                                 
    private static final long serialVersionUID = 4615263191008145570L;                      
    private NumberFormat formatter = new DecimalFormat("#");
    protected String formatPropertyValue(Object rowId, Object colId, Property<?> property) {
        if (property == null || property.getValue() == null) {                              
            return super.formatPropertyValue(rowId, colId, property);                       
        else if (property.getType() == Integer.class) {                                     
            return formatter.format((Integer) property.getValue());                         
        else {                                                                              
            return super.formatPropertyValue(rowId, colId, property);                       

How to specify an error message when a conversion exception occurs on a text field?

The message from any exception of the validator is ignored. Only the conversion error message set on the text field component will be used. It has a default value which should be adjusted to the application, see TextField.setConversionError(message).


Much has changed from Vaadin 6 to Vaadin 7. One of those changes is the CustomField class which is now totally integrated into the Vaadin Core Framework.

A custom field is most of the time a composition of UI elements which acts as a field. The type of value for that field is stated as the generic value of the CustomField interface like

public class EmailField extends CustomField<String> { ... }

The method getType returns the class used as a value (same as used on the class statement).

public Class<? extends String> getType() {
  return String.class;

Vaadin uses a variable internally to hold the value of the CustomField. But this variable needs to change reflecting the value change of the TextField (in our case). So a ValueChangeListener is needed.

field.addValueChangeListener(new Property.ValueChangeListener() {
    public void valueChange( event) {

Now if a value is already bound to the model used with the FieldGroup then a NullPointerException will probably occur because the field is instantiated in the initComponents method which gets called after the setInternalValue method. So the instantiation needs to be moved to the constructor of the class.

public EmailField() {
    field = new TextField();

How to set row height in table?

The row height of a table row can by styled with CSS. Add a custom style name to the table to only affect that table.


Now add some CSS to your application either via the theme or dynamically via the Page class.

.my_styled_table .v-table-table th, .my_styled_table .v-table-table td {
    height: 30px;
    min-height: 30px;