Como capturar cambios del Slider en JavaFX

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

IDE Netbeans con JavaFX
Scene Builder
Conocimientos basicos sobre java

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!!!

Como capturar cambios del Slider en JavaFX

Tags

Últimas entradas

FOCA: Herramienta para recolección y análisis de Metadatos

Paginación en SQL Server 2008 y Laravel

¿Como paginar con Laravel 11?

¿Cómo hacer el video ABRAZO gratis?

Crea y usa Traits en Laravel

Artículos similares

JTable de colores [Problema Resuelto]

Qulqi: Convierte números a letras en java

jFace – Crea retratos hablados

Facturación electrónica: El Código de Control

Tradukisto: Conversión de dinero en palabras

Hola mundo en Netbeans

JC Mouse | Bolivia