5 Formas de lujo con JavaFX CSS

Este tutorial es acerca de hacer su aplicación JavaFX es atractivo añadiendo una hoja de estilo en cascada (CSS). Presenta un diseño, crea un archivo .css, y aplicar los nuevos estilos.

En este tutorial, que se llevará a un formulario de acceso que utiliza estilos por defecto para las etiquetas, botones y color de fondo, y, con algunas modificaciones de estilo CSS simples, lo convierten en una aplicación estilizada, como se muestra en la Figura 5-1.

Figura 5-1 formulario de acceso con y sin CSS

Figure 5-1 Login Form With and Without CSS

Description of "Figure 5-1 Login Form With and Without CSS"

La herramienta utilizada en este Getting Started tutorial es NetBeans IDE. Antes de empezar, asegúrese de que la versión de NetBeans IDE que está utilizando soportes JavaFX 8. Ver la página Certified System Configuraciones de la página de Java SE Descargas para más detalles.

Crear el proyecto

Si has seguido la Guía de introducción desde el principio, entonces usted ya ha creado el proyecto requiere ingresar para este tutorial. Si no es así, descargue el proyecto Ingresar haciendo clic derecho en

Login.zip y guardarlo en su sistema de archivos. Extraiga los archivos del archivo zip, y luego abrir el proyecto en NetBeans IDE.

Crear el archivo CSS

Su primera tarea es crear un nuevo archivo CSS y guardarlo en el mismo directorio que la clase principal de la aplicación. Después de eso, usted debe hacer la aplicación JavaFX consciente de la hoja de estilos en cascada que acaba de agregar.

En la ventana Proyectos NetBeans IDE, expanda el nodo Login proyecto y luego el nodo directorio de paquetes fuente.

Haga clic en la carpeta de inicio de sesión en el directorio de paquetes fuente y elija Nuevo y, a continuación Otro.

En el cuadro de diálogo Nuevo archivo, seleccione Otro, entonces Cascading Style Sheet, y haga clic en Siguiente.

Introduzca Entrar para el campo de texto Nombre de archivo y garantizar el valor del campo de texto Carpeta es src \ login.

Haga clic en Finalizar.

En el archivo Login.java, inicializar la variable de hojas de estilo de la clase de escena para que apunte a la hoja de estilos en cascada mediante la inclusión de la línea de código que se muestra en negrita de abajo para que aparezca como se muestra en el ejemplo 5-1.

Ejemplo 5-1 inicializar la variable de hojas de estilo

Example 5-1 Initialize the stylesheets Variable

Scene scene = new Scene(grid, 300, 275);

primaryStage.setScene(scene);

scene.getStylesheets().add

(Login.class.getResource("Login.css").toExternalForm());

primaryStage.show();

This code looks for the style sheet in the src\login directory in the NetBeans project.

Añadir una imagen de fondo

Una imagen de fondo ayuda a que su forma más atractiva. Para este tutorial, se agrega un fondo gris con una textura similar al lino.

En primer lugar, descargar la imagen de fondo, haga clic en la imagen background.jpg y guardarlo en la carpeta src \ login en el proyecto Login NetBeans.

Ahora, agregue el código de la propiedad background-imagen en el archivo CSS. Recuerde que la ruta es relativa a la hoja de estilos. Así, en el código en el ejemplo 5-2, la imagen background.jpg está en el mismo directorio que el archivo Login.css.

Ejemplo 5-2 Imagen de fondo

Example 5-2 Background Image

.root {

-fx-background-image: url("background.jpg");

}

La imagen de fondo se aplica al estilo .root, lo que significa que se aplica al nodo raíz de la instancia de escena. La definición de estilo consiste en el nombre de la propiedad (Imagen de fondo -fx) y el valor de la propiedad (url ("background.jpg")).

La Figura 5-2 muestra el formulario de inicio de sesión con el nuevo fondo gris.

Antecedentes Figura 5-2 Gris Lino

Figure 5-2 Gray Linen Background

Description of "Figure 5-2 Gray Linen Background"

El estilo de las etiquetas

Los siguientes controles para mejorar son las etiquetas. Que va a utilizar la clase de estilo .label,

que significa que los estilos afectarán a todas las etiquetas en el formulario. El código es en el

Ejemplo 5-3.

Tamaño Ejemplo 5-3 Font, Llenar, Peso y Efecto en las etiquetasExample 5-3 Font Size, Fill,

Weight, and Effect on Labels

.label {

-fx-font-size: 12px;

-fx-font-weight: bold;

-fx-text-fill: #333333;

-fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );

}

En Este EJEMPLO SE Aumenta El tamaño de la fuente y el peso y se ANADE Una sombra de gris de la ONU de color (# 333333). El Propósito de la sombra es Anadir contraste Entre el texto de gris de color oscuro y el fondo gris claro. View the section Sobre los Efectos en la Guía de Referencia CSS JavaFX párrafo Obtener Detalles Sobre los Parámetros de la propiedad de sombra.

Las Etiquetas de Nombre de usuario y Contraseña Mejoradas se muestran en la Figura 5-3.

Figura 5-3 Bigger, Etiquetas Más Audaces con Sombra

Figure 5-3 Bigger, Bolder Labels with Drop Shadow

Description of "Figure 5-3 Bigger, Bolder Labels with Drop Shadow"

Estilo de texto

Ahora, crear algunos efectos especiales en los dos objetos de texto en la forma: scenetitle, que incluye el texto de bienvenida, y actiontarget, que es el texto que se devuelve cuando el usuario pulsa el botón Registrarse. Puede aplicar diferentes estilos a texto objetos usados en tan diversas maneras.

En el archivo Login.java, quite las siguientes líneas de código que definen los estilos en línea establecidos actualmente para los objetos de texto:

scenetitle.setFont(Font.font(”Tahoma”, FontWeight.NORMAL, 20));

actiontarget.setFill(Color.FIREBRICK);

Al cambiar a CSS sobre los estilos en línea, a separar el diseño del contenido. Este enfoque hace que sea más fácil para un diseñador que tiene control sobre el estilo sin tener que modificar el contenido.

Crear un ID para cada nodo de texto mediante el método SETID () de la clase Node: Agregue las siguientes líneas en negrita para que aparezcan como se muestra en el ejemplo 5-4.

Ejemplo 5-4 Crear ID de nodos de texto

Example 5-4 Create ID for Text Nodes

...

Text scenetitle = new Text("Welcome");

scenetitle.setId("welcome-text");

...

...

grid.add(actiontarget, 1, 6);

actiontarget.setId("actiontarget");

..

En el archivo Login.css, definir las propiedades de estilo para el texto de bienvenida y los ID actiontarget. Para el nombre del estilo, utilice el ID precedido por un signo de número (#), como se muestra en el ejemplo 5-5.

Efecto de texto Ejemplo 5-5

1. Example 5-5 Text Effect

2. #welcome-text {

3. -fx-font-size: 32px;

4. -fx-font-family: "Arial Black";

5. -fx-fill: #818181;

6. -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 ,

2 );

7. }

8. #actiontarget {

9. -fx-fill: FIREBRICK;

10. -fx-font-weight: bold;

11. -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );

12. }

El tamaño del texto de bienvenida se aumenta a 32 puntos y la fuente se cambia a Arial Negro. El color de relleno texto se establece en un color gris oscuro (# 818181) y un efecto sombra interior se aplica, creando un efecto de relieve. Puede aplicar una sombra interior a cualquier color, cambiando el color de relleno de texto a ser una versión más oscura del fondo. Vea la sección sobre los efectos en la Guía de referencia CSS JavaFX para obtener más información sobre los parámetros de propiedad sombra interior.

La definición de estilo para actiontarget es similar a lo que has visto antes.

Figura 5-4 muestra los cambios de fuente y efectos de sombra en los dos objetos de texto.

Figura 5-4 Texto Efectos de sombra

Figure 5-4 Text with Shadow Effects

Description of "Figure 5-4 Text with Shadow Effects"

El estilo del botón

El siguiente paso es darle estilo al botón, por lo que es cambiar el estilo cuando el usuario pasa el ratón sobre él. Este cambio dará a los usuarios una indicación de que el botón es interactivo, una práctica de diseño estándar.

En primer lugar, crear el estilo para el estado inicial del botón añadiendo el código en el Ejemplo 5-6. Este código utiliza el selector de clase de estilo .button, de tal manera que si se agrega un botón al formulario en una fecha posterior, el nuevo botón también utilizar este estilo.

Sombra Ejemplo 5-6 para Button

Example 5-6 Drop Shadow for Button

.button {

-fx-text-fill: white;

-fx-font-family: "Arial Narrow";

-fx-font-weight: bold;

-fx-background-color: linear-gradient(#61a2b1, #2A5058);

-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 ,

1 );

}

Ahora, crear un aspecto ligeramente diferente para cuando el usuario pasa el ratón sobre el botón. Esto se hace con la pseudo-clase vuelo estacionario. Un pseudo-clase incluye el selector para la clase y el nombre para el estado separados por dos puntos (:), como se muestra en el ejemplo 5-7.

Botón Ejemplo 5-7 Hover Estilo

Example 5-7 Button Hover Style

.button:hover {

-fx-background-color: linear-gradient(#2A5058, #61a2b1);

}

Figura 5-5 muestra los estados inicial y se ciernen del botón con su nuevo fondo azul-gris y blanco negrita.

Figura 5-5 Botón Unidos iniciales y Hover

Figure 5-5 Initial and Hover Button States

Description of "Figure 5-5 Initial and Hover Button States"

Figura 5-6 muestra la aplicación final.

Figura 5-6 final estilizada Aplicación

Figure 5-6 Final Stylized Application

Description of "Figure 5-6 Final Stylized Application"

Where to Go from Here

Here are some things for you to try next:

See what you can create using CSS. Some documents that can help you are Skinning JavaFX

Applications with CSS, Styling Charts with CSS, and theJavaFX CSS Reference Guide. The Skinning

with CSS and the CSS Analyzer section of the JavaFX Scene Builder User Guide also provides

information on how you can use the JavaFX Scene Builder tool to skin your JavaFX FXML layout.

See Styling FX Buttons with CSS for examples of how to create common button styles using CSS.