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.

HasComponentsOfType Interface

The HasComponentsOfType<T> interface is the typed counterpart of HasComponents. Implement it when your component should only accept child components of a specific type, so that the API statically prevents callers from adding unrelated components. For example, a breadcrumb trail component could implement HasComponentsOfType<BreadcrumbItem> to only accept breadcrumb items as children.

HasComponents is equivalent to HasComponentsOfType<Component> and extends it; use HasComponents for containers that accept any component. Like HasComponents, this interface extends the HasElement and HasEnabled mixins, and its default implementations assume that children are attached to the component’s root element.

Source code
Java
@Tag("nav")
public class Breadcrumb extends Component
        implements HasComponentsOfType<BreadcrumbItem> {
}

Breadcrumb breadcrumb = new Breadcrumb();
breadcrumb.add(new BreadcrumbItem("Home"));
breadcrumb.add(new Span("Not allowed")); // Doesn't compile

Full method summary of the HasComponentsOfType 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:

  • HasAriaLabel 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.

  • HasAriaDescription is for components that have an accessible description, set by referencing existing elements on the page with setAriaDescribedBy(). The description supplements the accessible name with additional information for assistive technologies.

  • HasAriaRole is for components that have a role DOM attribute, which defines the semantic meaning of the component for assistive technologies. setAriaRole() sets the role on the root element by default; override the methods to put it on another element.

  • 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. This interface is deprecated for removal: its methods (replace(), indexOf(), getComponentCount(), and getComponentAt()) are now available directly on HasComponents.

  • 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

Updated –