Integrar OpenUI5 en nuestro blog (I)

Un día, un tal aancos me decía que si mi web hablaba de UX, que si no debería ser más amigable, más moderna, más usable... Y no le faltaba razón. La verdad es que mi objetivo en el blog es aprender, sobre todo, la parte técnica relacionada con SAP UX. No me he preocupado demasiado en darle un formato más bonito al propio blog, sólo en publicar lo que voy aprendiendo.

Y ahí pensé, que anda que no quedaría chulo "fiorizar" el propio blog. No sé, ponerle botones típicos de SAPUI5, añadirle tiles, crear mallas que se adapten a la resolución.

Ya había hecho alguna prueba con Blogger (de Google, donde tengo este blog) para poder crear navegaciones de más de un nivel, ya que por defecto Blogger sólo permite un nivel. Para ello, había utilizado la librería jQuery, que había cargado en el propio blog.

Así que, ya con esa idea en la mente, integrar SAPUI5 no podía ser muy difícil. ¿Qué debería tener en cuenta?



Lo primero, que SAPUI5 no es una librería gratuita. Pero no nos debemos preocupar por eso, ya que tenemos OpenUI5.

Lo segundo, siempre hemos estado trabajando con páginas hechas con XML. ¿Cómo vamos a hacer entonces para añadir los componentes en nuestra página de Blogger, si lo que usa es HTML? Pues una de dos, o con Javascript, o mediante otra alternativa que hasta ahora nunca había cotilleado: El HTML declarativo.

Y lo tercero, si queremos crear una plantilla en condiciones para nuestro blog, debemos saber internamente como funciona. En el caso de Blogger, Google proporciona una serie de etiquetas para poder cargar la información de los artículos que hemos publicado.

En este primer post, sólo voy a mencionar lo que vamos a utilizar, y en el siguiente veremos un ejemplo muy sencillo para poder añadir un simple botoncito en el blog. Sí, es poca cosa, pero al menos todos tenemos así un punto de partida con el que comenzar. Me gustaría intentar hacer algo chulo, pero no garantizo nada :\. Este artículo es más una declaración de intenciones que una garantía de conseguir mi objetivo.

OpenUI5 o SAPUI5

Para nuestra página web, debemos asumir que no podremos usar SAPUI5. No es una librería gratuita y tiene que usarse con otros productos de SAP (como SAP ECC o SAP Cloud Platform).

Afortunadamente, tenemos OpenUI5, que es la "parte libre" de SAPUI5 (así, dicho rápido y mal). Hay componentes comunes, y otros componentes que sólo están disponibles para SAPUI5. Podemos ver los componentes de OpenUI5 aquí y los de SAPUI5 en esta otra url. Los componentes principales, como por ejemplo la librería sap.m, los tenemos en OpenUI5.

Lo único que vamos a tener que hacer es cargar en nuestro blog la librería correspondiente. ¿Y cómo vamos a instalarla en Blogger? No tenemos que hacerlo. En su lugar, vamos a utilizar la url de la  CDN (Content Delivery Network, Red de Distribución de Contenido) de SAP, que en el caso de OpenUI5 es:

• https://openui5.hana.ondemand.com/1.52.11/resources/sap-ui-core.js si queremos una versión específica; en este ejenplo, la versión específica es la 1.52.11.
• https://openui5.hana.ondemand.com/resources/sap-ui-core.js si queremos usar la versión estable más moderna.

Lo suyo sería usar una versión estable fija y no arriesgarse a que alguna actualización cambie alguna funcionalidad inesperadamente. Cuando queramos cambiar, probaremos a actualizar la versión en una copia del blog y ver que todo va bien y, entonces, activarla en el blog "de productivo" ;).

Podemos ver aquí las versiones disponibles de OpenUI5.

Integrándolo en el blog con HTML declarativo

Al principio, cuando pensé en probar a integrar OpenUI5 en Blogger, se me ocurrió hacerlo con Javascript. Pero, personalmente, prefiero algo más "intuitivo", poder visualizar los componentes en una etiqueta y no mediante su creación dinámica con código. Es más fácil de ver y de mantener, aunque supongo que el rendimiento se verá empeorado (ya que al final tiene que renderizar los componentes a HTML real). Es una opinión personal, por supuesto.

Pero claro, XML no lo podemos utilizar. Blogger nos permite tocar su código HTML pero no es XML, así que no podemos trabajar como lo hemos hecho hasta ahora.

Entonces me acordé de que había una opción adicional: Usar HTML declarativo. ¡Qué bien, una oportunidad para aprender algo más!

Mediante HTML declarativo, añadiremos componentes OpenUI5 y sus propiedades mediante etiquetas div, añadiendo los atributos específicos. Por ejemplo, para añadir un botón de tipo sap.m.Button, lo haremos con <div data-sap-ui-type="sap.m.Button" data-text="Texto del boton" data-press="funcion_al_presionar"></div>

Aprender a usar las etiquetas de Blogger

Aparte de todo esto, hay otra cosa que habrá que aprender si queremos que todo el blog utilice componentes OpenUI5: A usar las propias etiquetas que nos proporcione nuestro proveedor del servicio para crear el blog.

En el caso que nos ocupa, tenemos las etiquetas que usa Google para Blogger. Para estos artículos no creo que entre en detalle de las mismas, pero si decidimos hacer una plantilla decente para Blogger deberíamos empaparnos de ellas.

Las etiquetas de Blogger tiene el formato <b:nombre_etiqueta></b:nombre_etiqueta>. Por ejemplo:

<b:section></b:section> para crear secciones
<b:loop></b:loop> para crear bucles.

Por otra parte, para mostrar los datos del blog (título del blog, los artículos, etc.), se utiliza la etiqueta <data>. El título del blog se muestra con:

<data:blog.pageTitle/>

¿Y si queremos utilizar datos del blog en las propias etiquetas HTML? Por ejemplo, en el HREF de un enlace. Entonces tenemos que usar expresiones, añadiendo expr: al atributo correspondiente. Un enlace a la página principal (información guardada en data:blog.homepageUrl) se indicará con:

<a expr:href='data:blog.homepageUrl'>Ir a la página principal</a>