Component Basic Features

All classes that extend com.vaadin.flow.component.Component have common features that can be used regardless of the component.

These features are listed below.

Id

You can set an Id for a component, that is transmitted to the client-side as the id of the corresponding element. A given Id should be unique in the page.

Ids can be used to select the element in javascript code or CSS rules, for example.

Java

component.setId("my-component");

Element

Every component has a mapped Element that can be used to access low level functionality, by using component.getElement(). For more details, see Element Properties and Attributes.

Visibility

A component that is set as invisible (by using component.setVisible(false)) is not shown on the UI. In addition, an invisible component doesn’t receive updates from the client side, and all the server-side updates are only transmitted once the component becomes visible again.

Example:

Java

Span label = new Span("My label");
label.setVisible(false);
// this is not transmitted to the client side
label.setText("Changed my label");
Button makeVisible = new Button("Make visible", evt -> {
    // makes the label visible - only now the "Changed my label" text is transmitted
    label.setVisible(true);
});

If the invisible component is a container, like a Div or Vertical/HorizontalLayout, and it has children components, all the inner components are also considered invisible, meaning that no server-side updates are sent to them, and no client-updates are received from them. Making the container visible again makes all the updates to the children to be transmitted at once.

What happens on the client-side when a component is set as invisible

If the component is set invisible before it is rendered for the first time, the corresponding element in the DOM is not created, but the server-side structure is maintained.

Once the component is set visible, the DOM is properly updated.

Example:

Java

Span label = new Span("My label");
label.setVisible(false);
Div container = new Div();
// the label is not transmitted to the client side. The corresponding
// element will be created in the DOM only when it becomes visible
container.add(label);
// prints 1 - the server-side structure is preserved no matter if the
// component is visible or not
System.out.println("Number of children: "
        + container.getChildren().collect(Collectors.counting()));

If the component is already rendered for the first time, setting it as invisible makes the corresponding element in the DOM to have the attribute hidden set. In other words, setting a previously visible component as invisible doesn’t remove it from the DOM - just makes it hidden.

When using components in a PolymerTemplate mapped by @Id, setting them as invisible also sets the hidden attribute on the client-side. No DOM structure is altered.

Java

@Id("my-component")
private Component mappedComponent;
// sets the attribute "hidden" of the element on the client-side
mappedComponent.setVisible(false);

Enabled and disabled components

Disabling user interaction of a component means calling component.setEnabled(false) on the server which then blocks any interaction from the client to the server for the disabled component and its children and adds a disabled property to the client element(s).

The enabled state of a component cascades to the child components of the element when it is disabled, but doesn’t override the enabled state of the children.

So if you have a layout with child A and B where B is disabled, then setting layout.setEnabled(false) will mark A and B disabled, but after this enabling the layout with layout.setEnabled(true), B will still be disabled as it has been disabled on the component level.

Read the Component Enabled State tutorial for more details.