UI Theme designer – Aplica la plantilla de estilos a tus aplicaciones Cloud (NEO y CF)
Tabla resumen de contenido
Introducción
Crea y añade a todas las aplicaciones Cloud plantillas de estilos
Al iniciar cualquier proyecto basado en web es necesario conocer las guías de estilo a fin de poder añadir los códigos de color adecuados, imágenes corporativas, etc.
Hoy aprenderemos a crear y a aplicar estas plantillas para todas nuestras aplicaciones sin esfuerzo.
Pero, para empezar… ¿Qué es SAP UI Theme Designer?
UI Theme Designer nos permite crear libros de estilos de nuestras aplicaciones de una manera amigable, todo ello partiendo de estilos estendard y con la posibilidad de publicarlas en un repositorio de estilos.
Creando estilos para SAP Cloud NEO
Vamos a crear nuestro propio tema y a utilizarlo en nuestras aplicaciones.
Cockpit
- Activamos el servicio UI theme designer en nuestra cuenta NEO (y activamos el servicio en caso de estar desactivado):
- A diferencia de otros servicios, no accederemos a el mediante «Go to Service». Es momento de ir a SAP WEBIde a modificar nuestra aplicación.
WEBIde
- Para esta demo, crearemos una aplicación SAPUI5 con el template:
- Una vez creada la aplicación, añadiremos el acceso al editor de Theme Designer para poder crear la guia de estilos utilizando como base nuestra aplicación. (Este paso se realiza para poder trabajar con la aplicación de ejemplo, pero se puede crear el tema nuevo sin necesidad de una aplicación). Vamos al fichero neo-app.json para crear una nueva ruta hacia el servicio theme design:
{
"path": "/themedesigner",
"target": {
"type": "application",
"name": "themedesigner"
},
"description": "Route for theme designer"
}- Una vez añadida la ruta hacia theme designer debemos deployar la aplicación. Una vez deployada accedemos a la URL de la aplicación añadiendo «/themedesigner/» al final de la URL
https://themetest-sXXXXXXXXtrial.dispatcher.hanatrial.ondemand.com/themedesigner/
*Este paso no añadirá el tema de manera automática a la aplicación, solo utilizara la aplicación como ejemplo.
Theme Designer
- Al acceder a la URL podremos crear un nuevo tema
- Añadimos los datos del tema
- Para poder ver nuestra aplicación como ejemplo, debemos añadirla en el editor, para ello añadiremos una «Página de destino» nueva
- Añadiremos la aplicación que hemos deployado
- A partir de este punto, ya podemos jugar con el editor. Una vez finalizado el diseño lo tenemos que publicar en el repositorio. Esto es tan facil como «Tema» > «Grabar y liberar»
En este momento se generarán los archivos del tema y se publican en el repositorio. Nuestro tema ya esta listo para usarse, para verificarlo veremos una nueva aplicación creada como tema:
Aplicaciones
Nos queda añadir el tema a la aplicación. Ya dos maneras de hacerlo, mediante parametros en la URL de la aplicación o añadir el tema por defecto a la aplicación. Detallo cada uno de los métodos:
Por parámetros en la URL
Este método puede ser interesante si la finalidad es abrir la aplicación aplicando los estilos de manera distinta en función del punto de entrada. És la manera más fácil y rápida de aplicar un tema. En caso de no encontrarse el tema, se aplica el tema por defecto.
- Modificamos el fichero neo-app.json de nuestra aplicación y añadimos una nueva ruta hacia el repositorio de temas:
{
"path": "/themes",
"target": {
"type": "service",
"name": "theming",
"entryPath": "/themes"
},
"description": "Theming Service"
}- Realizamos un nuevo deploy de la aplicación. Una vez realizado, la llamada a la aplicación se realizará añadiendo los parámetros que apuntan al tema. Los parámetros son <nombre del tema>@</ruta añadida en el paso anterior>. Es decir:
https://themetest-sXXXXXXXtrial.dispatcher.hanatrial.ondemand.com/index.html?sap-theme=myredtheme@/themes&sap-ui-versionedLibCss=true
Añadir tema por defecto a la aplicación
Este método es compatible con el anterior y en caso de no especificar ningun parámetro de tema en la URL, seleccionará por defecto el tema indicado:
- Modificamos el fichero neo-app.json de nuestra aplicación y añadimos una nueva ruta hacia el repositorio de temas (este paso es el mismo que el cambio anterior):
- Añadimos las configuración del tema en el archivo index.html para fijar el tema por defecto
data-sap-ui-theme="myredtheme"
data-sap-ui-versionedLibCss="true"
data-sap-ui-theme-roots='{"myredtheme" : "/themes/UI5/"}'Con estos sencillos pasos ya tenemos el tema en el repositorio de temas y añadidas al las aplicaciones.
Y como realizamos esto mismo en Cloud foundry?
En SAP Cloud Foundry la aplicación de estilos es muy parecida, pero deberemos añadir la instancia creada del tipo tema para poder obtener los estilos.
Para ello, crearemos una instancia nueva del tipo UI Theme Designer
Iniciaremos una nueva instancia del tipo «Standard«, en este caso he creado la instancia AAEnricAA-theming
Una vez tengamos la instancia ya la podemos añadir a nuestro portal, para ello modificaremos el fichero YAML para añadir al enrutador (uaa) la instancia de theming y tambien lo añadiremos como resource de la aplicación:
Una vez añadida la instancia, debemos volver a deployar la aplicación.
A partir de aquí solo nos quedan dos pasos de condiguración:
- Habilitar los permisos necesarios para acceder al editor y al visor de estilos de la instancia. Para ello debemos ir a la subacount y en el menu de la izquierda «Security» > «Role collectios» y creamos un rol como el siguiente que posteriormente añadiremos al usuario:
- Acceder al editor de temas. Para ello, una vez deployada la aplicación accedemos al enrutador de la aplicación y añadimos a URL /comsapuitheming.themedesigner/:
https://[ID applicación]-approuter.cfapps.eu10.hana.ondemand.com/comsapuitheming.themedesigner/
El aspecto del editor es el mismo
Una vez creado el tema, (se crea como en el punto anterior) volvemos a nuestra aplicación para añadirlo como tema del portal, para ello, modificaremos la con figuración del portal:
De esta manera, tendremos nuestro tema por defecto en el portal
Hasta aquí la publicación de temas en las dos plataformas Cloud que tenemos disponibles.
Es importante utilizar este método de trabajo ya que si surge la necesidad de modificar los estilos, este cambio de aplica de manera automática a todas las aplicaciones.
Estos temas también podran ser usados y configurados en la plataforma SAP Cloud Portal, en ese caso, no sera necesario añadir a las aplicaciones configuraciones adicionales
Os dejo para finalizar algunos enlaces utiles
https://help.sap.com/saphelp_uiaddon10/helpdata/en/a1/18094264684230bb6510045b5b5b7c/frameset.htm
Si este tema os ha interesado, suscribiros al blog Suscribete!
