Scribd
Cargar
1K vistas10 páginas

5 Formas de Lujo Con JavaFX CSS

Este documento presenta 5 formas de darle estilo a una aplicación JavaFX utilizando hojas de estilo en cascada (CSS). Se describe cómo aplicar un fondo gris, mejorar el estilo de las etiquetas, texto y botones mediante CSS para darle un aspecto más atractivo a un formulario de inicio de sesión. Se incluyen capturas de pantalla que muestran los cambios en el diseño antes y después de aplicar los estilos CSS.

Cargado por

migue6482
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
1K vistas10 páginas

5 Formas de Lujo Con JavaFX CSS

Este documento presenta 5 formas de darle estilo a una aplicación JavaFX utilizando hojas de estilo en cascada (CSS). Se describe cómo aplicar un fondo gris, mejorar el estilo de las etiquetas, texto y botones mediante CSS para darle un aspecto más atractivo a un formulario de inicio de sesión. Se incluyen capturas de pantalla que muestran los cambios en el diseño antes y después de aplicar los estilos CSS.

Cargado por

migue6482
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 10

5 Formas de lujo con JavaFX CSS

Este tutorial es acerca de hacer su aplicacin JavaFX es atractivo aadiendo una


hoja de estilo en cascada (CSS). Presenta un diseo, 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 aplicacin 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, asegrese de que la versin de NetBeans IDE que est utilizando soportes
JavaFX 8. Ver la pgina Certified System Configuraciones de la pgina de Java SE
Descargas para ms detalles.

Crear el proyecto

Si has seguido la Gua de introduccin 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 aplicacin. Despus de eso, usted debe hacer la
aplicacin 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 sesin en el directorio de paquetes fuente y elija


Nuevo y, a continuacin Otro.

En el cuadro de dilogo 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 inclusin de la
lnea de cdigo 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.

Aadir una imagen de fondo

Una imagen de fondo ayuda a que su forma ms 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 cdigo de la propiedad background-imagen en el archivo CSS.


Recuerde que la ruta es relativa a la hoja de estilos. As, en el cdigo 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
raz de la instancia de escena. La definicin 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 sesin 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 afectarn a todas las etiquetas en el formulario. El cdigo es en el
Ejemplo 5-3.
Tamao 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 tamao de la fuente y el peso y se ANADE Una


sombra de gris de la ONU de color (# 333333). El Propsito 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 Gua de Referencia CSS JavaFX prrafo Obtener
Detalles Sobre los Parmetros de la propiedad de sombra.

Las Etiquetas de Nombre de usuario y Contrasea Mejoradas se muestran en la


Figura 5-3.

Figura 5-3 Bigger, Etiquetas Ms 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 botn Registrarse. Puede aplicar diferentes
estilos a texto objetos usados en tan diversas maneras.

En el archivo Login.java, quite las siguientes lneas de cdigo que definen los estilos
en lnea 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 lnea, a separar el diseo del contenido. Este
enfoque hace que sea ms fcil para un diseador que tiene control sobre el estilo
sin tener que modificar el contenido.

Crear un ID para cada nodo de texto mediante el mtodo SETID () de la clase Node:
Agregue las siguientes lneas 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 nmero (#), 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 tamao 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 versin ms oscura del fondo. Vea la seccin sobre los efectos en la Gua de
referencia CSS JavaFX para obtener ms informacin sobre los parmetros de
propiedad sombra interior.

La definicin 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 botn

El siguiente paso es darle estilo al botn, por lo que es cambiar el estilo cuando el
usuario pasa el ratn sobre l. Este cambio dar a los usuarios una indicacin de
que el botn es interactivo, una prctica de diseo estndar.

En primer lugar, crear el estilo para el estado inicial del botn aadiendo el cdigo
en el Ejemplo 5-6. Este cdigo utiliza el selector de clase de estilo .button, de tal
manera que si se agrega un botn al formulario en una fecha posterior, el nuevo
botn tambin 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 ratn
sobre el botn. Esto se hace con la pseudo-clase vuelo estacionario. Un pseudoclase incluye el selector para la clase y el nombre para el estado separados por dos
puntos (:), como se muestra en el ejemplo 5-7.

Botn 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 botn con su nuevo fondo
azul-gris y blanco negrita.

Figura 5-5 Botn 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 aplicacin final.

Figura 5-6 final estilizada Aplicacin


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.

También podría gustarte