Using Vaadin Mixin Interfaces

A mixin refers to a defined amount of functionality that can be added to a class. Traditionally, Java did not support this kind of multiple inheritance, but 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.

Methods available in the HasSize interface:

  • void setWidth(String width)

  • String getWidth()

  • void setHeight(String height)

  • String getHeight()

  • void setSizeFull()

  • void setSizeUndefined()

HasComponents Interface

If your component implements the HasComponents interface, you can add and remove child components to and from it.

Methods available in the HasComponents interface:

  • void add(Component…​ components)

  • void remove(Component…​ components)

  • void removeAll()

HasStyle Interface

Components that implement the HasStyle interface can have a class attribute and support inline styles.

Methods available in the HasStyle interface:

  • void addClassName(String className)

  • boolean removeClassName(String className)

  • void setClassName(String className)

  • String getClassName()

  • ClassList getClassNames()

  • void setClassName(String className, boolean set)

  • boolean hasClassName(String className)

  • Style getStyle()

  • void addClassNames(String…​ classNames)

  • void removeClassNames(String…​ classNames)`

Using Mixin Interfaces

Example: Creating a custom Tooltip component that implements the HasComponents and HasStyle interfaces.

Java

  1. public class Tooltip extends Component
  2.         implements HasComponents, HasStyle {
  4. }

js

  1. class Tooltip extends PolymerElement {
  2.     static get template() {
  3.         return html`
  4.             <div part="content" theme="dark">
  5.                 <slot></slot>
  6.             </div>`;
  7.     }
  8. }
  • A component that 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.

Example: Adding new H5 and Paragraph child components to the Tooltip parent component.

Java

  1. Tooltip tooltip = new Tooltip();
  3. tooltip.add(new H5("Tooltip"));
  4. tooltip.add(new Paragraph("I am a paragraph"));

Other Useful Mixin Interfaces

Vaadin Flow provides many additional useful mixin interfaces:

  • HasEnabled: Generic interface for components and other UI objects that can be enabled or disabled.

  • HasElement: Marker interface for any class that is based on an Element.

  • HasDataProvider<T>: Generic interface for listing components that use a data provider to display data.

  • HasValidation: Generic interface that supports input validation.

  • HasItems: Mixin interface for components that display a collection of items.

  • HasOrderedComponents: Generic interface that supports ordered child components, with an index for the layout.

  • HasText: Generic interface that supports text content.

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

Advantages of Using Mixin Interfaces

Using Vaadin mixins is a best practice because their code and functionality has been throughly checked and tested by Vaadin.

Mixins also keep your code clean and simple. For example, compare setting component width:

  • Without mixins: getElement().getStyle().set("width", "300px").

  • After implementing the HasSize interface: setWidth("300px").