sábado, 7 de junio de 2014

Skin Selectors 10g

Resumen: En este artículo se va a introducir a los distintos tipos de selectores que ofrece ADF. En este primer artículo lo veremos desde la óptica de 10g, y en el siguiente artículo desde 11g (Skins Selectors 11g).
El cambio no es sustancial, pero si quiero reseñar la evolución del ADF, y las herramientas con las que se cuenta. También para indicar las referencias que se puede encontrar en Internet para estas dos versiones.

Los selectores ( selectors
) nos permite modificar un aspecto de un componente o conjunto de componentes.
Comparten en parte la sintaxis de CSS, aunque con pequeñas diferencias, especialmente en los selectores a nivel de componente, pseudoclases y pseudoelementos.

En algunos textos, los selectores se dividen en tres bloques:

- Selectores globales ( global selectors)
Estos selectores nos permiten modificar propiedades de estilo para múltiples componentes.
No de un conjunto específico de componentes, sino de todos los componentes que compartan cierta característica en común.
Por lo tanto, hay que tener cuidado con este tipo de selectores porque podemos cambiar propiedades que no deseamos.

- Selectores de botones ( button selectors)
Se usan para dar estilo a todos los botones de la aplicación.

- Selectores a nivel de componentes ( component-level selectors o simplemente, component selectors)
Modifican componentes o partes de los componentes.
Un tipo de selector que aparece dentro de este grupo son los dedicados a los iconos, que permiten cambiar imágenes o iconos que se utilizan en el componente.


Dentro de cada sección nos podemos encontrar a su vez, tres tipos de selectores
:
- Selectores estandar ( standard selectors). Representan directamente un elemento.
Ejemplo:
af|body representa al elemento af:body.
Nota: no ponemos af:body en el skin, sino que ponemos la sintaxis af|body.

- Selectores con pseudoelementos ( selectors width pseudo elements). Se suelen utilizar para un aspecto específico o un área de un componente.
Ejemplos de pseudoelementos:
af|column::cell-text
En este ejemplo estamos queriendo modificar el aspecto del texto que se encuentra contenido en la celda de un elemento af|column (columna).

- Selectores que usan el alias de pseudo clases.
Se utilizan para asignar estilos a más de un componente o a más de una porción de un componente.
Ejemplo: .AFMenuBarItem:alias puede definir propiedades que luego serán compartidas por:
- af:menuBar
- af|menuBar::enabled
- af|menuBar::selected
- etc

Tal como se puede ver en esta última clasificación, parece referirse más a la forma en que está escrita que a una clasificación en sí.
De hecho, es bastante fácil terminar asociando los selectores estándar o con pseudo elementos con los selectores a nivel de componentes, y los que usan alias de pseudoclases con selectores globales.
Lo dicho, es muy fácil realizar esta asociación.

Dependiendo del ámbito al que queramos llegar utilizaremos una forma u otra. Si queremos cambiar sólo un componente, utilizaremos una notación, y si queremos modificar varios o una faceta de todos los componentes, utilizaremos otra.


Referencia con todos los selectores, aliases, pseudoelementos, etc....
Oracle ADF Faces - Selectors for Skinning ADF Faces subsections
http://docs.oracle.com/cd/E12483_01/webcenter.1013/b31074/jpsdg_skins.htm



Fuente para el artículo

No hay comentarios:

Publicar un comentario