Components in Vaadin platform

Every Vaadin Flow component always maps to one root element in the server-side DOM representation. A component can contain multiple components or elements inside it. The component is the high level API for application developers to compose UIs efficiently. The Element API is the low level API used to build components. The Element API makes it possible to modify the DOM easily from the server side.

If you look up the Component class in Vaadin Flow, you notice that there is no API even for setting the width or height of the component! For your own components, add the API by implementing the HasSize mixin interface, which has default implementations for e.g. setWidth(String width) and setHeight(String height). So by adding two words of code you can achieve full sizing capabilities for your components. See the Creating A Simple Component Using the Element API tutorial for more info.

In Vaadin 8 every component had a caption. The caption was usually shown next to the component, based on the parent layout’s caption handling implementation. The caption could optionally be rendered with an icon. Some layouts didn’t support showing captions and/or icons.

In Vaadin platform there is no universal caption concept anymore. Some components might have a similar feature, but that it is always component specific. Usually that API is setLabel(String label) instead of setCaption. Some layouts, such as FormLayout, also support showing a label text or component for each child component.

In other cases, you can create your own Span or Text component to contain the caption text and add it to the parent layout alongside the component.

Adding icons is possible, it is just HTML5 after all. But as with caption there is no universal support for that.

In Vaadin 10+, the setEnabled method is specific to components marked with the HasEnabled mixin interface (which comes also with HasValue, HasComponents, and Focusable). When a component is disabled, by default, any property changes and DOM events coming from the client side are ignored. However, it is possible to whitelist some properties and events to be allowed if necessary.

The disabled state is automatically cascaded to child components it is up to the component to change the disabled UX to mark the component as "not-working" when it has been disabled. Changes from the client are still always blocked for disabled components even if the component isn’t implemented to appear disabled. All relevant Vaadin components change their looks when disabled.

Read the Component Enabled State tutorial for more details.

In Flow the setReadOnly(boolean readOnly) method is specific to components accepting user input by implementing HasValue.

For a readonly component, changes from the client will not make the return value of getValue() to change nor fire any ValueChangeEvent. Most components will also update their visual status to indicate to the user that the value cannot be changed.

In Vaadin 8 the legacy framework made it possible to show a tooltip for any component if the user hovered the mouse on top of the component. In Vaadin platform there is no automatic way for this; it is a component specific feature and possible using CSS.

In Vaadin platform you can create a custom layout with only server side Java code by using mixin-interfaces and the Element API. The mixin-interfaces are also the basis for the core layouts and replace a complex class hierarchy from Vaadin 8:

All the core layouts except FlexLayout & Div are based on Web Components, but they still give a good example on how to create your own layouts if needed. For Element API usage, please see the Creating a Component Which Can Contain Other Components tutorial.

There is currently no direct API exposed for this in the layouts. But if you want to, you can access the element and add a DOM event listener to it for click events. If this is a much requested API, we could make it a standard feature to the layouts. There is an enhancement issue for this.

In addition to the options listed below, you should also see if directory has add-ons available that can be used as a replacement. In case you need a custom component implementation, contact us for help.