Documentation versions (currently viewingVaadin 7)


Vaadin provides a comprehensive set of user interface components and allows you to define custom components. User Interface Component Class Hierarchy illustrates the inheritance hierarchy of the UI component classes and interfaces. Interfaces are displayed in gray, abstract classes in orange, and regular classes in blue. An annotated version of the diagram is featured in the Vaadin Cheat Sheet.

User Interface Component Class Hierarchy

At the top of the interface hierarchy, we have the Component interface. At the top of the class hierarchy, we have the AbstractComponent class. It is inherited by two other abstract classes: AbstractField, inherited further by field components, and AbstractComponentContainer, inherited by various container and layout components. Components that are not bound to a content data model, such as labels and links, inherit AbstractComponent directly.

The layout of the various components in a window is controlled, logically, by layout components, just like in conventional Java UI toolkits for desktop applications. In addition, with the CustomLayout component, you can write a custom layout as an HTML template that includes the locations of any contained components. Looking at the inheritance diagram, we can see that layout components inherit the AbstractComponentContainer and the Layout interface. Layout components are described in detail in "Managing Layout".

Looking at it from the perspective of an object hierarchy, we would have a Window object, which contains a hierachy of layout components, which again contain other layout components, field components, and other visible components.

You can browse the built-in UI components of Vaadin library in the Sampler application of the Vaadin Demo. The Sampler shows a description, JavaDoc documentation, and a code samples for each of the components.

In addition to the built-in components, many components are available as add-ons, either from the Vaadin Directory or from independent sources. Both commercial and free components exist. The installation of add-ons is described in "Using Vaadin Add-ons".

Vaadin Cheat Sheet and Refcard

User Interface Component Class Hierarchy is included in the Vaadin Cheat Sheet that illustrates the basic relationship hierarchy of the user interface components and data binding classes and interfaces. You can download it at

The diagram is also included in the six-page DZone Refcard, which you can find at