Integrar OpenUI5 en nuestro blog (III): Usando agregaciones

Estamos integrando la librería OpenUI5 en nuestro blog, que nada tiene que ver con SAP. En nuestro ejemplo en particular, se trata de un blog de Blogger (Google). En los dos artículos anteriores habíamos aprendido:

1. Lo básico, con un artículo introductorio;
2. A crear un Hola Mundo en versión friki y con OpenUI5, para invocar a Cthulhu.

Ahora vamos a ver cómo podemos avanzar. Como siempre, haremos algo básico para ir aprendiendo conceptos técnicos.

Lo que vamos a hacer es añadir, en la página principal, cada artículo en un Tile con el título y la primera imagen. En posteriores artículos dejaremos sólo los tiles y con ellos navegaremos al artículo en sí. El ejemplo se puede ver en https://jgctest2.blogspot.com/

Sí, de momento es cutrecillo, pero es el primer paso
para conseguir algo más grande: ¡La Estrella de la Muerte! 

Con este proceso aprenderemos dos cosas:

• A localizar en Blogger dónde podemos tratar nuestros posts y las etiquetas básicas: Buscaremos el LOOP.
• A usar agregaciones en OpenUI5 mediante HTML declarativo.

Oye, que eso no es moco de pavo.

Localizando el punto en Blogger para trastear

Editamos el HTML de nuestro tema (podemos ver cómo hacerlo en el post anterior). Nuestro objetivo es descubrir dónde hay que poner nuestro código para que se vean los tiles en lugar de resumen normal.

¿Dónde está eso en Blogger? Nos toca buscar la etiqueta de LOOP, que Blogger utiliza para mostrar todos los posts. Dicho loop está dentro del widget Blog1, que podemos encontrar pulsando en Ir al widget.

Como referencia, también podemos usar el comentario <!-- post -->

Ahí encontramos la etiqueta b:loop y, algo más abajo, el bloque que nos interesa, <b:include data='post' name='post' />

Aquí está la chicha

Ahí es donde vamos a trabajar. Intuimos que el loop, en cada iteración, nos va a mostrar un artículo, así que justo debajo del loop añadimos el código que queremos para añadir tiles.

Añadir el tile con HTML declarativo

Para nuestro tile, vamos a hacer lo siguiente:

• Añadir un tile de tipo genérico, sap.m.GenericTile.
• Como el tile genérico nos permite añadir contenido (su agregación principal), le añadiremos una imagen, la primera que aparece en el post. Hay una propiedad del tile para añadir imágenes, headerImage, pero tengo que admitir que la he usado y no me ha funcionado :(... en cualquier caso, como quería usar agregaciones, para este ejemplo tampoco me aportaba demasiado.

El código que nos interesa es algo como el siguiente, el bloque entre los comentarios <!-- uxsap -->:

Código a porrón

¿Y qué significa todo eso? Vamos a verlo paso a paso:

Lo primero es añadir el tile genérico. En la propiedad data-header añadimos el nombre del post, que podemos recuperar con data:post.title:

<div data-sap-ui-type='sap.m.GenericTile' expr:data-header='data:post.title'>
</div>

Hemos cerrado con </div> porque dentro del mismo queremos añadir otro div, en el que añadiremos las agregaciones. Estas agregaciones las añadimos con un div como el siguiente, con el atributo data-sap-ui-aggregation='nombre_de_la_agregacion' y el tipo de elemento que usamos para dicha agregación.

<div data-sap-ui-type='sap.m.GenericTile' expr:data-header='data:post.title'>
    <div data-sap-ui-aggregation='tileContent' data-sap-ui-type='sap.m.TileContent'>
    </div>
</div>

Si vemos la documentación de GenericTile, veremos que tileContent sólo permite añadir entre 0 y 1 elementos. Nosotros sólo queremos añadir una imagen, pero por si quisiésemos usar más elementos, podríamos añadir un elemento de layout como el HBox

<div data-sap-ui-type='sap.m.GenericTile' expr:data-header='data:post.title'>
  <div data-sap-ui-aggregation='tileContent' data-sap-ui-type='sap.m.TileContent'>
    <div data-align-content='sap.m.FlexAlignContent.Center' data-sap-ui-type='sap.m.HBox'>
    </div>
  </div>
</div>

Finalmente, dentro de ese HBox, añadimos la imagen con sap.m.Image y le damos un ancho y alto para que quepa dentro del tile.

La imagen la podemos recuperar de Blogger mediante data:post.firstImageUrl. Recordamos que, para poder usar elementos variables de Blogger, el atributo debe comenzar por expr, así que será expr:data-src='data:post.firstImageUrl'.

<div data-sap-ui-type='sap.m.GenericTile' expr:data-header='data:post.title'>
  <div data-sap-ui-aggregation='tileContent' data-sap-ui-type='sap.m.TileContent'>
      <div data-align-content='sap.m.FlexAlignContent.Center' data-sap-ui-type='sap.m.HBox'>
        <div data-height='5em' data-sap-ui-type='sap.m.Image' data-width='5em' expr:data-src='data:post.firstImageUrl'/>
    </div>
  </div>
</div>

Con esto ya tenemos una primera versión de la página inicial, mostrando un tile con el título del post y la imagen.

¿Y esto es todo?

Esta versión es un poco cutrecilla, porque nos aparece el tile y, justo después, el post. Además, si pulsamos el tile no nos va a dirigir al propio artículo, y tenemos que seguir accediendo de la forma normal. Pero ya tenemos un avance. Esos cambios los vamos a ver en el siguiente artículo.