UI Theme designer – Aplica la plantilla de estilos a tus aplicaciones Cloud (NEO y CF)

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.

Resultado de imagen de guide style

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/viewer/09f6818d8e064537973102d6289e2aca/Cloud/en-US/935325fb130d41449362181fb6020dd0.html

https://help.sap.com/saphelp_uiaddon10/helpdata/en/a1/18094264684230bb6510045b5b5b7c/frameset.htm

Si este tema os ha interesado, suscribiros al blog Suscribete!

Deja una respuesta

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.