Using Vaadin Mixin Interfaces

How provide common APIs and default behavior for sets of functions in most Web 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 Flow 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 HasElement and HasEnabled mixins.

It should generally be implemented by layouts or components whose primary function is to host child components. It shouldn’t be, for example, implemented by non-layout components such as fields.

Full method summary of the HasComponents interface.

HasStyle Interface

The HasStyle interface adds a class attribute and supports inline styles. It’s implemented in Component, by default. It extends HasElement mixin.

Full method summary of the HasStyle interface.

Using Mixin Interfaces

Were you to create a custom Tooltip component, for example, that implements the HasComponents and HasStyle interfaces, you would do something like this:

@Tag("sample-tooltip")
@JsModule("./sample-tooltip.ts")
public class Tooltip extends LitTemplate
        implements HasComponents, HasStyle {

}

import { html, LitElement } from 'lit';

class SampleTooltip extends LitElement {
  render() {
    return html`
      <div part="content" theme="dark">
        <slot></slot>
      </div>
    `;
  }
}

customElements.define('sample-tooltip', SampleTooltip);

A component that implements HasComponents needs to extend from a tag that supports having child components. The slot tag is used in Web Components to define where child components should be put.

When you implement the HasComponents interface, adding child components to the parent component is allowed automatically.

For example, adding new H5 and Paragraph child components to the Tooltip parent component would look something like this:

Tooltip tooltip = new Tooltip();

tooltip.add(new H5("Tooltip"));
tooltip.add(new Paragraph("I am a paragraph"));

Other Useful Mixin Interfaces

Vaadin Flow 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. For example, compare setting a component’s width. Here’s what you’d have to do without mixins:

getElement().getStyle().set("width", "300px")

That’s not too complicated. Here’s what’s required after implementing the HasSize interface:

setWidth("300px")

That’s much simpler and easier to maintain.

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

Docs