Route Types

Abrir en ChatGPT

Las rutas se clasifican en dos tipos principales, Rutas de Vista y Rutas de Diseño. La elección del tipo de ruta determina cómo se mapean los componentes a las URL y cómo interactúan con otras partes de tu aplicación.

Rutas de vista

Las rutas de vista se mapean directamente a un segmento de URL y representan páginas específicas en tu aplicación. Estas rutas se reflejan en la URL del navegador y se utilizan típicamente para vistas o páginas distintas.

@Route(value = "home")
public class HomeView extends Composite<Div> {
  private final Div self = getBoundComponent();

  public HomeView() {
    self.add(new H1("Página de Inicio"));
  }
}

• URL: /home
• Componente Renderizado: HomeView

En este ejemplo, navegar a /home renderiza el componente HomeView.

Rutas de diseño

Las rutas de diseño envuelven vistas secundarias sin contribuir a la URL. Los diseños proporcionan elementos de UI compartidos, como encabezados o barras laterales, que son consistentes en múltiples vistas. Las rutas secundarias se renderizan dentro del área de contenido del diseño.

@Route(type = Route.Type.LAYOUT)
public class MainLayout extends Composite<AppLayout> {
  public MainLayout() {
    setHeader();
    setDrawer();
  }
}

En este caso, MainLayout es una ruta de diseño que envuelve vistas secundarias. Define elementos de UI comunes, como un encabezado y un cajón. Las rutas secundarias asociadas con este diseño se inyectarán en el área de contenido del componente AppLayout.

Detección automática de tipos de ruta

Por defecto, el tipo de ruta se detecta automáticamente, ya sea que la ruta sea vista o diseño, según el nombre de la clase:

• Las clases que terminan en Layout se tratan como rutas de diseño.
• Las clases que terminan en View se tratan como rutas de vista.

Alternativamente, los desarrolladores pueden especificar manualmente el tipo de ruta configurando Route.Type en la anotación @Route.

// Detectado automáticamente como Layout
@Route
public class MainLayout extends Composite<AppLayout> {
  public MainLayout() {
    setHeader();
    setDrawer();
  }
}

// Detectado automáticamente como View
@Route(outlet = MainLayout.class)
public class DashboardView extends Composite<Div> {
  private final Div self = getBoundComponent();

  public DashboardView() {
    self.add(new H1("Contenido del Tablero"));
  }
}