PhotosGallery: Ejemplo de uso de GeneXus Flex y Flex Grid (Responsive Web Design en GeneXus)

Desde la introducción de funciones de Responsive Web Design en GeneXus X Evolution 3 hemos podido crear aplicaciones web responsivas con GeneXus.   El control Responsive Table ha sido el pilar de nuestros diseños responsivos, que nos permiten especificar la apariencia de una aplicación en distintos tamaños de pantalla. Sin embargo, este control tiene algunas desventajas:

  • En algunos casos se necesitan más de 12 columnas.
  • El desarrollador desea que los elementos fluyan libremente de una fila a otra cuando no hay lugar en la fila.
  • No se conoce el ancho de las celdas en tiempo de diseño.
  • Hay un espacio por defecto de 15px entre las celdas de una tabla responsiva, y eso a veces no es lo que se desea (se puede eliminar a través de las Theme classes).

Controles Flex

Los controles Flex nos permiten crear layouts flexibles que “ordenan, alinean y distribuyen el espacio entre los elementos de un contenedor, aun cuando su tamaño se desconoce y/o es dinámico (por eso son “flexibles”)”.   GeneXus 15 Upgrade 12 introdujo dos nuevos controles: Flex y Flex Grid.   Flex es un contenedor para una cantidad estática de elementos, que se conoce en tiempo de diseño, mientras que Flex Grid es un tipo de FreeStyle grid donde podemos cargar la cantidad de elementos que deseemos de forma dinámica.   Ambos controles flex poseen controles hijos tal como vemos en esas cinco propiedades: Flex Direction, Flex Wrap, Justify Content, Align Items y Align Content.

Flex Direction

Especifica la dirección de los elementos, que se pueden ordenar en forma horizontal (Rows y Rows Reverse) o vertical (Column y Column Reverse).

Captura de pantalla 2018-08-16 09.56.31

Flex Wrap

Permite especificar si los elementos deberían ajustarse o si deberían caber en una sola fila.

Captura de pantalla 2018-08-16 09.58.40.png

Justify Content

Define la alineación de los elementos en las filas (alineación horizontal si Flex Direction se especifica como una fila y alineación vertical si Flex Direction se especifica como una columna).

Captura de pantalla 2018-08-16 10.00.05

Align Items

Define la alineación de los elementos en las filas (alineación vertical si Flex Direction se especifica como una fila y alineación horizontal si Flex Direction se especifica como una columna.

Captura de pantalla 2018-08-16 10.02.46.png

Align Content

Alinea la fila cuando hay espacio extra en el contenedor.

Captura de pantalla 2018-08-16 10.04.19

Ejemplo: PhotosGallery

 

Para mostrar esta nueva función creamos una galería de fotos utilizando controles Flex y Flex Grid. La galería muestra un conjunto de fotos y una barra de herramientas para cada foto, con algunas acciones. Algunas fotos fueron tomadas en formato apaisado, otras en retrato y otras son panorámicas, por lo que las dimensiones de las fotos se desconocen en tiempo de diseño. Captura de pantalla 2018-08-16 10.05.14

Para optimizar la experiencia de los usuarios con pantallas más pequeñas, queremos mostrar la barra de herramientas horizontalmente, debajo de la foto. En pantallas más grandes, mostraremos las acciones verticalmente en el lado derecho de la foto.  

Captura de pantalla 2018-08-16 10.07.13

Veamos cómo se puede hacer esto fácilmente usando los controles Flex y Flex Grid. Comencemos con un enfoque de arriba hacia abajo, pensando en la forma en que se presentarán las fotos, y luego continuaremos con la forma en que se presentará cada elemento.

Grid

Queremos que las fotos fluyan horizontalmente y que se ajusten automáticamente a una nueva fila para evitar el scrolling horizontal. Para lograr esto usaremos un Flex Grid, donde Flex Direction es “Row” y Flex Wrap is “Wrap”. Estas propiedades pueden configurarse en el control y en el Theme class del control.

 

sHDB4jY4_9e83KI_6TTRUEQ

 

Elementos del grid

Luego debemos decidir cómo presentar cada elemento del grid. Usaremos un control Flex, donde su primer control hijo será la foto, y el segundo será la barra de herramientas. En este caso, en pantallas extra pequeñas (<768px – Extra Small) queremos que la barra de herramientas esté debajo de la foto y en otros tamaños de pantalla, queremos que la barra de herramientas esté al lado de la foto. Como necesitamos diferentes comportamientos en diferentes tamaños de pantalla, tendremos que configurar las propiedades a través del Theme class del control Flex. El valor general para Flex Direction será Row, pero para pantallas ExtraSmall será Column.   También queremos que ambos artículos tengan la misma altura, cuando se colocan horizontalmente, o el mismo ancho, cuando se colocan verticalmente, por lo que configuraremos el control Flex para estirar los elementos utilizando Align Items=Stretch.

 

2

Barra de herramientas de elementos

Finalmente, tenemos que pensar en la barra de herramientas que contiene las acciones. Esto es similar al caso anterior, ya que queremos que los iconos de acción estén dispuestos horizontalmente para las pantallas ExtraSmall (cuando la barra de herramientas está debajo de la foto) y verticalmente en otros tamaños de pantalla (cuando la barra de herramientas está situada a la derecha de la foto). Para la barra de herramientas también utilizaremos un control Flex, y configuraremos su propiedad Theme class Flex Direction en Row para las pantallas ExtraSmall, y Column en general.

4

5

 

Y eso es casi todo. Un último detalle importante es establecer una altura máxima para las fotos. Si no están configuradas, todas las fotos se mostrarán a tamaño completo, y no se verán bonitas en absoluto.

Conclusión

Las tablas responsivas (Responsive Tables) desde hace un tiempo nos permiten crear aplicaciones responsivas. Ahora, con la introducción de controles Flex y Flex Grid, tenemos un acompañamiento perfecto para aquellos casos donde las Responsive Tables no eran suficientes u ofrecían demasiadas funciones.   Omití a propósito algunos detalles menores de implementación del ejemplo para mantener el foco en los controles flexibles, pero ese ejemplo se puede ver aquí.   También puede probar la demo en vivo o continuar leyendo sobre estos nuevos controles en el community wiki aquí.   Y si quiere saber sobre la tecnología subyacente que permite esta función, este artículo es fundamental: A Complete Guide to Flexbox

Leave a Reply

%d bloggers like this:
search previous next tag category expand menu location phone mail time cart zoom edit close