PowerBuilder no está reñido con las tecnologías web modernas. En este artículo te muestro cómo he integrado un Dashboard HTML completamente responsivo dentro de una aplicación, combinando la lógica de negocio de PowerBuilder con la potencia visual de Chart.js.
El resultado: tarjetas informativas y gráficos interactivos, con colores que se adaptan automáticamente al tema activo de PowerBuilder.
¿Qué aporta esta solución?
- Tarjetas y gráficos generados dinámicamente desde PowerBuilder
- Diseño moderno y 100% responsivo gracias a Flexbox
- Gráficos profesionales con Chart.js
- Interactividad: clic en tarjetas → ejecutar funciones PowerBuilder
- Arquitectura orientada a objetos, fácil de extender
La Arquitectura
He diseñado un sistema de clases con tres piezas clave:
- Clase base
n_cst_dashboard
Genera el HTML y CSS, y define tamaños de tarjetas y tipos de gráficos. - Clases especializadas (ej.
n_cst_dashboard_ventas)
Heredan de la base y definen los datos específicos (ventas, compras, etc.). - Estructuras de datos
Organizan la información de tarjetas y gráficos (título, valores, etiquetas, etc.).
De este modo, el HTML no se escribe a mano: se construye dinámicamente a partir de las estructuras.
Colores dinámicos
El dashboard ha detectado el tema activo de PowerBuilder y ha convertido sus colores a formato CSS. Así, si usas “Flat Design Orange”, el dashboard se pinta automáticamente con un color principal naranja.
Generación del HTML
El corazón del sistema ha sido la función que construye el HTML. Se ha apoyado en:
- Flexbox → distribución automática y responsiva
- Box-shadow y hover effects → estética moderna
- Calc() → alturas dinámicas sin complicaciones
Gracias a esto, las tarjetas se redistribuyen según el tamaño de la ventana y el gráfico ocupa todo el ancho disponible.
Interactividad PowerBuilder ↔ JavaScript
Cuando el usuario hace clic en una tarjeta, el dashboard ha llamado a una función PowerBuilder. Esto se ha logrado con eventos registrados en el WebBrowser y pequeños fragmentos de JavaScript como:
<div class="card" onclick="openPB('m_imprimirfacturasventas')"></div>
Así, un clic puede abrir directamente la ventana de facturas, pedidos, etc.
Ejemplo: Dashboard de Ventas
En el caso práctico que he implementado, el dashboard incluye:
- 4 tarjetas con KPIs: presupuestos, pedidos, albaranes y facturas.
Nota: en esta demo, los datos de presupuestos, pedidos y albaranes son ficticios (mock). Las facturas sí consultan la base de datos de pruebas. - 1 gráfico comparativo de facturación mensual que muestra el año actual frente al año anterior usando Chart.js.
El resultado ha sido un dashboard limpio, responsivo y totalmente integrado con la aplicación.
Ventajas
- Separación de responsabilidades: lógica, datos y presentación bien aislados
- Reutilizable: se pueden crear otros dashboards heredando de la clase base
- Extensible: es sencillo agregar nuevos gráficos o tarjetas
- Responsive: se adapta automáticamente a cualquier pantalla
Próximos pasos
El sistema se puede extender fácilmente a dashboards de otras áreas (compras, RRHH, contabilidad) o añadir mejoras como:
- Gráficos adicionales (líneas, circulares, áreas)
- Uso de librerías más complejas para visualización avanzada
- Generación de contenedores para organizar tarjetas o gráficos
- Creación de minigráficos dentro de tarjetas
- Obtener información del gráfico al hacer clic y usarla en PowerBuilder
Enlaces y Descargas
PowerBuilder 2025 (FrontEnd): github.com/rasanfe/PersonDemo03
API creada con SnapDevelop 2025 en .Net 8 (BackEnd): github.com/rasanfe/MyPowerServer
Conclusión
Combinar PowerBuilder + HTML + Chart.js ha abierto un mundo de posibilidades. He obtenido dashboards modernos, visuales y completamente integrados con la aplicación, manteniendo la robustez de PowerBuilder y la flexibilidad del ecosistema web.
En definitiva:
PowerBuilder sigue más vivo que nunca, ¡ y sabemos aprovecharlo ! 🚀
Comentarios
Publicar un comentario