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:
- Debemos crear las clases de estilo que necesitamos en nuestro proyecto.
- 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!
