Component Lifecycle Callbacks

How to react when a component is attached to or detached from an application.

It’s important to be able to react when a component is attached to or detached from an application. If the content of a component depends on resources that aren’t available during the construction of the component, you can postpone content creation until the component attaches to the UI. You do this by overriding the onAttach() method provided by the Component class.

Example: Overriding the onAttach() method.

@Tag("div")
public class UserNameLabel extends Component {

  @Override
  protected void onAttach(AttachEvent attachEvent) {
    // user name can be stored to session after login
    String userName = (String) attachEvent.getSession()
            .getAttribute("username");
    getElement().setText("Hello " + userName +
            ", welcome back!");
  }
}

The onAttach() method is invoked when the Component has attached to the UI. Its counterpart, the onDetach() method, is invoked right before the component detaches from the UI. These are good points at which to reserve and release resources used by the component.

Example: Overriding the onAttach() and onDetach() methods.

@Tag("div")
public class ShoppingCartSummaryLabel
        extends Component {

  private final Consumer<EventObject> eventHandler =
        this::onCartSummaryUpdate;

  @Override
  protected void onAttach(AttachEvent attachEvent) {
    ShopEventBus eventBus = attachEvent.getSession()
            .getAttribute(ShopEventBus.class);
    // registering to event bus for updates
    // from other components
    eventBus.register(eventHandler);
  }

  @Override
  protected void onDetach(DetachEvent detachEvent) {
    ShopEventBus eventBus = detachEvent.getSession()
    .getAttribute(ShopEventBus.class);
    // after detaching don't need any updates
    eventBus.unregister(eventHandler);
  }

  private void onCartSummaryUpdate(EventObject event) {
    // update cart summary ...
  }
}

interface ShopEventBus {
  void register(Consumer<EventObject> eventHandler);

  void unregister(Consumer<EventObject> eventHandler);
}

Using methods available in attachEvent and detachEvent to get the UI or session is more convenient than using the getUI() method in Component, because these methods return values directly. The getUI() method returns an Optional<UI>, because a component isn’t always attached.
The default implementations of the onAttach() and onDetach() methods are empty, so you don’t need to call super.onAttach() or super.onDetach() from your overridden methods. However, when extending other component implementations, you may need to do this.

Tip

Finding out when another component is attached or detached

To find out when another component gets attached or detached, you can use the Component.addAttachListener() and Component.addDetachListener() methods. The corresponding events are fired after the onAttach() and onDetach() methods are invoked. The getUI() method for the component returns the UI instance during both events.

AC60745A-D633-47C0-9DD3-692DBC0BBC57

Docs

Docs

Component Lifecycle Callbacks