Arquitectura de UI Cross-Platform: El Fin de la Navegación Ad-Hoc

Durante mucho tiempo, el desarrollo en Delphi (tanto en VCL como en FireMonkey) estuvo dominado por el clásico ShowModal. Más recientemente, hemos visto una tendencia saludable hacia interfaces basadas en pestañas o MDI Moderno, donde “acoplamos” formularios dentro de TabSheets o paneles.

Pero seamos sinceros: la mayoría de las veces, lo hacemos de forma ad-hoc.

El código para abrir una pestaña suele estar disperso en menús y botones, donde la pantalla de origen necesita conocer la clase de la pantalla de destino, instanciarla manualmente y gestionar su ciclo de vida. Al final del día, tienes una interfaz bonita pero un código “espagueti” por debajo, donde todo depende de todo.

Lo que le falta al desarrollador de Delphi no es una nueva forma de mostrar pantallas, sino um Pattern para UI (Patrón de UI). Aquí es donde entra Dext.UI Navigator.

El Navigator trae para el VCL el concepto de “Arquitetura de UI” que vemos en frameworks modernos como Flutter o Android. En lugar de instanciar pantallas, declaras intenciones de navegación.

1. El Fin del Acoplamiento Visual (VCL & FMX)

Con el Navigator, tu pantalla de listado de clientes no conoce la unidad de la pantalla de edición. Son completamente agnósticas entre sí — y esto funciona tanto para Desktop como para Mobile. El Navigator actúa como el mediador que conoce las rutas y sabe cómo transportar datos (Contexto) entre ellas de forma segura y tipada.

// Solicitas la navegación por tipo o ruta, el Navigator se encarga del resto.
Navigator.Push(TCustomerEditFrame, TValue.From(CurrentCustomer));

2. El Poder de los Middlewares

¿Recuerdas esa pantalla que solo os administradores pueden ver? En el modelo tradicional, pones un if en el OnClick de cada botón. Con el Navigator, usas Middlewares.

Defines una regla global: “Todas las rutas marcadas como Admin necesitan autenticación”. El Navigator intercepta la solicitud de navegación, verifica la regla y, si falla, bloquea la transición o redirecciona al Login.

Navigator.UseMiddleware(TAuthMiddleware.Create(AuthService));

El Gancho para el Futuro: VCL con “Feeling” de Web

Quizás el mayor beneficio oculto del Navigator es cómo acerca tu código Delphi a las arquitecturas web modernas. Al usar Middlewares en un pipeline de navegación, estás estructurando tu sistema de una forma que se asemeja mucho a una aplicación Web (donde el backend y la UI se comunican vía rutas y contratos), pero sin la necesidad inmediata de una Web API compleja.

Esto pavimenta el camino. Si mañana decides migrar partes de tu sistema a la Web o compartir lógica entre una versión Desktop y Mobile, tu código de navegación y las reglas de negocio (encapsuladas en Middlewares) ya estarán listos para ser reutilizados en la estructura de Dext.

3. Historial y Ciclo de Vida

Al igual que en el navegador de tu móvil, o Navigator mantiene una Pila de Navegación. El comando Navigator.Pop vuelve a la pantalla anterior exactamente como estava, sin que tengas que gestionar el estado manualmente.

Y con el hook INavigationAware, tus pantallas saben cuándo están entrando o saliendo de la vista, permitiendo cargar o guardar datos en el momento exacto:

procedure TCustomerEditFrame.OnNavigatedTo(const Context: TNavigationContext);
begin
  // Carga el cliente recibido en el contexto
end;

Bonus: Adapters (MDI, Pestañas o Panel?)

La belleza del Navigator es que la lógica de negocio está separada de la visualización. ¿Quieres que tu sistema use Pestañas (TPageControl)? Usa o TPageControlAdapter. ¿Prefieres o estilo clássico MDI? Usa o TMDIAdapter. ¿Y si estás en FMX? Basta usar un Adapter específico para las pantallas de FireMonkey. Tu lógica de Navigator.Push sigue siendo exactamente la misma.

Conclusión: Modernizar es uma elección estratégica

Modernizar Delphi no es solo cambiar a Linux o Web. Es traer los patrones que vencieron en la ingeniería de software moderna (SPA, Middlewares, DI) para dentro de VCL.

El Dext Framework no es solo sobre Backend; es sobre dar al desarrollador Delphi el arsenal para crear aplicaciones de escritorio que no parezcan haber sido hechas en 1995.

👉 Conoce Dext en Github: github.com/cesarliws/dext 📚 Profundiza en el libro: HotSite del Libro 📖 Documentación del Navigator: Leer Detalles Técnicos