Basic Component Features

Common features available in all Vaadin components.

Setting Id
Element
Visibility
Enabled State

You can use the basic features listed here with all of the Vaadin components that extend com.vaadin.flow.component.Component.

Setting Id

You can set an Id for any component. The Id is passed to the client side as the id of the corresponding element. However, an Id must be unique within the page.

Ids can be used to select the element in JavaScript code or CSS rules. Below is an example using the setId() method to set a component Id:

component.setId("my-component");

Element

Every component is associated with a root Element. You can use the Element to access low-level functionality by using the component.getElement() method.

See Element Properties & Attributes for more information on this.

Visibility

You can set a component to invisible by using the component.setVisible(false) method. If you do this, invisible components are no longer displayed in the UI. They won’t receive updates from the client side. Transmission of server-side updates resumes when the component is made visible again.

Below is an example using the component.setVisible() method:

Span label = new Span("My label");
label.setVisible(false);
// this isn't 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);
});

Note

If you set a container to invisible (e.g., a Div or Vertical/HorizontalLayout) — a container that has child components — all inner components are also made invisible. No server-side updates are sent to them, and no client updates are received from them. When the container becomes visible again, updates to the children also resume.

Client-Side Consequences

The invisible settings have different consequences, depending on whether the component has been rendered. If a component is set to invisible before it’s rendered for the first time, the corresponding element in the DOM isn’t created, but the server-side structure is maintained. When the component is set to visible, the DOM is updated.

Here’s an example in which an unrendered component is set to invisible:

Span label = new Span("My label");
label.setVisible(false);

Div container = new Div();
// the label isn't transmitted to the client side.
// The corresponding element is 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 a component that has already been rendered is set to invisible, the corresponding element in the DOM is marked with the hidden attribute. The component isn’t removed from the DOM. DOM elements of invisible components don’t receive updates from the server. Server-side components don’t react to RPCs (Remote Procedure Calls) if the component is set to invisible.

This is also true for components used in a PolymerTemplate mapped by the @Id annotation. When set to invisible, the component is marked with the hidden attribute on the client side. The DOM structure isn’t altered.

Below is an example setting a rendered component mapped by the @Id annotation to invisible:

@Id("my-component")
private Component mappedComponent;

// sets the attribute "hidden" of the element on the
// client-side
mappedComponent.setVisible(false);

Enabled State

You can disable user interaction with a component using the component.setEnabled(false) method on the server. This method blocks any interaction from the client to the server for the disabled component and its children, and it adds a disabled property to any client elements.

The enabled state of the component cascades to the child components of the element when it’s disabled, but it doesn’t override the enabled state of the children. For example, suppose you have a layout with children A and B, and B is disabled. Calling layout.setEnabled(false) marks both A and B as disabled. If you later enable the layout by calling layout.setEnabled(true), child B remains disabled, because it was disabled at the component level.