Integrar OpenUI5 en nuestro blog (y V): Página principal de Blogger responsive

Hasta ahora, hemos ido añadiendo controles OpenUI5 en nuestro blog de Blogger, pero no hemos dejado muy bonita la página principal: Un tile debajo de otro, todo amontonado, que ni es responsive ni nada, y eso siempre resulta interesante, ¿no?

Eso es lo que vamos a hacer ahora: La página principal, que nos mostraba el listado de artículos mediante tiles, va a ser responsive, de tal manera que, dependiendo del tamaño de la ventana, mostrará más o menos tiles en cada línea.

Para eso, tenemos que investigar los siguientes puntos:

• Cómo añadir un Grid de OpenUI5 en la página principal.
• Cómo cambiar el ancho mínimo y máximo de Blogger, ya que por defecto nos fuerza a un ancho fijo.

Y así, nuestra página principal ya será responsive.

El resultado se puede ver en https://jgctest3.blogspot.com/

Lo que ya habíamos hecho

Para llegar aquí, habíamos:

1. Aprendido lo básico de HTML declarativo con OpenUI5 y Blogger, con un artículo introductorio;
2. Creado un Hola Mundo en versión friki y con OpenUI5, para invocar a Cthulhu;
3. Añadido un GenericTile para mostrar el título de cada artículo;
4. Modificado el loop de Blogger para mostrar los tiles sólo en la página principal y el contenido del artículo sólo en cada artículo.

Añadiendo el layout adaptable

Vamos a usar un control de layout sencillo, como es el sap.ui.layout.Grid. Es un control que ya habíamos utilizado en una serie de post que comenzaban con éste. Lo configuraremos para que muestre tres tiles en tamaño grande, dos en tamaño mediano y uno en tamaño pequeño.

<div data-sap-ui-type="sap.ui.layout.Grid"
        data-default-span="XL4 L4 M6 S12"
        data-width="100%">

La ubicación para poner el Grid la tenemos más o menos clara: en el LOOP. Pero, si nos paramos a pensar (o nos ponemos a modificar y vemos que falla, claro), veremos que no lo podemos poner dentro del LOOP. Si no, para cada tile, crearía una malla.

Por tanto, es el LOOP el que tiene que estar dentro del Grid. Y no nos olvidemos, claro está, de cerrar el Grid al final del LOOP.

<div data-sap-ui-type="sap.ui.layout.Grid"
        data-default-span="XL4 L4 M6 S12"
        data-width="100%">

<b:loop values='data:posts' var='post'>
... código para mostrar página principal o artículos ...
</b:loop>
</div>

Lo último que debemos tener en cuenta es que sólo queremos el Grid para la página principal, para ordenar los tiles. Eso es sencillo, sólo tenemos que recordar la condición que vimos en el post anterior:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
... aquí el inicio del grid ...
</b:if>

Por tanto, nuestro código será:

¡Pero si eso no es lo que habíamos dicho!
Ahí hay más caracteres raros que en el Anillo Único.

Ojo aquí con lo que nos encontramos, un montón de letrujas raras. ¿Por qué hemos reemplazado varios caracteres especiales de HTML por su código HTML equivalente, con &. Por ejemplo, hemos puesto &lt; en lugar de <. Podríamos pensar que es por meter etiquetas HTML dentro del IF, pero eso ya lo habíamos hecho antes y no había pasado nada.

Hay una pequeña diferencia. Hasta ahora, cuando habíamos metido algún DIV dentro de un IF, lo habíamos cerrado dentro del mismo IF. Pero si el DIV no se cierra dentro, Blogger no nos lo permite, nos dará un error. Nos obliga a cerrar las etiquetas HTML dentro del mismo bloque, tal que así:

<b:if>
  <div ...></div>
</b:if>

Pero eso nos vale menos que a Thor un martillo de juguete de los de pito, ya que el Grid debe incluir todos los tiles y se tiene que cerrar al final del LOOP.

Precisamente para poder hacer eso, debemos reemplazar los caracteres HTML por su código HTML.

< por &lt;
> por &gt;
' por &#39;
" por &#34;

Sabiendo eso, lo dejamos como en la imagen y procedemos a cerrar el Grid, justo al final del LOOP, y teniendo en cuenta el mismo problema con los caracteres HTML:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
... aquí el inicio del grid ...
</b:if>

<b:loop values='data:posts' var='post'>
... código para mostrar página principal o artículos ...
</b:loop>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
... aquí el cierre del grid ...
</b:if>

El resultado se verá así:

Ya lo hemos conseguido, tenemos nuestro código hecho y lo vamos a probar.

Parece que todo está bien, ¿o quizá no?

Tenemos nuestra página con los tres tiles. No vemos el borde de los tiles, es algo que no ha quedado bien del todo, pero parece que los tiles se ordenan.

Vamos a probar ahora si los tiles se reordenan al reducir el tamaño de la página. Intentamos ver como quedaría en tamaño medio, y vemos cómo se colocan, dos tiles arriba y uno debajo.

Ahora parece más responsive

Pero, si nos fijamos en una cosa, nos daremos cuenta de que, aunque la distribución ha cambiado, el ancho de la página de fondo no lo ha hecho, sigue siendo igual de ancho. ¿Qué ha ocurrido?

Modificar el ancho mínimo y máximo del bloque central

Nos hemos preocupado tanto por poner el Grid, que se nos ha olvidado que esta disposición de Blogger tiene un ancho fijo, que se puede configurar en las propiedades del tema. En este caso en particular, era de 960 píxeles. Lo podemos ver dentro del propio tema, en la sección <b:template-skin>, que puede aparecernos plegada, así que la desplegaremos pulsando sobre el número de línea o sobre los tres puntos.

Al desplegarla, veremos las definiciones de estilo de la página. Ahí nos encontramos pronto con el culpable, una variable de Blogger, content.width, con el ancho que definimos en las propiedades del tema, y dos bloques de estilo CSS, para BODY y para .CONTENT-OUTER, que usan dicha variable.

Así que me estabas forzando el ancho, Blogger listillo...

Ok, pues vamos a modificar dicha definición para que se ajuste a un ancho máximo y un ancho mínimo. Nos olvidamos ya de OpenUI5, esto es puro CSS.

Nos creamos dos variables nuevas, que yo he llamado content.maxwidth y content.minwidth, para definir un ancho mínimo y máximo para el marco exterior. Y con esas variables definimos las propiedades CSS de ancho.

min-width y max-width no es compatible con todos los navegadores, así que usamos también _width por temas de compatibilidad.

Podríamos probar a jugar con porcentajes, con márgenes, con padding... bueno, todo es probar, que a lo mejor lo que hemos hecho aquí queda mal en algún caso. Lo que veremos será lo siguiente:

El ancho de la página también se reduce, y los tiles se reorganizan. Así que ya tenemos nuestra página principal con tiles en un layout adaptativo. Bueno, no está mal, creo yo, ya le hemos dado nuestro toque fiorístico al Blogger.

Eso es todo, amigos

Nos ha costado 5 post hacer algo medianamente aceptable, pero vemos que esto del HTML declarativo puede tener su buen uso.

Me ha quedado pendiente que se vean los bordes del tile. Es un problema de márgenes, que al meterle un margin de 1px con el F12 funciona bien, pero no he conseguido reproducirlo en OpenUI5. En cuanto lo tenga, actualizaré este post.

Ahora sólo nos queda hacer un diseño de cero, en lugar de usar uno genérico de Blogger, pero eso sí que es mucho trabajo, ¡así que no os lo voy a poner tan fácil! :P

Como comentario de todo lo que he ido aprendiendo por el camino, hasta última hora no he descubierto algo que estaba haciendo mal. Cuando usaba algunas propiedades de un control en HTML, no me las cogía. Al principio pensaba que a lo mejor no todas eran compatibles.

Nada más lejos de la verdad, resulta que sí que lo son. El problema son las mayúsculas y minúsculas, ya que la librería no entiende cosas como data-defaultSpan, pues lo traduce a defaultspan... así que, cuando tengamos una propiedad con varias palabras en OpenSAP (en formato camelCase), tenemos que separar las letras con guiones. Por tanto, data-defaultSpan tiene que ser data-default-span. Con eso, lo tenemos solucionado. ¡Anda que no me ha costado descubrirlo! Pero bueno, aprovecho a actualizar algún post anterior en referencia ese error ;)-