ADF tips: Cambiar el estilo de un componente por su id

ADF tips

Si queremos cambiar la apariencia de un componente normalmente utilizamos Skinning y los selectores que nos ofrece. Aunque no es una forma usual de aplicar diferentes estilos a componentes, voy a mostraros cómo aplicarlos utilizando la id del componente.

Si por ejemplo tenemos un botón en una página, y este componente no está rodeado de ningún naming container (como puede ser un PanelCollection o una región), podemos utilizar su id sin hacer ninguna modificación más.

Podéis observar el código de la página, el css y el resultado.

 

1

2

3

 

Si por el contrario el componente está rodeado de un naming container, la id generada en html no será la misma, por ejemplo será ‘pc1:b2’ si lo tenemos dentro de un panelCollection o ‘r1:0:b2’ si el botón está dentro de una región.

Al ejecutar la página podremos inspeccionarla utilizando nuestro navegador preferido.

2-1

4

Si seguimos la primera parte del post e intentamos utilizar en el fichero css la id ‘pc1:b2’ veremos que no ha cambiado la apariencia del botón.

5

En CSS existen caracteres especiales como estos:

$, %, &, !, “, #, ‘, (, ), *, :, ;,<, =, >, +, ,, -, ., /, ?, @, [, , ], ^, `, {, |, }, ~

La forma de arreglarlo es escapar estos caracteres. Para escaparlos necesitamos ver el valor unicode del carácter.

Ver Tabla Unicode

En este ejemplo podemos ver que el valor unicode de ‘:’ es ‘3a’.

Hay que añadir un espacio después del valor en unicode, con lo que nuestra id ‘pc1:b2’ quedaría así: ‘pc13A b2’.

7

Si ejecutamos la aplicación veremos que la apariencia del botón dentro del panelCollection ha cambiado correctamente.6

Evolución, innovación y transformación
37 especializaciones avaladas por Oracle
Oportunidades ilimitadas
El equipo marca la diferencia
Posts 100% Oracle
Sigue nuestro día a día