Responsive Web Design con K2B Tools

El acceso a la Web desde dispositivos móviles está en permanente crecimiento, por esto es importante que nuestras aplicaciones web se adapten de forma correcta a diferentes dispositivos para lograr una buena experiencia de usuario.

Con este objetivo GeneXus en su versión Evolution 3, implementó el Responsive Web Design (RWD),  que consiste en  que nuestros web panels se adapten al tamaño de pantalla del dispositivo desde el cual se accede.

¿Cómo implementó GeneXus el Responsive Web Design?

GeneXus desarrolló un nuevo editor para Web Forms, muy similar al que se usa para Smart Devices. Dicho editor es un editor abstracto. Únicamente usando este editor, es posible aprovechar las nuevas funcionalidades de GeneXus para generar aplicaciones responsive.

Para que nuestra aplicación sea responsive GeneXus hace uso del framework bootstrap.

El desarrollador GeneXus no tiene que  conocer este framework, ya que su uso está encapsulado en GeneXus.

Sin embargo, el desarrollador si deberá conocer los conceptos agregados en GeneXus para realizar esta abstracción: responsive tables y clases del tema condicionales.

¿Qué necesitamos para adoptar Responsive Web Design con GeneXus?

Un desarrollador GeneXus que quiere adoptar esta nueva funcionalidad, y que no usa K2BTools, deberá aprender a usar la nueva tecnología, esto es:  el nuevo editor, las responsive tables y los temas condicionales.  De esta forma, si vamos a conenzar un proyecto nuevo, deberemos usar este  nuevo paradigma para desarrollarlo.

Pero si tenemos un  proyecto que ya está en  desarrollo o terminado, no hay una forma automática de migrar del paradigma anterior (no responsive) al nuevo,  ya que no hay ninguna migración entre el viejo editor de webforms y el nuevo.  La solución es ir haciendo una adopción progresiva: lo nuevo desarrollarlo en el nuevo editor de forma de aprovechar  la funcionalidad de responsive y lo viejo hacerlo de nuevo. Lo malo de este enfoque, además de que hay que construir los web panels de nuevo,  es que mientras se esté migrando se pierde la uniformidad en el sistema, ya que algunas pantallas serán responsive y otras no. 

¿Qué aporta K2B Tools en este escenario?

Cuando se trabaja dentro de K2BTools, no se utiliza el editor de WebForm de GeneXus sino que se especifica la interfaz usando la instancia de patterns o del WebPanelDesigner (WPD).

En tal caso, el desarrollador se abstrae de en qué plataforma va a estar generando sus objetos.

La migración a Responsive Web Design es un excelente ejemplo de las ventajas que esto ofrece: gracias al alto nivel de abstracción que brinda K2BTools la instancia casi no sufrió cambios. Sólo fue necesario agregar algunas propiedades que permiten al desarrollador detallar cómo se deben ver los elementos en diferentes tamaños de pantalla.

Las propiedades agregadas son las siguientes:

1. Propiedades "Show In *"

GeneXus en su implementación de RWD, agrupa los dispositivos en cuatro categorías según el tamaño de pantalla:  Extra small (celulares), Small , Medium (tabletas), Large (desktop).

Haciendo uso de esto, una de las propiedades que se agregan a nivel de atributos en grilla y acciones es la propiedad show in.  Esto indica si ese campo se va a visualizar en determinado dispositivo o no. En la instancia predeterminada, el D.A. es lo único que se ve en extra small y el resto de los atributos son visibles en el resto de los dispositivos.

Aquí se muestra un ejemplo de una grilla en Extra Small.

Y la misma grilla cuando se ve en otro dispositivo.

2. Propiedades "Responsive Sizes"

Una responsive table es una tabla que se adapta según el tamaño del dispositivo. Esto permite, por ejemplo, que cuando se visualizan datos en un celular los controles estén en filas diferentes y cuando se visualizan desde un desktop se muestren dentro de una misma fila:

Visualización en un celular

Visualización en un desktop

Esta propiedad aparece en cada nodo contenedor del pattern y Web Panel Designer, por ejemplo Tab, Grupo, Línea Separadora, Columna, etc.

Usando estas propiedades es posible indicar el porcentaje que ocupa cada campo en la pantalla, en qué filas estarán agrupados, y si son visibles o no para cada categoría de dispositivos.

K2BTools contiene lógica específica para que el valor default de estas propiedades sea el deseado en la mayoría de los casos, por lo que nuestro objetivo es que el uso de estas propiedades sea esporádico para hacer lo necesario para adaptar las interfaces a tamaños de pantalla pequeños.

¿Cómo genero responsive con K2BTools?

Para generar responsive con K2BTools, la forma más sencilla es decirle a GeneXus que genere responsive. Esto se hace en las propiedades del modelo GeneXus, en la propiedad "Web Form Defaults".

Una vez que se hace esto, automáticamente la configuración de K2BTools se actualizará para usar esta funcionalidad.

Por otro lado, en el nodo raíz de las instancias de patterns y WebPanelDesigner existe una nueva   propiedad "Web Form Defaults". Esta propiedad se podrá modificar por instancia, o web panel generado con el WPD. De esta forma es posible activar la nueva funcionalidad para instancias particulares.

Puntos a tener en cuenta

User Regions:  Dado el cambio del editor, lo único que el usuario deberá adaptar manualmente son las user regions.

Las user regions siguen estando disponibles para el abstract layout, pero en caso de migración, el usuario deberá agregar nuevamente los controles en dicha región.

TextBlocks: El otro punto, son los textblocks asociado a las descripciones de los campos. En el editor abstracto, a diferencia de en web, la descripción del campo y el campo son un único control. Por tanto si en alguna parte del código se referenciaba a algunos de los textblocks de la descripción, este código deberá ser adaptado.

Conclusión

Adoptar RWD trabajando con  K2BTools es mucho más sencillo y rápido.

En primer lugar, no deberá capacitarse en aprender lo que es el Abstract Layout ni lo que son las clases condicionales. K2BTools se encargará de generar esa funcionalidad de forma automática.

En un proyecto nuevo la adopción será inmediata pero con una mayor productividad que la adopción manual, ya que rápidamente aplicando los patrones se generaran las nuevas pantallas responsive.

Para un proyecto en desarrollo o finalizado, en lugar de una adopción progresiva se tendrá una adopción completa y automática. Simplemente se deberá indicar a K2BTools que genere responsive y automáticamente todo lo generado por K2BTools será responsive.

Para un usuario que venía usando el patrón WorkWith de GeneXus,  también puede adoptar responsive con K2BTools, gracias a la herramienta de migración de WorkWith  a K2BEntityServices que es posible descargar desde aquí.

Con K2BTools uno tiene una adopción sencilla de RWD, el desarrollador se abstrae de la tecnología,  se tiene una mayor productividad y de regalo una nueva UI mejorada, cumpliendo con los  principios de usabilidad requeridos de forma de lograr aplicaciones con una muy buen expericencia de usuario.

Puedes descargar la versión de K2B Tools responsive desde aquí

Por más información sobre Responsive Web Design con K2B Tools les recomendamos este video de la charla que dio Federico Dominioni en el GX24.