Lifecycle Observers

Abrir en ChatGPT

Los observadores permiten que los componentes reaccionen a eventos del ciclo de vida implementando interfaces para etapas específicas. Este patrón asegura una clara separación de preocupaciones y simplifica el manejo de la lógica de navegación.

Observadores disponibles

• WillEnterObserver: Te permite manejar tareas antes de que se ingrese a una ruta, como obtener datos necesarios o bloquear la navegación.
• DidEnterObserver: Ideal para manejar acciones después de que el componente ha sido adjuntado, como renderear datos o activar animaciones.
• WillLeaveObserver: Proporciona una manera de gestionar la lógica antes de que un usuario abandone una ruta, como verificar cambios no guardados.
• DidLeaveObserver: Utilizado para acciones de limpieza u otras tareas que deben ejecutarse después de que un componente se desadjunta del DOM.
• ActivateObserver: 25.03 Activado cuando un componente en caché es reactivado, como al navegar a la misma ruta con diferentes parámetros.

Ejemplo: autenticación con WillEnterObserver

@Route(value = "dashboard")
public class DashboardView extends Composite<Div> implements WillEnterObserver {

  @Override
  public void onWillEnter(WillEnterEvent event, ParametersBag parameters) {
    boolean isAuthenticated = authService.isAuthenticated();
    event.veto(!isAuthenticated);

    if (!isAuthenticated) {
      event.getRouter().navigate(LoginView.class);
    }
  }
}

Aquí, onWillEnter verifica si el usuario está autenticado. Si no lo está, se veta la navegación, impidiendo que se complete y redirigiendo a la página de inicio de sesión.

Ejemplo de Rutas Autenticadas - No Listo para Producción

Este ejemplo es solo una ilustración de cómo usar rutas autenticadas. Esto no es un ejemplo de cómo escribir un sistema de autenticación a nivel de producción. Necesitarás tomar los conceptos y patrones utilizados en este ejemplo y adaptarlos para que funcionen con tu flujo/sistema de autenticación para tu aplicación.

Ejemplo: obteniendo datos al ingresar a la ruta con DidEnterObserver

@Route(value = "profile")
public class ProfileView extends Composite<Div> implements DidEnterObserver {

  @Override
  public void onDidEnter(DidEnterEvent event, ParametersBag parameters) {
    String userId = parameters.get("userId").orElseThrow();
    UserService.fetchProfile(userId).thenAccept(
        profile -> updateProfileUI(profile));
  }

  private void updateProfileUI(Profile profile) {
    // Código para actualizar la UI con los datos del perfil
  }
}

Este ejemplo demuestra el uso de DidEnterObserver para obtener y mostrar datos del perfil una vez que el componente está adjunto al DOM.

Ejemplo: Manejo de cambios no guardados con WillLeaveObserver

@Route(value = "edit-profile")
public class EditProfileView extends Composite<Div> implements WillLeaveObserver {
  private boolean hasUnsavedChanges = false;

  public EditProfileView() {
    // Lógica para detectar cambios no guardados
  }

  @Override
  public void onWillLeave(WillLeaveEvent event, ParametersBag parameters) {
    event.veto(hasUnsavedChanges);

    if(hasUnsavedChanges) {
      ConfirmDialog.Result result = showConfirmDialog(
          "Hay cambios no guardados. ¿Quieres descartarlos o guardarlos?",
          "Cambios No Guardados",
          ConfirmDialog.OptionType.OK_CANCEL,
          ConfirmDialog.MessageType.WARNING);
    }
  }
}

En este ejemplo, onWillLeave solicita al usuario mediante un cuadro de diálogo de confirmación si hay cambios no guardados, vetando la navegación si el usuario elige quedarse.

Bloqueo de Navegación y Manejo de Veto

Para más información sobre el bloqueo de navegación, consulta Bloqueo de Navegación y Manejo de Veto

Ejemplo: Limpieza con DidLeaveObserver

@Route(value = "notifications")
public class NotificationsView extends Composite<Div> implements DidLeaveObserver {

  @Override
  public void onDidLeave(DidLeaveEvent event, ParametersBag parameters) {
    NotificationService.clearActiveNotifications();
  }
}

Este ejemplo limpia las notificaciones después de que el usuario deja la NotificationsView, utilizando el DidLeaveObserver para la limpieza.

Ejemplo: Refrescando datos con ActivateObserver 25.03

@Route(value = "product/:id")
public class ProductView extends Composite<Div> implements ActivateObserver {
  private String currentProductId;

  @Override
  public void onActivate(ActivateEvent event, ParametersBag parameters) {
    String productId = parameters.get("id").orElseThrow();

    // El componente se está reutilizando con diferentes parámetros
    if (!productId.equals(currentProductId)) {
      currentProductId = productId;
      refreshProductData(productId);
    }
  }

  private void refreshProductData(String productId) {
    // Código para obtener y mostrar nuevos datos del producto
    ProductService.fetchProduct(productId).thenAccept(
        product -> updateProductUI(product));
  }
}

Este ejemplo demuestra el uso de ActivateObserver para refrescar datos al navegar a la misma ruta con diferentes parámetros. El componente permanece en caché y se reactiva en lugar de recrearse, por lo que la UI se actualiza para mostrar los datos correctos para los parámetros actuales sin instanciar un nuevo componente.

Activación en Jerarquías de Componentes

Al navegar a una ruta, el evento Activate se activa para todos los componentes en caché en la jerarquía que permanecen en la ruta actual. Por ejemplo, al navegar de /products/123 a /products/456, tanto el componente padre ProductsLayout como el componente hijo ProductView reciben el evento Activate si están en caché y permanecen en la jerarquía de rutas.