En este tutorial veremos como usar el componente Slider de JavaFX , capturas los cambios que realice el usuario y con estos cambiar el color RGB de un Pane.
Necesitamos
Nivel: Novato
Tiempo: 30 minutos
Paso 1: El Proyecto
Archivo → Proyecto Nuevo → JavaFX (Categorias) → JavaFX FXML Application (Proyectos) → Presionar botón «Siguiente»
A continuación, escribir un nombre al proyecto «JavaFXSlider» y dejar el resto de las opciones por defecto.
Presionar «Terminar» para crear el proyecto.
Paso 2: La Vista
Doble clic sobre FXMLDocument o clic derecho y Open para abrir el archivo con Scene Builder. El IDE crea por defecto una vista con un boton y label, selecciona ambas clic derecho y «delete».
Ahora en la paleta de Container busca el objeto «Pane» y arrastra a la interfaz, en «Controls» busca Slider y arrastra a la vista, repite esto 3 veces. Luego con la ayuda del mouse redimensiona los componentes y dale la siguiente forma:
Con un clic selecciona el objeto Pane, y en el panel de la derecha despliega la opción «Code» busca la propiedad fx:id y escribe «pane«, para terminar presiona ENTER.
Con un clic selecciona el primer slider empezando desde arriba, en el panel de la derecha despliega la opción «Code» busca la propiedad fx:id y escribe «sliderR«, para terminar presiona ENTER. Ahora despliega la opción «Properties» y cambia las siguientes propiedades.
Realiza el paso anterior para los 2 slider restantes, los nombres son «sliderG» y «sliderB«, las propiedades son las mismas. Debes tener algo como esto:
Para terminar ve al menu File → Save y después cierra el Scene Builder.
Paso 3: El Controlador
Abre el archivo «FXMLDocumentController«, podrás observar algo como esto:
1 import java.net.URL; 2 import java.util.ResourceBundle; 3 import javafx.event.ActionEvent; 4 import javafx.fxml.FXML; 5 import javafx.fxml.Initializable; 6 import javafx.scene.control.Label; 7 8 public class FXMLDocumentController implements Initializable { 9 10 @FXML 11 private Label label; 12 13 @FXML 14 private void handleButtonAction(ActionEvent event) { 15 System.out.println("You clicked me!"); 16 label.setText("Hello World!"); 17 } 18 19 @Override 20 public void initialize(URL url, ResourceBundle rb) { 21 // TODO 22 } 23 24 }
Elimina las lineas de código de la 10 a la 17
Reemplaza los imports por estos otros:
1 import java.net.URL; 2 import java.util.ResourceBundle; 3 import javafx.beans.value.ChangeListener; 4 import javafx.beans.value.ObservableValue; 5 import javafx.fxml.FXML; 6 import javafx.fxml.Initializable; 7 import javafx.geometry.Insets; 8 import javafx.scene.control.Slider; 9 import javafx.scene.layout.Background; 10 import javafx.scene.layout.BackgroundFill; 11 import javafx.scene.layout.CornerRadii; 12 import javafx.scene.layout.Pane; 13 import javafx.scene.paint.Color;
declara los objetos que creamos en la vista:
@FXML Pane pane; @FXML Slider sliderR; @FXML Slider sliderG; @FXML Slider sliderB;
Para cambiar el color de fondo del Pane según los valores que vayan tomando los slider, se usara el siguiente codigo
1 //cambia el color de fondo del objeto Pane 2 pane.setBackground( 3 //la clase Background crea un fondo para agregar al Pane 4 new Background( 5 //la clase BackgroundFill permiete crear un relleno 6 new BackgroundFill( 7 Color.rgb(//Color RGB con los valores iniciales de los slider 8 (int)sliderR.getValue(), 9 (int)sliderG.getValue(), 10 (int)sliderB.getValue() 11 ), CornerRadii.EMPTY, Insets.EMPTY)));
y para capturar los eventos de usuario con el mouse sobre los sliders, añadimos a cada uno de ellos un listener.
Por tanto nuestro método initialize queda de la siguiente forma:
public void initialize(URL url, ResourceBundle rb) { //cambia el color de fondo del objeto Pane pane.setBackground( //la clase Background crea un fondo para agregar al Pane new Background( //la clase BackgroundFill permiete crear un relleno new BackgroundFill( Color.rgb(//Color RGB con los valores iniciales de los slider (int)sliderR.getValue(), (int)sliderG.getValue(), (int)sliderB.getValue() ), CornerRadii.EMPTY, Insets.EMPTY))); sliderR.valueProperty().addListener(new ChangeListener<Number>() { @Override public void changed(ObservableValue<? extends Number> ov, Number old_val, Number new_val) { pane.setBackground(new Background(new BackgroundFill( Color.rgb( new_val.intValue(), (int)sliderG.getValue(), (int)sliderB.getValue() ), CornerRadii.EMPTY, Insets.EMPTY))); } }); sliderG.valueProperty().addListener(new ChangeListener<Number>() { @Override public void changed(ObservableValue<? extends Number> ov, Number old_val, Number new_val) { pane.setBackground(new Background(new BackgroundFill( Color.rgb( (int)sliderR.getValue(), new_val.intValue(), (int)sliderB.getValue() ), CornerRadii.EMPTY, Insets.EMPTY))); } }); sliderB.valueProperty().addListener(new ChangeListener<Number>() { @Override public void changed(ObservableValue<? extends Number> ov, Number old_val, Number new_val) { pane.setBackground(new Background(new BackgroundFill( Color.rgb( (int)sliderR.getValue(), (int)sliderG.getValue(), new_val.intValue() ), CornerRadii.EMPTY, Insets.EMPTY))); } }); }
Para terminar ejecuta el proyecto y vaya moviendo los slider y vera como los colores del Pane van cambiando
enjoy!!!
Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.
Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye
Enjoy! :)
Spark Framework es un conjunto de librerías para los lenguajes Java y Kotlin que nos sirve para el desarrollo rápido y s...
En este tutorial de android, vemos como leer un archivo de texto y mostrarlo en pantalla del celular, el texto elegido e...
El Tangram es un juego chino muy antiguo, esta compuesto por 7 piezas: un paralelogramo (romboide), un cuadrado y 5 triá...
La Belleza está en la Simetría ¿Qué es lo que nos hace considerar un rostro bello? ¿Está influenciado nuestro criterio p...
En este post veremos una pequeña introducción a lo que son las animaciones con LibGDX y el uso de sprites. ¿Que es la an...
HyperSQL DataBase (HSQLDB) es un moderno administrador de bases de datos relacionales, es portátil e implementado en jav...
Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...
En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...
Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...
Google Bard la inteligencia artificial de Google se actualiza con una mejora que entra a competir con el resto de IAs y...