Creando Web Panels Responsive en pocos minutos

En este vídeo veremos cómo generar una interfaz de usuario con la herramienta WebPanelDesigner de K2B Tools La interfaz que vamos a generar, está compuesta por una grilla de clientes donde voy a poder ir seleccionando los diferentes clientes de mi sistema y debajo vamos a visualizar la información general de ese cliente y las facturas que tiene asociado dicho cliente

yo puede irme moviendo entre los diferentes clientes y ver su información asociada,ya sea la información general o las facturas según el tab donde esté parado Esta interfaz la vamos a construir usando el WebPanelDesigner Para esto vamos a crear un nuevo WebPanel Le vamos a poner de título "Customer Invoices" Cuando tenemos K2B Tools instalado, nos va a aparecer una parte nueva en todos los objetos de tipo WebPanel

Para activar esta parte, esto es que el objeto pasa a estar sincronizado con el WebPanelDesigner vamos a seleccionar la opción de activar Una vez activado, nos va a aparece un editor de tipo árbol en la parte del designer Lo primero que vamos a hacer es poner un título al WebPanelDesigner después vamos a agregar una grilla de clientes usando la acción "Add Grid From Transaction" Vamos a seleccionar la transacción de clientes Y luego ante la pregunta si lo quiero como atributos o variables, voy a seleccionar para crearla con atributos Voy a borrar en la grilla aquellos atributos que no quiero visualizar

Voy a eliminar también aquellos filtros que no voy a querer ver Y despues voy a habilitar en la grilla la propiedad "Allow Selection" en true para que pueda seleccionar elementos de la grilla de clientes Aquí ya tenemos la grilla de clientes Lo que vamos a hacer ahora es agregar una línea separadora para separar la información Vamos a agregar dos Tabs, uno donde vamos a visualizar la información básica del cliente y otro donde vamos a ver las facturas

En el Tab vamos a agregar un "Web Component" donde vamos a visualizar la transacción de cliente en modo display En el Tab de facturas lo que vamos a hacer es agregar una grilla basada en la transacción de Facturas usando la funcionalidad "Add Grid From Transaction" vamos a seleccionar la transacción de Facturas y la vamos a agregar con atributos Una vez generada la grilla vamos a eliminar aquellos atributos no nos interesa mostrar, por lo tanto los voy a borrar y después también los filtros que no voy a querer utilizar los voy a eliminar

Como lo que queremos ver son las facturas de un cliente determindo, lo que vamos a hacer es agregar un filtro por cliente Vamos a agregar un filtro por "CustomerId" Cuando le indicamos ya que el filtro está basado en el Atributo "Customer Id" van a ver como automáticamente me va a inferir la condition que se va a agregar a la grilla como no lo queremos ver el filtro, sino que va a ser seleccionado en la grilla de clientes, le vamos a poner "visible" en False Aquí tenemos la UI implementada Vamos a salvar El designer ademas de generar el WebForm, va a generar una gran cantidad de eventos

Lo que nos falta hacer es programar la selección de clientes El WebPanelDesigner define regiones de código de usuario, donde el desarrollador puede escribir su propio código Estas regiones están distinguidas por las subrutinas que comienzan con U Cada evento generado siempre invoca a las subrutinas que comienzan con U para que el desarrollador la pueda extender En este caso paso vamos a programar la selección Para esto desde el designer vamos acceder directo a la subrutina "U_OnLineActivate" correspondiente a la grilla de clientes

Lo que vamos a hacer es almacenar el filtro "CustomerId" del cliente seleccionado Luego vamos a visualizar en el WebComponent la transacción de cliente en modo display Vamos a visualizar el cliente selccionado en modo dislpay Y luego como estamos utilizando el modelo de eventos "Smooth User Experience" vamos a indicar que queremos que se refrezque la grilla de facturas utilizando el comando "GridInvoiceRefresh" vamos ahora a salvar, a especificar y a generar y ejecutar el WebPanel generado Aquí vemos, en ejecución, el WebPanel generado como vimos, vamos a seleccionar un cliente y vemos que tal cual habíamos implementado cuando yo seleccione un cliente voy a ver debajo la información general de ese cliente y si selecciono luego el tab de facturas voy a ver las facturas asociadas al cliente seleccionado

Además de esto, sin que el desarrollador tenga que pensar en reescribir líneas de código obtiene automáticamente la funcionalidad de selección de cantidades fila por página Cómo vemos aquí Estamos mostrando 20 filas por página en la grilla de facturas y tenemos 12 páginas, pero esto lo podemos modificar en el "GridSettings" modificando la propiedad "Rows per page" vamos a pasar por ejemplo a mostrar 50 filas por página

aquí como vemos vamos a mostrar 50 filas por página y además vamos a ver qué tenemos esta vez 5 páginas Y como vemos además todo el paginado es implementado automáticamente por K2B Tools sin que el desarrollador se tenga que preocupar por su implementación

Todo esto automáticamente generado Otra de las funcionalidades que se obtienen de forma automática mediante el uso de K2B Tools es el tema de la selección de columnas en runtime yo aquí por ejemplo puedo pintar la columna de "DNI" y "Prefix" en tiempo de ejecución y todo esto también sin que el desarrollador tenga que escribir código asociado Ademásla interfaz generada es Responsive

Esto es que se puede adaptar a cualquier dispositivo En este caso estamos visualizando el panel en un iPhone Como venla interfaz esta completamente adaptada al dispositivo que estamos observado puedo seguir seleccionado los clientes y ver su información O puedo ver también la facturación asociada a ese cliente seleccionado

Como vieron este panel lo pudimos contruir de una manera sencilla y rápida haciendo uso del WebPanelDesigner una de las herramientas para el desarrollo que brinda K2B Tools