miércoles, 13 de junio de 2018

Integrar OpenUI5 en nuestro blog (II)

En el artículo anterior, habíamos establecido unos objetivos, un poco vagamente, para ver qué nos encontrábamos: Aprender a utilizar OpenUI5 en una web normal.

Así que ahora nos toca llevar a cabo la parte práctica, en plan básico: Añadir la librería en nuestro sitio web y poner un simple botón que nos soltará un "Hola, mundo". Por supuesto, lo vamos a hacer un poco más friki y vamos a intentar invocar a Cthulhu.

El Hola mundo friki

La web que vamos a utilizar será un simple blog de Blogger (de Google), aunque este artículo sería aplicable a otros sitios web (excepto, claro está, la parte específica de Blogger).

Y los pasos que vamos a seguir son los siguientes:


Se puede ver el resultado en el blog https://jgctest1.blogspot.com.

Elegir tema y editarlo en Blogger


Lo primero que debemos hacer es preparar nuestro sitio web. Yo me he creado un blog para la ocasión, ya que no quiero cargarme el mío. Lo suyo es hacerlo en una copia de nuestro blog y mantener el real como si fuese un entorno productivo.

He escogido un tema sencillito. Está claro que si fuésemos a publicar un blog de verdad, aquí nos preocuparíamos en escoger el tema qué más nos guste, establecer el diseño, configurar la hoja de estilos, etc.

Atentos: Si no vamos a user Blogger, este apartado es menos útil que un hobbit sin anillo único, así que nos lo podemos saltar.

En Blogger, hay una sección Tema donde podemos escoger el tema a utilizar de entre las plantillas disponibles. En esa sección, podemos elegir el tema y configurarlo pulsando el botón Personalizar.

Yo ya he añadido un par de artículos tontos para al menos ver algo en el blog

Yo simplemente he escogido un tema de estilo Sencillo. Lo suyo sería escoger uno que más o menos nos sirviese para lo que tenemos en mente, para tener una plantilla generada de la que partir y, después, meterle mano para añadirle nuestras adaptaciones. No me he molestado en configurar los colores, ya que el propósito, de momento, es puramente técnico y no visual.


En la opción de diseño escogemos cómo se mostrarán los distintos bloques del blog. Aquí he optado por un diseño con una única columna, sin barras laterales, pensando que en un futuro podría usar una malla adaptativa para que el contenido se recolocase dinámicamente con la dimensión del navegador.


Ahora, ya con el tema escogido, vamos a lo chulo: Usar la librería OpenUI5.

Integrar la librería OpenUI5 en Blogger


Para poder añadir la librería, tenemos que acceder al código HTML de nuestro sitio web. Que si usamos Blogger, podemos pensar "huy, eso no se puede". Pero sí, podemos hacerlo yendo de nuevo a la configuración de Tema y escogiendo la opción Editar HTML.

Aquí vamos a ver mucho código HTML, incluyendo etiquetas propias de Blogger, que se utiliza para añadir las secciones y widgets que queremos mostrar en nuestro blog. Estas etiquetas comienzan con <b:xxxx> o <data>.

En la cabecera del documento, etiqueta <head>, añadimos un script para cargar la librería. Ahí indicaremos la ubicación donde está la librería OpenUI5. Como no podemos (o no sabemos) instalar la librería en nuestro sitio, lo que haremos será usar la CDN de OpenUI5 con la versión que nos interese, como vimos en el post anterior. En este ejemplo, la versión de la librería será la 1.52.11.

En ese mismo script, debemos cargar un plugin, que es el que nos va a permitir usar el HTML declarativo. Para hacerlo, añadimos el módulo sap.ui.core.plugin.DeclarativeSupport.

El resultado del script sería el siguiente:

  <script data-sap-ui-libs='sap.m'
          data-sap-ui-modules='sap.ui.core.plugin.DeclarativeSupport'
          data-sap-ui-theme='sap_belize'
          id='sap-ui-bootstrap'
          src='https://openui5.hana.ondemand.com/1.52.11/resources/sap-ui-core.js'
          type='text/javascript'/>

Ahora sólo hace falta guardar el tema y probar el blog, para ver que no revienta nada.
Siempre es útil ver la consola de errores, para ver si salta algún mensaje extraño.

Añadir HTML declarativo


Ahora queremos añadir los componentes y sus eventos. ¿Cómo lo hacemos? Mediante etiquetas HTML de tipo <div>. Dentro de las mismas, usaremos una serie de atributos para definir el componente UI5 que vamos a utilizar y sus propiedades.

Estos atributos van a comenzar siempre con la palabra data-, seguidos por un texto que nos permitirá identificar si es un tipo de componente, un evento o una propiedad.

  • Con el atributo data-sap-ui-type indicaremos el tipo de componente que vamos a usar. Por ejemplo:

    <div data-sap-ui-type="sap.m.Button"></div>

  • Para indicar el id y las clases, usaremos los atributos de html de siempre... id y class:

    <div data-sap-ui-type="sap.m.Button" id="botoncico"></div>
  • Para añadir una propiedad, utilizamos el atributo data-nombre_de_la_propiedad. Por ejemplo, para añadir texto al botón, usaremos data-text:

    <div data-sap-ui-type="sap.m.Button" data-text="Botoncico"></div>


    Ojo aquí, que a mí me ha costado descubrirlo (ya lo leeréis en el último post). Cuando una propiedad tiene un nombre en formato camelCase, por estar formado por varias palabras (por ejemplo, iconFirst), en HTML declarativo lo tenemos que separar por guiones: data-icon-first.
  • Si queremos usar un evento, utilizamos data-nombre_del_evento. Vamos, igual que con la propiedad. Por ejemplo:

    <div data-sap-ui-type="sap.m.Button" data-press="meHanPulsado"></div>


    La función la definiremos en un bloque de script, en javascript.

    <script>function meHanPulsado(event) { codigo; } </script>
  • Si un componente tiene otros componentes anidados (es decir, una agregación), definimos la agregación como un div anidado con el atributo data-sap-ui-aggregation="nombre_agregación". Este div, a su vez, tendrá anidados otros div con los componentes hijos. Si es la agregación por defecto, no hace falta ni añadir este nivel.

    <div data-sap-ui-type="sap.ui.layout.Grid">
    <div data-sap-ui-aggregation="content">
    <div data-sap-ui-type="sap.m.Label" ...></div>
    <div data-sap-ui-type="sap.m.Label" ...></div>
    </div> <!-- estamos cerrando el content -->
    </div> <!-- estamos cerrando el grid -->

Añadir el botón


Ya tenemos la librería incluida y ya sabemos cómo usar las etiquetas HTML para poder incluir nuestros componentes UI5. Ahora vamos a añadir un botón.

No vamos a ponernos a buscar el mejor sitio para ubicarlo, lo vamos a poner arriba. Existe una sección en Blogger que se utiliza para navegar entre los distintos blogs, y la podemos encontrar como <b:section ... id='navbar'>. Pues lo colocaremos justo debajo de ese sitio.

La entrada para nuestro botón, y que incluye un texto que diga Invocar a Cthulhu, será:

<div data-sap-ui-type='sap.m.Button' data-text='Invocar a Cthulhu'/>



El resultado es el siguiente, aunque de momento nuestro botón no hace nada, pero ya lo tenemos colocado.

Vale, es un triste botón, pero eso ya tiene pinta de OpenUI5

Mostrar mensaje cuando se pulsa el botón


Ahora nos toca crear un evento y enlazarlo al botón. Tenemos que modificar la definición del div del botón para incluir el evento, con data-press="nombre_de_la_funcion"

<div data-press='invocar' ...>

Después, añadimos un simple script en javascript donde añadiremos la función, que va a mostrar un mensaje para poder invocar a Cthulhu tranquilamente. Para el mensaje usaremos otro componente OpenUI5, el sap.m.MessageToast:

<script>
  function invocar(oEvt) {
sap.m.MessageToast.show("Ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn");
  }
</script>


Sólo con ver este código ya estamos perdiendo cordura.

Pues ya está, podemos probar el botón y ver que, al pulsarlo, nos sale el mensajito que habíamos añadido. ¡Ya tenemos nuestra primera chapuchilla hecha!


¿Queremos más?

Bueno, pues en el siguiente post podemos aprender algo más: Añadiremos tiles a nuestra página principal y aprenderemos a usar agregaciones.

No hay comentarios:

Publicar un comentario

Nota: solo los miembros de este blog pueden publicar comentarios.