SAPUI5 con estilo 😎

En este post vamos a ver como aplicar estilos a SAPUI5. Puede parecer un post muy simple, pero es bueno conocer lo simple para hacer cosas complejas 😉.

Los que venimos del ABAP, sabemos lo cerradas que eran las dynpros. Muchas veces me encontré en la situación de tener que hacer una pantalla “atractiva”, y tener que decir el mítico: “Lo siento, pero esto en una dynpro no se puede hacer”.

Con la aparición de SAPUI5 y la utilización de sus controles, podemos llegar a pensar que estamos en la misma tesitura que con las dynpros… ¡Pero no es así!

En SAPUI5 podemos utilizar las hojas de estilo en cascada, o como se conoce popularmente, las CSS (al final SAPUI5 es una web).

Para conocer más sobre CSS, os dejo un link a la wikipedia. Pero básicamente, son unos ficheros en nuestro proyecto que nos permiten aplicar un diseño visual a nuestras pantallas.

 

¿Como aplico el estilo a mi proyecto de SAPUI5?

Cuando creamos un proyecto, este ya viene con un fichero CSS configurado en el manifest:

Esto, lo que nos esta indicando, es que tenemos un fichero en el path indicado. Si miramos el proyecto, podemos ver el fichero dentro de la carpeta css:

Ok, ya tenemos identificado el fichero CSS, ¿ahora como lo aplicamos en SAPUI5? Pues para aplicarlo, debemos hacer dos cosas:

  1. Debemos crear las clases de estilo que necesitamos en nuestro proyecto.
  2. Debemos aplicar las clases en los controles de SAPUI5.

Para ello, he creado 4 tiles donde uno lo dejaremos como sale por defecto y a los otros les aplicaremos estilos:

Una vez tenemos los tiles, creamos 3 clases CSS diferentes para aplicar a los tiles:

Con estas clases, lo que hemos hecho es darle un color de fondo (utilizando diferente formato) al tile y dejar un espacio a la izquierda (veréis más a delante el color y la distancia de separación).

Una vez tenemos las clases, las aplicamos a los controles con la propiedad class:

 

Y con esta magia que acabamos de hacer… tenemos el siguiente resultado (no es muy bonito… pero sirve de ejemplo, jejeje):

 

Como podéis ver, con SAPUI5 rompemos las barreras que antes teníamos con las dynpros y las web dynpros (estas eran algo más flexibles). Ahora podemos hacer UIs dignas y bonitas, incluso se puede contratar un diseñador web y aplicar ese diseño a nuestras pantallas. ¡Ahora podemos dejar volar la imaginación! 

 

¡Por cierto! Si queréis colaborar con el blog (aquello de pagar servidor y dominio), podéis pasar por la tienda de la tostadora para ver las camisetas que tengo (iré subiendo más). Si… a parte de programar, también me gustan la camisetas frikis 😜.

¡Nos vemos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *