Skins – Utilizando el styleClass con Componentes ADF Faces RC

Días atrás estuve trabajando en un requerimiento de un cliente que estaba buscando la forma de aplicar un styleClass definido en una hoja de estilos CSS, sobre un componente ADF Faces RC directamente -esto, en lugar de aplicar un estilo de manera general para todos los componetes del mismo tipo.

Para poder explicar de mejor forma este requerimiento, voy a mostrarles su implementación. Lo que queremos lograr al final de este articulo es poder renderizar un mismo componente de forma distinta utilizando el styleClass. Para esto voy a utilizar el componente af:menuBar

Note que para este ejemplo estoy utilizando un af:menuBar que contiene 3 af:menuItem (Dashboard, Action Menu, Menu3). El aspecto particular es que dentro de la plantilla de estilos podríamos definir el skin selector para el menuBarItem utilizando la notación:
af|menu::bar-item

La cual se aplicaría para todos los 3 af:menuItems. Entonces si queremos que algunos de los menu items sean amarillos y los otros rojos, debemos definir distintos styleClass para el mismo menuItem de la siguiente forma:

af|menu::bar-item.commonMenuStyle1{
background-color: red;
}

af|menu::bar-item.commonMenuStyle2{
background-color:Yellow;
}

En este caso estamos definiendo 2 styleClass con el color de fondo diferente color. Ahora todo lo que necesitamos hacer es ir a la propiedad styleClass de los menuItems y especificar el nombre de la clase

Bonus: Una de las cosas que encontramos en este requerimiento es que la propiedad de resaltado (hightlight) del af:MenuItem requiere especificar la imagen de fondo en none por lo que el styleClass quedaría así:

af|menu::bar-item:highlighted.commonMenuHighlightStyle{
border: 1px dashed;
background-color: green;
padding: 1px 5px;
background-image:none;
}

Para una mayor información sobre como aplicar skin y los distintos skin selectors pueden consultar en el capitulo 19 de la guía del desarrollador web, así como también pueden tomar como referencia la guia de skining en línea que tenemos aquí