5 Formas de lujo con JavaFX CSSEste 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 usted debe hacer la aplicación JavaFX consciente de la hoja de estilos en cascada que acaba de agregar. seleccione Otro. En el cuadro de diálogo Nuevo archivo. descargue el proyecto Ingresar haciendo clic derecho en Login. En el archivo Login. entonces Cascading Style Sheet. entonces usted ya ha creado el proyecto requiere ingresar para este tutorial. Haga clic en Finalizar. y haga clic en Siguiente. Si no es así. En la ventana Proyectos NetBeans IDE.zip y guardarlo en su sistema de archivos. Después de eso. Introduzca Entrar para el campo de texto Nombre de archivo y garantizar el valor del campo de texto Carpeta es src \ login. 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.java. Ejemplo 5-1 inicializar la variable de hojas de estilo Example 5-1 Initialize the stylesheets Variable .Si has seguido la Guía de introducción desde el principio. 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. 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. a continuación Otro. Extraiga los archivos del archivo zip. y luego abrir el proyecto en NetBeans IDE. primaryStage. haga clic en la imagen background. . agregue el código de la propiedad background-imagen en el archivo CSS.Scene scene = new Scene(grid. en el código en el ejemplo 5-2. la imagen background.add (Login.jpg y guardarlo en la carpeta src \ login en el proyecto Login NetBeans. Para este tutorial.show(). En primer lugar.jpg")). La Figura 5-2 muestra el formulario de inicio de sesión con el nuevo fondo gris. La definición de estilo consiste en el nombre de la propiedad (Imagen de fondo -fx) y el valor de la propiedad (url ("background. Ejemplo 5-2 Imagen de fondo Example 5-2 Background Image .getStylesheets().css"). 275). Añadir una imagen de fondo Una imagen de fondo ayuda a que su forma más atractiva. primaryStage. scene.jpg está en el mismo directorio que el archivo Login. This code looks for the style sheet in the src\login directory in the NetBeans project. se agrega un fondo gris con una textura similar al lino.setScene(scene). } La imagen de fondo se aplica al estilo .root. 300.getResource("Login.jpg"). descargar la imagen de fondo.toExternalForm()).class. Recuerde que la ruta es relativa a la hoja de estilos.root { -fx-background-image: url("background. lo que significa que se aplica al nodo raíz de la instancia de escena. Ahora. Así.css. Peso y Efecto en las etiquetasExample 5-3 Font Size.label.255. -fx-effect: dropshadow( gaussian . -fx-text-fill: #333333. } . que significa que los estilos afectarán a todas las etiquetas en el formulario.0. Fill.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. 0.1 ). El código es en el Ejemplo 5-3. Tamaño Ejemplo 5-3 Font. rgba(255.0. Que va a utilizar la clase de estilo . Weight.5) . -fx-font-weight: bold. and Effect on Labels .label { -fx-font-size: 12px.255.0. Llenar. Figura 5-3 Bigger. que incluye el texto de bienvenida. Las Etiquetas de Nombre de usuario y Contraseña Mejoradas se muestran en la Figura 5-3. En el archivo Login. 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. crear algunos efectos especiales en los dos objetos de texto en la forma: scenetitle. Puede aplicar diferentes estilos a texto objetos usados en tan diversas maneras. Bolder Labels with Drop Shadow Description of "Figure 5-3 Bigger. y actiontarget. que es el texto que se devuelve cuando el usuario pulsa el botón Registrarse. quite las siguientes líneas de código que definen los estilos en línea establecidos actualmente para los objetos de texto: . El Propósito de la sombra es Anadir contraste Entre el texto de gris de color oscuro y el fondo gris claro.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). Bolder Labels with Drop Shadow" Estilo de texto Ahora.java. Etiquetas Más Audaces con Sombra Figure 5-3 Bigger. NORMAL. 20)). 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. En el archivo Login.scenetitle. #welcome-text { .. a separar el diseño del contenido. grid.. Text scenetitle = new Text("Welcome").setId("actiontarget"). FontWeight. scenetitle.FIREBRICK). como se muestra en el ejemplo 5-5. Para el nombre del estilo.font(”Tahoma”. Example 5-5 Text Effect 2.add(actiontarget... 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. 1. . .setId("welcome-text")... actiontarget. utilice el ID precedido por un signo de número (#). .setFont(Font. Al cambiar a CSS sobre los estilos en línea.setFill(Color.css.. 6). Ejemplo 5-4 Crear ID de nodos de texto Example 5-4 Create ID for Text Nodes . Efecto de texto Ejemplo 5-5 1. actiontarget. definir las propiedades de estilo para el texto de bienvenida y los ID actiontarget. 11.0. rgba(0. Puede aplicar una sombra interior a cualquier color. #actiontarget { 9. 6. 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. -fx-font-size: 32px.0. 10.0.0 . La definición de estilo para actiontarget es similar a lo que has visto antes. 4.0.7) .3. -fx-font-weight: bold.255. Figura 5-4 muestra los cambios de fuente y efectos de sombra en los dos objetos de texto. creando un efecto de relieve. -fx-fill: #818181.5) . } 8. cambiando el color de relleno de texto a ser una versión más oscura del fondo.0. 6. 2 ). } El tamaño del texto de bienvenida se aumenta a 32 puntos y la fuente se cambia a Arial Negro. -fx-fill: FIREBRICK. 5.255.1 ). El color de relleno texto se establece en un color gris oscuro (# 818181) y un efecto sombra interior se aplica. rgba(255. -fx-font-family: "Arial Black". 7. 0. Figura 5-4 Texto Efectos de sombra Figure 5-4 Text with Shadow Effects . -fx-effect: innershadow( three-pass-box . 12. 0. 0 . -fx-effect: dropshadow( gaussian .0. -fx-background-color: linear-gradient(#61a2b1. por lo que es cambiar el estilo cuando el usuario pasa el ratón sobre él.button { -fx-text-fill: white. En primer lugar. Este cambio dará a los usuarios una indicación de que el botón es interactivo. . el nuevo botón también utilizar este estilo. -fx-font-family: "Arial Narrow". -fx-font-weight: bold. #2A5058). de tal manera que si se agrega un botón al formulario en una fecha posterior. una práctica de diseño estándar. Sombra Ejemplo 5-6 para Button Example 5-6 Drop Shadow for Button .button. Este código utiliza el selector de clase de estilo . crear el estilo para el estado inicial del botón añadiendo el código en el Ejemplo 5-6.Description of "Figure 5-4 Text with Shadow Effects" El estilo del botón El siguiente paso es darle estilo al botón. #61a2b1). 0 . 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.-fx-effect: dropshadow( three-pass-box .0. como se muestra en el ejemplo 5-7. 1 ).0.0. } Ahora. rgba(0. } Figura 5-5 muestra los estados inicial y se ciernen del botón con su nuevo fondo azul-gris y blanco negrita.6) .button:hover { -fx-background-color: linear-gradient(#2A5058.0 . Figura 5-6 final estilizada Aplicación Figure 5-6 Final Stylized Application . 5. Botón Ejemplo 5-7 Hover Estilo Example 5-7 Button Hover Style . Un pseudoclase incluye el selector para la clase y el nombre para el estado separados por dos puntos (:). 0. 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. and theJavaFX CSS Reference Guide.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. 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.