ADF 12.2.1: Utilizando el Theme Editor
30/11/2015 -
Hace unas semanas Oracle liberó la versión 12.2.1 con muchas nuevas funcionalidades y una de ellas es el Theme Editor. Con esta nueva herramienta podemos cambiar el ‘look and feel’ de nuestra aplicación seleccionando los estilos seleccionados y viendo los cambios automáticamente.
Esta herramienta ayuda a desarrolladores que no son expertos en CSS a construir aplicaciones con una gran apariencia.
Para poder utilizar el Theme Editor tenemos que hacer un par de cosas.
Primero hay que crear una nueva aplicación basada en un fichero EAR existente.
El EAR que vamos a utilizar se encuentra dentro del Middleware Home de la versión 12.2.1, en mi instalación es la siguiente:
Después pulsamos en finalizar para crear la aplicación.
Tan solo nos queda ejecutar la aplicación pulsando botón derecho sobre el fichero index.html.
Una vez que ejecutamos la aplicación veremos esto:
Vamos a crear un nuevo skin así que tenemos que hacer click en el botón ‘Create Theme’. Aparecerá un popup donde tenemos que rellenar el nombre y descripción del tema y el skin que utilizaremos como base. Podemos elegir entre Alta o Skyros.
Finalizamos la creación del tema pulsando en ‘Save and Close’. Para trabajar sobre el tema que hemos creado hay un botón en la parte derecha donde podremos editar, borrar, duplicar o exportar nuestro tema. Volveremos más adelante a exportar el tema pero de momento vamos a proceder a editarlo.
Una vez que pulsamos en ‘Edit’, podremos ver una serie de pestañas en la parte superior donde podremos cambiar los valores de las diferentes propiedades de algunos componentes, y en la parte inferior de la página tenemos una previsualización de nuestro skin.
Un ejemplo rápido de la que podemos hacer es cambiar los estilos de los botones.
Cuando hayamos terminado de definir nuestro nuevo skin tenemos que guardarlo pulsando ‘Save and Close’ en la parte superior derecha de la página.
Ahora si queremos utilizar el skin en nuestra aplicación tenemos que exportarlo, con lo que pulsamos en ‘Export’ para descargarnos el fichero jar que contiene el skin.
Después de exportar el skin tenemos que importarlo en nuestra aplicación.
También tenemos que seleccionar nuestro skin por defecto seleccionándolo en ‘Default Skin Family’ dentro de la opción ‘ADF View’ en las propiedades del proyecto.
Una vez terminados estos dos pasos, si ejecutamos nuestra aplicación podremos ver que el skin que hemos creado se aplica a los componentes.
Si no obtenemos el ‘look and feel’ que deseamos utilizando el Theme Editor podemos extender el skin creado para añadir las reglas CSS que consideremos oportunas para mejorar su apariencia.
Se puede obtener más información sobre el Theme Editor y acerca de usar skins empaquetamos en un ADF Library JAR file en los siguientes links:
