Reglas y propiedades para crear hojas de estilo en cascada CSS en JavaFX

     

Las reglas para una definición de estilo CSS en JavaFX.

Las reglas para una definición de estilo css en JavaFX asignan valores a las propiedades asociadas con la clase. Los nombres de propiedades de reglas corresponden a los nombres de las propiedades de una clase. La convención para nombres de propiedades con varias palabras es separar las palabras con un guion (-). Los nombres de propiedad para estilos en hojas de estilo JavaFX están precedidos por -fx-.

Los nombres de propiedad y los valores están separados por dos puntos (:). Las reglas terminan con un punto y coma (;).

Ejemplos de reglas:

-fx-background-color: #333300;
-fx-text-fill: white;
-fx-alignment: CENTER;

La clase de estilo .root se aplica al nodo raíz de la instancia de Scene. Como todos los nodos en el scene graph son descendientes del nodo raíz, los estilos en la clase de estilo raíz pueden aplicarse a cualquier nodo.

La clase de estilo .root incluye propiedades que pueden usar otros estilos para proporcionar consistencia en una UI (Interfaz de usuario). Por ejemplo, la propiedad -fx-focused-base se define en el estilo .root. Esta propiedad es utilizada por estilos para otros controles de IU como el color para el control cuando este tiene el foco. La siguiente definición muestra cómo se usa esta propiedad en el estilo de la clase CheckBox:

.check-box:focused{
       -fx-color: -fx-focused-base;
}

Cambiando el aspecto de su Interfaz de Usuario con CSS y JavaFX

Puede cambiar rápidamente el aspecto de su UI simplemente personalizando la clase de estilo .root. Ambas hojas de estilo de muestra establecen el tamaño de fuente y la familia, el color base del cual se derivan otros colores y el color de fondo de la escena. El ejemplo abajo muestra el estilo .root aplicado desde la hoja de estilo controlStyle2.css.

.root{
    -fx-font-size: 16pt;
    -fx-font-family: “Courier New”;
    -fx-base: rgb(132, 145, 47);
    -fx-background: rgb(225, 228, 203);
}

Con este simple estilo, puede crea el aspecto básico de un control. Esto es posible porque los controles de IU incorporados usan las propiedades establecidas para que el nodo raíz obtenga sus propios colores y fuentes.

Puede personalizar aún más su interfaz de usuario definiendo estilos para los diferentes controles que está utilizando. Puede sobrescribir las definiciones en la hoja de estilos predeterminada o crear nuevas clases o estilos de ID. También puede definir el estilo para un nodo dentro de su código.

Aprende como usar hojas de estilo en cascada en JavaFX lee el siguiente articulo.

 



 

Deja un comentario