Docs

Docs

Using Vaadin Mixin Interfaces

Using mixin interfaces to add a common API to Vaadin components.

A mixin refers to a defined amount of functionality that can be added to a class. Previously, Java didn’t support this kind of multiple inheritance. However, since Java 8 interfaces can also include default methods, which allows them to work as mixins.

Vaadin uses the mixin concept to provide common APIs and default behavior for sets of functionalities found in most Web Components.

The most important predefined mixins are provided by the HasSize, HasComponents, and HasStyle interfaces. You can use these interfaces to add typical functions to your Java components.

HasSize Interface

If your component implements the HasSize interface, you can set the size of the component using the setWidth(String) and setHeight(String) methods. This interface extends HasElement mixin.

Full method summary of the HasSize interface.

HasComponents Interface

If your component implements the HasComponents interface, you can add and remove child components to and from it. This interface extends the HasElement and HasEnabled mixins. Using this mixin is covered in the Component Containers reference guide.

Full method summary of the HasComponents interface.

HasStyle Interface

The HasStyle interface adds a CSS class attribute and supports inline styles. Component implements it by default. It extends the HasElement mixin.

Full method summary of the HasStyle interface.

Other Useful Mixin Interfaces

Vaadin provides many additional useful mixin interfaces. HasElement is a low level API that is extended by most other mixins. HasElement is a marker interface for any class that’s based on an Element.

The following list has mixins depending directly on a root element — all of which extends HasElement:

  • HasArialLabel is for components and other UI objects that may have an aria-label and an aria-labelledby DOM attributes to set the accessible name of the component.

  • HasEnabled is for components and other UI objects that can be enabled or disabled.

  • HasHelper is for field components that have helper text as property and slots for inserting components.

  • HasLabel is for components that support label definition.

  • HasOrderedComponents supports ordered child components, with an index for the layout.

  • HasText is for components that support text content.

  • HasTheme is for components that have a theme DOM attribute.

  • HasValueAndElement is the same as HasValue. It also extends HasElement and HasEnabled.

  • Focusable<T> provides methods to gain and lose focus.

The following mixins are for more generic use, without direct dependency to any root element:

  • HasItems is for components that display a collection of items.

  • HasDataProvider<T> is for listing components that use a data provider to display data. It also extends HasItems.

  • HasValidation is for components that supports input validation.

  • HasValue is for field components and other UI objects that have a user-editable value.

Advantages of Mixin Interfaces

Using Vaadin mixins is a best practice because their code and functionality has been thoroughly checked and tested by Vaadin. Mixins also keep your code clean and simple.

Example 1. Setting a component’s with without and with the HasSize mixin interface
Source code
// Before implementing HasSize:
getElement().getStyle().set("width", "300px");
// After implementing HasSize:
setWidth("300px");

7E2169AD-5503-46B1-B044-6043B5C8BB4B