Crear una aplicación SAPUI5 responsive con Grid (I)

Siempre nos han dicho eso de que SAPUI5 es responsive, que sus aplicaciones se van a adaptar a las dimensiones de nuestro dispositivo. Pero debemos tener una cosa clara: Para que eso ocurra, el comportamiento lo debemos programar nosotros.

No, no vale con hacer una aplicación con muchos campos y esperar que ellos se muevan y se remuevan para adaptarse. Puede que lo hagan, pero no como nosotros queramos. Algo tendremos que hacer.

Pues eso es lo que vamos a ver, cómo crear una aplicación sencilla, para mostrar a nuestros autores favoritos y algunos de sus libros. Va a ser una aplicación estática, no vamos a pelearnos con llamadas a servicios oData ni nada de eso, pero con el ejemplo luego lo podríamos adaptar a cualquier cosa que queramos.

Y nos quedará algo como esto:

¿Y qué elemento vamos a utilizar para ello? Uno de tipo layout llamado sap.ui.layout.Grid.

Los pasos serán:

• Crear el elemento sap.ui.layout.Grid y asignarle dentro el contenido.
• Definir cuanto ocupa cada elemento dentro del Grid con defaultSpan="XL3 L3 M4 S12".
• Agrupar los elementos que van dentro de una misma columna mediante un contenedor (List, Form, VerticalBox, etc.).
• Definir el sangrado de cada elemento dentro del Grid con defaultIndent="XL2 L2 M1 S0".
• Definir en ancho de cada elemento de forma individual, pero eso ya lo veremos en el siguiente post.

Elemento Grid

Este elemento es muy sencillo de usar: Crea una malla en la que vamos a poner nuestros elementos, y esa malla tiene un total de doce columnas, distribuidas uniformemente en el ancho de la pantalla. Ni una más, ni una menos.

No nos tenemos que preocupar por el número de filas. Cada elemento ocupara un número determinado de columnas y, cuando se hayan superado las 12 columnas, se pasará a la fila siguiente. Pero podemos jugar con lo que ocupa cada elemento, en columnas.

Para ello, en este post, veremos cómo aplicar un número de columnas idéntico para todos los elementos de la malla. Si añadimos un texto, una imagen, un formulario, lo que sea, todos ocuparán el mismo ancho (el mismo número de columnas). Si para un elemento no quedan columnas suficientes en la fila actual, pasará completamente a la fila siguiente. En el siguiente post ya veremos como especificar el valor para cada elemento específico, pero hoy vamos a lo fácil.

De momento, para crear un Grid, hacemos lo siguiente (habiendo definido xmlns="sap.m" y xmlns:l="sap.ui.layout").

<l:Grid>
  <l:content>
    <Text text="Elemento 1" />
    <Text text="Elemento 2" />
    <Text text="Elemento 3" />
  </l:content>
</l:Grid>

Con esto, lo que habremos definido es una malla de tres elementos que se distribuirán uniformemente en 12 columnas. ¿Pero cuántas columnas ocupa cada elemento?

DefaultSpan: El ancho de cada elemento

La propiedad que nos interesa se llama defaultSpan. Con esta propiedad vamos a definir cuántas columnas ocupan cada elemento dependiendo de la dimensión del dispositivo, con el siguiente formato:

<l:Grid defaultSpan="XL4 L4 M6 S12">

Eso quiere decir que los elementos de la malla ocuparán 4 de las 12 columnas cuando el tamaño del navegador sea muy grande (XL4), 4 cuando sea grande (L4), 6 cuando sea mediano (M6) y 12 cuando sea pequeño (S12). Si tenemos 3 elementos de texto en la malla y el navegador tiene un tamaño medio, dos textos se verán en la primera fila y el tercero en la segunda.

Así que este código que vemos a continuación:

Importante fijarse en la definición de abreviaturas que he usado: xmlns para sap.m y xmlns:l para sap.ui.layout
Eso quiere decir que <l:Grid> significa <sap.ui.layout.Grid>

Se verá así cuando el tamaño sea medio:

Y se verá así en tamaño pequeño (por ejemplo, en un móvil):

Huy, si todos los elementos se han movido solitos

Añadiendo bloques dentro del Grid

Pero así, tal cual, hay que admitir que queda muy feo. Nosotros queremos agrupar los elementos, una caja para indicar el autor y su información (el estilo, por ejemplo) y otra para indicar la bibliografía.

Así que vamos a crearnos dos elementos de tipo sap.m.List para cada uno de estos bloques, y que cada bloque agrupe todos sus elementos en la misma columna.

¿Y cómo se consigue esto? Pues no nos tenemos que preocupar: Al añadir en un Grid un elemento contenedor que agrupe otros (una tabla, una lista, un formulario, lo que sea), ese contenedor y su contenido contará sólo como uno.

Cada bibliografía incluye tres libros, pero todos están agrupados en las mismas columnas de la malla

Por tanto, en el ejemplo, para un tamaño de navegador L, cada lista ocupará 3 columnas (L3). Veremos, en cada fila, dos autores y sus libros (3 columnas por lista: Autor1 + sus libros, autor2 + sus libros).

Mientras que si lo reducimos a tamaño M, cada autor y sus libros ocuparán una fila (M6). El siguiente autor se verá en la siguiente fila.

Y, por último, en tamaño S, cada lista ocupará todo el ancho (S12).

DefaultIndent: Añadir sangrado

Tenemos una propiedad que nos va a permitir ajustar un poco más el tamaño: defaultIndent. Se formatea igual que defaultSpan, pero sirve para añadir columnas en blanco delante de cada "span" (es decir, delante de cada bloque de columnas). Esto nos va a permitir, por ejemplo, centrar la aplicación, sobre todo cuando tenemos dimensiones muy grandes. Por defecto, el valor es XL0 L0 M0 S0, es decir, sin sangrado.

Así, con el siguiente añadido al ejemplo:

Lo que hacemos es que cada elemento ocupe:

• En tamaño L, 2 columnas en blanco a la izquierda y 3 columnas ocupadas por el elemento (defaultIndent L2 y defaultSpan L3).

• En tamaño M, 1 columna en blanco y 4 columnas por elemento.

• En tamaño S, ninguna columna en blanco y 12 por elemento (todo el ancho).

Ahora la aplicación, para dimensiones grandes, queda más centrada y más elegante.

Lo siguiente sería poder elegir cuánto ocupa cada bloque, de forma independiente. Por ejemplo, puede que queramos que los datos del autor ocupen sólo 3 columnas y la bibliografía 9. Pero eso lo vamos a dejar para el siguiente post.