Route Navigation

Abrir en ChatGPT

En webforJ, la navegación entre rutas es el mecanismo principal para cambiar vistas y componentes basados en acciones del usuario o cambios en la URL. La navegación permite a los usuarios moverse sin problemas entre diferentes partes de la aplicación sin refrescar la página. Esta navegación del lado del cliente mantiene la aplicación receptiva y fluida mientras se preserva el estado de la aplicación.

Navegación programática

Puedes desencadenar la navegación desde cualquier parte de tu aplicación utilizando la clase Router. Esto permite cambios dinámicos en los componentes mostrados en función de eventos como clics en botones u otras interacciones del usuario.

Aquí hay un ejemplo de cómo navegar a una ruta específica:

@Route(value = "dashboard")
public class DashboardView extends Composite<Div> {
  // Lógica del componente aquí
}

// navegar a la vista
Router.getCurrent().navigate(DashboardView.class);

En este ejemplo, navegar al componente DashboardView programáticamente provoca que se renderice el componente DashboardView y que la URL del navegador se actualice a /dashboard.

También es posible navegar a la vista pasando una nueva Location.

Router.getCurrent().navigate(new Location("/dashboard"));

Clases vs. Ubicación: Métodos para el enrutamiento de vistas

Al navegar entre vistas, los desarrolladores tienen dos opciones: pueden pasar la clase de vista o ruta, permitiendo que el enrutador genere automáticamente la URL y renderice la vista, o pasar la ubicación directamente. Ambos métodos son válidos, pero usar la clase de vista es el enfoque preferido porque ofrece mejor flexibilidad para cambios futuros. Por ejemplo, si decides actualizar la ruta más adelante, solo necesitas modificar la anotación @Route, sin tener que cambiar ningún código que use la clase de vista para la navegación.

Navegación con parámetros

Cuando necesitas pasar parámetros junto con la ruta, webforJ te permite incrustar parámetros en la URL. Aquí te mostramos cómo navegar a una ruta con parámetros:

@Route("user/:id")
public class UserProfileView extends Composite<Div> implements DidEnterObserver {
  private final Div self = getBoundComponent();
  H1 title = new H1();

  public UserProfileView() {
    self.add(title);
  }

  public void setTile(String title) {
    this.title.setText(title);
  }

  public String getTitle() {
    return title.getText();
  }

  @Override
  public void onDidEnter(DidEnterEvent event, ParametersBag parameters) {
    String id = parameters.getAlpha("id").orElse("Desconocido");
    setTile(id);
  }
}

// navegar a la vista y pasar el id de usuario
Router.getCurrent().navigate(
  UserProfileView.class,
  ParametersBag.of("id=JohnDoe")
);

Esto navega a /user/JohnDoe, donde JohnDoe podría representar un ID de usuario. El componente para esta ruta puede extraer el parámetro y usarlo según sea necesario.

Instancia de vista creada

El método navigate acepta un Consumer de Java que se invoca una vez que la navegación se completa. El Consumer recibe la instancia del componente de vista creado, envuelto en un Optional de Java, permitiendo al desarrollador interactuar con la vista después de una navegación exitosa.

Router.getCurrent().navigate(
  UserProfileView.class,
  ParametersBag.of("id=JohnDoe"), (component) -> {
    component.ifPresent(view -> {
      console().log("El nuevo título es: " + view.getTitle());
    });
  });

Instancias nulas

El consumidor recibe un Optional de Java para el componente porque podría ser null, o no creado por varias razones. Por ejemplo, el componente puede no ser renderizado si los observadores de navegación vetan la navegación y detienen el proceso.

Opciones de navegación

La clase NavigationOptions permite a los desarrolladores ajustar cómo se maneja la navegación dentro de la aplicación. Al establecer opciones específicas, puedes controlar el comportamiento de la navegación, como si se debe actualizar el historial del navegador, invocar observadores de ciclo de vida o incluso disparar eventos de navegación.

NavigationOptions options = new NavigationOptions();
options.setUpdateHistory(false);

Router.getCurrent().navigate(
  new Location("user/JohnDoe"), options);

Configuración de opciones de navegación

La clase NavigationOptions proporciona varios métodos para personalizar el comportamiento de la navegación. Estos incluyen controlar cómo se manejan las rutas, si se notifican a los observadores y cómo se actualiza el historial del navegador.

Aquí están las principales opciones de configuración disponibles dentro de NavigationOptions:

1. Tipo de navegación (setNavigationType) Esta opción define si la nueva ruta debe añadirse al historial del navegador o reemplazar la ruta actual.

   • PUSH: Añade la nueva ruta a la pila de historial, preservando la ubicación actual.
   • REPLACE: Reemplaza la ruta actual en la pila de historial con la nueva ubicación, evitando que el botón de retroceso navegue a la ruta anterior.

2. Disparar eventos (setFireEvents) Determina si los eventos del ciclo de vida de navegación deben dispararse durante la navegación. Por defecto, esto está configurado en true, y los eventos se disparan. Si se establece en false, no se dispararán eventos, lo que es útil para navegación silenciosa.

3. Invocar observadores (setInvokeObservers) Esta bandera controla si la navegación debe activar observadores dentro de los componentes navegado. Los observadores generalmente manejan eventos como la entrada o salida de la ruta. Configurarlo en false evita que se invoquen los observadores.

4. Actualizar historial (setUpdateHistory) Cuando se establece en false, esta opción evita que la ubicación del historial se actualice. Esto es útil cuando deseas cambiar la vista sin afectar la navegación hacia atrás o hacia adelante del navegador. Solo afecta la gestión del historial, no el ciclo de vida del componente o el manejo de rutas.

5. Objeto de estado (setState) El objeto de estado permite pasar información adicional al actualizar el historial del navegador. Este objeto se almacena en el estado del historial del navegador y puede ser utilizado más tarde para propósitos personalizados, como guardar el estado de la aplicación durante la navegación.

Generación de ubicaciones para vistas

El enrutador puede generar la ubicación para vistas basándose en el patrón de ruta definido en la vista. También puedes proporcionar parámetros adicionales para segmentos dinámicos y requeridos en la URL. Esto puede ser útil al construir enlaces o compartir puntos de acceso directos a vistas específicas en la aplicación.

Aquí te mostramos cómo generar una Location basada en una clase de vista y parámetros de ruta:

Class<UserProfileView> userProfileView = UserProfileView.class;
ParametersBag params = ParametersBag.of("id=JohnDoe");

Optional<Location> location = Router.getCurrent().getLocation(userProfileView, params);
console().log(location.get());

Esto genera un objeto Location con la ruta /user/JohnDoe, la URI completa como una cadena.