Crear y Registar un skin en 11g

Resumen: En este artículo se va a ver cómo crear un skin en ADF 11g, y cómo registrar el skin en la aplicación para su uso.
Existe unos artículos relacionados con la misma temática y orientados a ADF 10g,
- Crear un skin en 10g
- Registrar un skin en 10g

La forma de crear un skin, es similar (en teoría) a la que hay en 10g, aunque con diferentes matices.
Para empezar existe tanto el concepto de crear un skin, como de registrar el skin.
Crear un skin, es crear el fichero que va a contener el skin.
Registrar un skin, es indicar a la aplicación que dicho skin está disponible para su uso.
Ojo! Registrar no significa usar, sino disponible para ser utilizado. La utilización es otro paso distinto.

Para empezar a crear un skin, vamos al Application Navigator y en Web Content, con el botón derecho, menú contextual seleccionamos "New".

web Content

Se abrirá la galería, para mostrarnos el componente que queremos crear.

Dentro de Web Tier / JSF/Facelets seleccionamos ADF Skin.

Nota: En ADF 10g, no existía este elemento, sino que se creaba un fichero css.

En este ejemplo, el nombre que se puso al skin fue el de skinEjemplo.
Como vemos, al cambiar el nombre, también se cambia en el campo skinId.
También indica que este skin extiende o va a modificar aspectos de uno ya existente (fusionFX-simple-v2.1.desktop).

Nota: si quieres saber lo que significa cada cosa con más profunidad lo puedes hacer en la página de referencia.
Creating a Skin file
http://docs.oracle.com/cd/E16162_01/user.1112/e17456/adfsg_project.htm#CBBFBCIC

También observamos en qué lugar de la estructura de nuestro proyecto se va a colocar el fichero.

Si observamos la estructura resultante, se han quedado marcados como "modificados" (aparecen en cursiva), dos ficheros: trinidad-config.xml y trinidad-skins.xml

Observemos estos dos ficheros a ver qué es lo que ha ocurrido.
Veamos en primer lugar trinidad-skins.xml

vista trinidad-skins.xml

Podemos ver que se ha incluido el skin que acabamos de crear. Indicando donde se encuentra, que nombre tiene, de qué skin se extiende. Esto significa que el nuevo skin ha sido registrado.

Veamos ahora trinidad-config.xml

trinidad-config.xml

Aquí vemos el skin que se está utilizando.
Es en este fichero, donde indicaremos qué skin utilizar en el caso de que tengamos alguno de creación propia, o estemos utilizando alguno de los que vienen con el ADF.

También me gustaría que se mirara al nuevo fichero que hemos creado skinEjemplo.css, y observemos qué nos ofrece.

Este editor, difiere en mucho a los que hemos visto hasta ahora. En el panel de la izquierda tenemos los posibles selectores globales, estilos (css) y selectores de componentes, para que podamos ir añadiendo nuestros cambios de una forma visual.
Ya veremos más adelante cómo ir añadiendo selectores.

También podemos observar su interior (source).

estructura skin creada

Como podemos observar, sólo se refiere a los espacios de nombres que se van a utilizar.

Como último detalle, haremos una prueba similar a la que se hizo en el artículo en 10g.
Con el skin ya creado, vamos a añadirle una propiedad para que veamos que lo que hagamos en este fichero, afecta a nuestra aplicación.
Si no afecta, es posible que nos estemos equivocando en algo (al escribir, en el skin equivocado, etc).
Para ello, vamos a poner el fondo de la página de color verde, y utilizaremos las hojas de estilo para ello.

Si ejecutamos la aplicación nos daremos cuenta de una cosa: No Pasa Nada.
Qué raro, funcionaba esto en 10g, y ahora en 11g, cómo es que esto no es posible?.

La respuesta es que no siempre vamos a poder trabajar directamente con un elemento HTML a través de CSS. Sino que al estar utilizando un skin, éste ya tiene unas propiedades asignadas a ese elemento HTML, por lo que si lo que queremos es realizar un cambio, lo deberemos hacer utilizando los selectores disponibles en el skin.

cambio de fondo a traves de selector af|document

En este caso se usó el selector af|document, para referirnos al componente document.
Ya se verá esto en mayor detalle más adelante.

El resultado de esta modificación sería el siguiente, que es muy similar al que habíamos obtenido en 10g.

vista resultado cambio skin

Referencia para el artículo
Creating a Skin file
http://docs.oracle.com/cd/E16162_01/user.1112/e17456/adfsg_project.htm#CBBFBCIC

Si te ha gustado este artículo, puedes seguir el blog por Blogger o Twitter @ADFSalvaje