blog

Últimamente ha habido varios posts en los foros de Oracle acerca de cómo modificar los estilos de varios componentes de ADF (post 1, post 2). En ambos posts tenían la necesidad de modificar los estilos de uno de los botones del af:query. Como podéis ver en este post de Ashish es posible modificar mediante skinning la apariencia de todos los botones, pero por ejemplo utilizando solo estos selectores  no es posible modificar únicamente la apariencia del botón de guardar.

En css3 existen unos selectores que nos permiten modificar la apariencia de los componentes, por ejemplo:

• Elementos que el atributo especificado contiene el valor: [atributo*=valor]
• Elementos que el atributo especificado empieza por el valor: [atributo^=valor]
• Elementos que el atributo especificado termina por el valor: [atributo$=valor]

Todo esto lo podemos aplicar a los selectores de skinning para modificar elementos que normalmente no nos es posible modificar.

Supongamos que tenemos este query panel.

Para poder averiguar el atributo que tenemos que usar para poder modificar el elemento, hay que inspeccionar el código fuente generado con las herramientas que nos ofrece el navegador que usamos normalmente.

En este caso podemos observar que el botón de buscar se genera como un div con el id qryId1:_search. Este id es generado con el id del af:query mas el identificador de la acción del botón.

Una vez que ya sabemos el atributo a utilizar, usaremos uno de los selectores que hemos visto anteriormente.

Utilizaremos el selector “termina en” ya que podremos diferenciar el botón fácilmente con el valor “_search”.

Si volvemos a ejecutar la aplicación podremos ver que sólo hemos cambiado el estilo del botón ‘Buscar’.