Personalizar Aspecto con estilos y skins

Para cambiar el aspecto a una aplicación ADF, se dispone de lo que se llama skins.
Estos skins proveen de aspecto para todos los componentes de la aplicación, por lo que dado la gran cantidad de componentes, no vamos a ir definiendo el aspecto de cada uno de ellos, sino que se parte de un skin, y luego personalizaremos ciertos componentes o elementos de pantalla.

Para esta personalización utilizaremos dos elementos:
- CSS  (CSS3), dependiendo de la versión de ADF en la que nos encontremos. Que nos permitirá dar formato a elementos de la página, tal como lo haríamos en una página "normal".
Es decir, tendríamos un clase en nuestra hoja CSS, y esta clase se colocaria en el atributo "styleClass".
No es la propia de un skin o propia de ADF, pero se puede seguir utilizando.

- Selectors o selectores (skin style selectors).
El enforque de estos selectores, a diferencia del anterior, está orientado al componente. No a un componente concreto, sino a todos los componentes y a aspectos específicos del componente.
En el manual de Oracle podemos leer lo siguiente:

- Global selectors

Global selectors determine the style properties for multiple ADF Faces components. If the global selector name ends in the :alias pseudo-class, then the selector is most likely included in other component-specific selectors and will affect the skin for more than one component. For example, most, if not all, components use the .AFDefaultFontFamily:alias definition to specify the font family. If your skin overrides this selector with a different font family, that change will affect all the components that have included it in their selector definition. Example 20-1 shows the global selector for the default font family for ADF Faces components in an application.

Example 20-1 Global Selector for Default Font Family

.AFDefaultFontFamily:alias {
       font-family: Tahoma, Verdana, Helvetica, sans-serif;
}

- Component selectors

Component-specific selectors are selectors that can apply a skin to a particular ADF Faces component. Example 20-2 shows the selector set to red as the background color for the content area of the af:inputText component.

Example 20-2 af:inputText Component Selector

af|inputText::content {
         background-color: red;
}

Como podemos observar en este artículo. Podemos cambiar el aspecto no sólo lo que nos permite el CSS que ya conocemos, sino también botones que pudiera tener un componente, o filas si están seleccionadas o no.
Más adelante crearemos ejemplos para entender todo esto, y sobre todo la gran potencialidad que tiene esta faceta para personalizar nuestras aplicaciones.

Referencia Customizing the Appearance Using Styles and Skins. 

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