Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / JavaFX / Como capturar cambios del Slider en JavaFX

Como capturar cambios del Slider en JavaFX

Autor jc mouse lunes, julio 25, 2016

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.

ide fx

Presionar «Terminar» para crear el proyecto.

proyecto fx

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:

sliderfx

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.

properties

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:

slider

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

listener fx

enjoy!!!

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

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

También Te Podría Interesar

Generar esquema XSD a partir de clases java

Generar esquema XSD a partir de clases java

En un post anterior vimos como usar la herramienta XJC del JDK para generar clases java desde esquemas XSD (XML Schema D...

Creación y uso de parametros en Jaspersoft Studio

Creación y uso de parametros en Jaspersoft Studio

Hola 🙂 En este video tutorial veremos como crear y usar parámetros en reportes con JasperSoft Studio, la base de datos q...

Obteniendo coordenadas XY con Touch Event

Obteniendo coordenadas XY con Touch Event

Los smartphone al no tener los típicos botones de los celulares, su pantalla es sensible al movimiento, esto se llama «t...

Introducción a Fragment

Introducción a Fragment

Un Fragment representa un comportamiento o una parte de la interfaz de usuario en una Activity. Puedes combinar múltiple...

Arreglos en Visual Basic

Arreglos en Visual Basic

Un array es un conjunto finito y ordenado de elementos homogeneos. Ordenado porque los elementos n-esimo de un array pue...

Integración de FFmpeg con Java

Integración de FFmpeg con Java

FFmpeg es una colección de software libre capaz de decodificar, codificar, transcodificar, mux, demux, transmitir, filtr...

Comparte lo que sabes

Categorias

Últimas entradas

Quasar es un proyecto Open Source basado en el Framework Vue que nos permite desarrollar proyectos de todo tipo, por eje...

Continuando el post de «Introducción a Retrofit» donde realizamos una breve preparación a lo que es el uso de la librerí...

Editar un documento PDF no es tan sencillo como editar un archivo de texto por ejemplo, para editar archivos PDFs necesi...

¿Alguna vez tuviste la necesidad de hacer una captura de pantalla de una página web? Si es así, seguramente buscaste y d...

Herramientas

Generador de Enlaces a Whatsapp