Como usar hojas de estilos en cascada CSS con aplicaciones JavaFX

     

Este artículo describe cómo usar hojas de estilos en cascada, CSS, con aplicaciones JavaFX. CSS nos permite crear una apariencia personalizada para nuestras aplicaciones.

Las hojas de estilo contienen definiciones de estilo que controlan el aspecto de los elementos de la interfaz de usuario. Usar CSS en aplicaciones JavaFX es similar al uso de CSS en HTML.


El CSS de JavaFX se basa en la especificación W3C CSS versión 2.1 (disponible en http://www.w3.org/TR/CSS21/) con algunas adiciones del trabajo actual sobre la versión 3 de la especificación y algunas extensiones que admiten características específicas de JavaFX.

Hoja de estilo CSS predeterminada

La hoja de estilo predeterminada para las aplicaciones JavaFX es caspian.css, que se encuentra en el archivo JavaFX runtime JAR, jfxrt.jar. Esta hoja de estilos define los estilos para el nodo raíz y los controles de la interfaz de usuario. Para ver este archivo, vaya al directorio \jre\lib en el mismo directorio en el que está instalado Java Development Kit (JDK). Use el siguiente comando para extraer la hoja de estilos del archivo JAR:

 jar xf jfxrt.jar com/sun/javafx/scene/control/skin/caspian/caspian.css

Creando hojas de estilo CSS

Puede crear una o más hojas de estilos propias para sobrescribir los estilos existente en la hoja de estilo predeterminada y para agregar sus propios estilos. Normalmente, las hojas de estilo que usted crea tienen una extensión .css y están ubicadas en el mismo directorio que la clase principal para su aplicación JavaFX.

Las hojas de estilo se aplican a los objetos Scene como se muestra en el ejemplo a continuación, donde la ruta es la estructura de directorio que refleja la ubicación de su hoja de estilos, y la hoja de estilos es el nombre de su hoja de estilos.

Ejemplo de como agregar una hoja de estilo.

Scene scene = new Scene(new Group(), 300, 250);    
scene.getStylesheets().add(“ruta/hojadeestilo.css”);

Como definir un estilo CSS

Definir un estilo consiste del nombre del estilo, también llamado selector, y una serie de reglas que establecen las propiedades del estilo. Las reglas para una definición se colocan  entre llaves ({}). Por ejemplo veamos la siguiente definición de un  estilo llamado .botón-personalizado.

Definiendo un estilo de ejemplo llamado .botón-personalizado.

.buttón-personalizado {
-fx-font: 18px “Verdana”;
-fx-padding: 10;
-fx-background-color: #FF0000;
}

Los selectores de estilo css

Se pueden definir varios tipos de estilos. Cada tipo de estilo tiene su propia convención para selectores. Las clases de estilo corresponden a los nombres de clase. Por convención, los nombres de las clases de estilo que constan de más de una palabra usan un guion (-) entre las palabras. Los selectores de clase de estilo están precedidos por un punto (.).

Ejemplos de selectores de clase:

.button
.check-box
.scroll-bar

También puede definir estilos que están asociados con un nodo a través del ID del nodo. El ID se establece utilizando el método setId() del nodo. El nombre del estilo es el ID precedido por un símbolo hash (#).Por ejemplo, un nodo con el ID mi-botón en nombre quedaría del estilo quedaría así: #mi-botón.

Ejemplos de selectores de estilo con ID:

#mi-botón
#shaded-hbox

Los selectores compuestos también son posibles. Algunas clases incluyen elementos que pueden tener su propia definición de estilo, que se denominan clases descendientes. Por ejemplo, muchos controles de UI tienen una clase descendiente para la etiqueta. Estas definiciones se identifican por el selector para la clase y el selector para la clase descendiente separada por un espacio.

Ejemplos de selectores para clases descendientes:

.check-box.label
.check-box.box
.radio-button.dot

Las pseudo-clases le permiten personalizar los estados de un nodo, como cuando un nodo tiene foco. Estas definiciones están identificadas por el selector de la clase y el nombre del estado separado por dos puntos (:).

Ejemplos de selectores para pseudo-clases:

.radio-button:focused
.radio-button:hover
.scroll-bar:vertical

Para aprender más sobre las hojas de estilo en cascada en javaFX sigue leyendo este articulo.



Deja un comentario