Inicio > ADF / Java > ADF tips: Cambiar el estilo de un componente por su id

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 como 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í: ‘pc1\3A b2’.

7

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

Categorías:ADF / Java Etiquetas: , , , ,
  1. Aún no hay comentarios.
  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: