miércoles, 1 de agosto de 2018

Integrar OpenUI5 en nuestro blog (IV): Página principal sólo con tiles

Habíamos creado nuestra página inicial de Blogger para mostrar los artículos como Tiles, pero de momento no nos había quedado muy bonito. Es como si quisiésemos hacer una web élfica y sólo hubiésemos conseguido crear una web orca, todo aún muy feo. Los tiles aparecían tanto en la entrada principal como en cada artículo, y ni siquiera podíamos navegar con ellos. Así que vamos a cambiar esa funcionalidad. Para ello, nuestros objetivos son:

  • Al pulsar un tile, se navegará al artículo correspondiente.
  • En la página principal sólo se verán los tiles.
  • En cada artículo, no se verán los tiles.

Para obtener algo como lo siguiente:


Y diréis, "oye, que todavía queda feo". Pues sí, ¿pero a que no tanto como antes? Poquito a poco vamos mejorando.

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.

Esta vez lo que si veremos es mucho más de Blogger que de OpenUI5.

NOTA: Tras una corrección en el post 5, algunas de las imágenes no están del todo actualizadas. Las propiedades de un control OpenUI5 en HTML separan el formato por guiones. Así, data-alignContent debería ser data-align-content.

Navegando desde el tile


¿Queremos navegar al artículo tras pulsar un tile? Pues lo primero que vamos a hacer es crear un manejador que realice dicha navegación. Eso lo tenemos chupado. Dicha función recibirá, como argumento, el evento que la ha invocado y, a partir de dicho argumento, podremos obtener su origen, el tile que la invocó.

function navegar(oEvt) {
  var elTilePulsado = oEvt.getSource();
}

Como no tenía muy claro dónde asignar la url en el GenericTile, he optado por añadirla en la propiedad Tooltip. Sí, estoy haciendo un poco de trampa :P. Cuando pulsemos el tile, a través del evento press, éste llamará a la función. Recuperaremos el tile que hizo la invocación y, una vez conseguido, su propiedad tooltip. La navegación la haremos con un simple código javascript, que nos va a permitir mantener el histórico de navegación.

window.location.href = sUrl;

El código completo es el siguiente:

Un código muy pequeñito para comenzar

Ahora tenemos que añadir el manejador en el evento press del tile. Antes, teníamos el siguiente código para el tile:


Lo retocamos un poco para conseguir lo que queremos. Primero, en el evento press, añadimos la llamada a la función navegar

data-press='navegar'

Después, en el tooltip, añadimos la url del artículo. Para recordar como usar variables de Blogger, eso lo conseguíamos añadiendo, al inicio del nombre del atributo HTML, la cadena expr:, de la siguiente forma:

expr:data-tooltip='data:post.url'

Si no pusiésemos el expr:, la url sería, literalmente, data:post.url.

Ahora nuestro tile luce tal que así:

Sí, yo cuando veo el código me imagino las imágenes... demasiado Matrix he visto yo...

Mostrando el tile sólo en la página principal


Ahora vamos con la parte complicada, conseguir que el tile sólo se vea en la página principal y que el contenido sólo se vea al navegar al artículo. Puro código Blogger.

Para ello, analizamos el funcionamiento del LOOP. Al inicio, tenemos una serie de condicionales que parecen mostrar la fecha y el título.

En nuestra página principal, con los tiles, no vamos a querer mostrar dicha información. Esa parte no nos interesa para la página principal. Si quisiésemos añadir la fecha, podríamos hacerlo aprovechando una propiedad del tile, pero no fuera del mismo.


Este es el código que tenemos antes de meterle mano

Así que movemos nuestro GenericTile justo antes de ese código.

¿Pero cómo sabemos si estamos en la página principal o no? Blogger nos permite identificarlo mediante la siguiente condición:

<b:if cond='data:blog.pageType == &quot;index&quot;'> 

Así que vamos a usarlo para separar el artículo del tile. Colocando el GenericTile entre el inicio del LOOP y el bloque de fechas, tenemos lo siguiente:

El IF y el ELSE que nos interesan están sin sangrar, ahí, a la izquierda del todo

Por supuesto, ese IF lo tenemos que cerrar en algún sitio, justo donde acaba el bloque del post. Podemos cerrarlo justo antes del fin del LOOP.

NOTA: En este caso en particular, lo he cerrado un poco antes, justo delante del bloque de publicidad,<!-- Ad -->. La verdad es que podría borrar ese bloque porque no utilizo publicidad para nada, o incluso podría haberlo dejado dentro del ELSE. Depende de dónde quiera mostrar los anuncios.

El IF cerrado es el que está resaltado

Con este cambio, lo que estamos haciendo en el LOOP es:

  • Si estamos en la página principal, mostramos todos los artículos en tiles.
  • Si estamos en un artículo específico, mostramos el post (el loop sólo se ejecutará una vez, para ese artículo).

El resultado final sería el siguiente:


Y si pulsamos un tile, navegaremos al artículo correspondiente.


Ya hemos organizado un poco más el blog.

Y lo siguiente es...


Crear una visualización de la página principal más responsive, ya que así, los tiles en fila india, quedan feuchos. Nuestra web ya no es un orco, pero sigue siendo un poco semiorco. En el siguiente post intentaremos ponerle algo más de maquillaje.

1 comentario:

  1. Que bueno aun no he podido leer estos pots con detaller pero igual les echo un ojo rapido :D para etiquetas puedes usar la nueva funcionalidad de sapui5 1.54 sap.tnt.InfoLabel se ve bonito :D o FlexibleColumnLayout que se ve super chulo xD . Sigue asi :D

    ResponderEliminar