Estillos CSS en JavaFX

Posted by in Componentes JavaFX, Java, JavaFx

En algunas ocasiones se necesita personalizar el aspecto de un elemento concreto como puede ser el tamaño del texto, el tipo de letra, color, etc… En estos casos es tan simple como configurar la propiedad correspondiente en dicho elemento, bien via xml o mediante código. Sin embargo cuando se quiere que varios elementos tengan el mismo estilo esto se hace más tedioso ya que se debe repetir muchas veces la misma configuración. Por ello JavaFX incluye el soporte de hojas de estilo CSS donde se puede configurar una clase, pseudo-clase o elemento particular y aplicarlo de forma genérica o individual. Para conocer cuales son todos los elementos que se pueden utilizar y sus nombres se puede ver el siguiente enlace

Definir hoja de estilos

Dentro de las hojas de estilos encontraremos tres elementos: clases, identificadores y pseudo-clases. Las clases se reconocen con un .nombre-de-clase y afectan a todos los elementos de esa misma clase.

Clases

En java fx las clases coinciden con los nombres de los elementos, y en el caso de tener dos palabras se separarán por un guión medio. Así, si se quiere que todos los elementos de tupo button tengan el mismo aspecto se define su clase con las propiedades determinadas. Lo mismo pasaría con el resto de elementos

Existe una clase especial que recibe el nombre de root, la cual afecta a toda la escena completa. Una vez se han definido las clases se definirán las propiedades que se quieren configurar para cada una de los elementos. Hay que tener en cuenta que todas las propiedades empiezan con -fx seguido del nombre de la propiedad

De esta forma toda escena tendrá las propiedades que marca la clase .root, los botones tendrán las propiedades de la clase .button y las etiquetas tendrán las propiedades de la clase .label. en este último elemento se puede ver como la propiedad -fx-font-size queda sobrescrita de la otorgada por la clase .root

Pseudo-clases

Son elementos muy parecidos a las clases, con la diferencia que indican el comportamiento gráfico de los elementos en un momento concreto. Inicialmente existen las siguientes pseudo clases: disabled, focused, hover, pressed, show-mnemonic que definen los estados de deshabitado, con el foco seleccionado, seleccionado, presionado y mostrando la abreviatura respectivamente. Para poder indicar el comportamiento que tendrá una pseudo clase de un elemento concreto tan solo es necesario incluir :estado a la clase concreta

De esta forma cuando el botón sea presionado el texto tendrá un color de blanco y el fondo del botón pasará a ser gris

Elementos

En el caso de querer definir el comportamiento gráfico de un elemento concreto sin que le afecte el de su clase correspondiente se aplica un elemento. Para ello tan solo hay que crear un nuevo bloque con #nombrebloque en el archivo CSS y setear el id al elemento del nombre crea (no confundir con el fx-id). Para poder setear el id se puede realizar por código o bien mediante el archivo xml

De esta forma el elemento cuyo id sea subtitulo tendrá esa apariencia, sobre escribiendo las definidas en su clase correspondiente

Para poder asignar una hoja de estilos a una escena se ejecutan los métodos getSytlesheets().add() o se mediante SceneBuilder.