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

Terminator: Terminal multiventanas para Linux

Terminator: Terminal multiventanas para Linux

Cada versión de Linux viene con su propia terminal predeterminada para interactuar con el Sistema Operativo a través de...

Código de Control en PHP v7.0 Bolivia

Código de Control en PHP v7.0 Bolivia

NUEVA ESPECIFICACIÓN TÉCNICA DEL CÓDIGO DE CONTROL (Ver.7.0) En el marco del Nuevo Sistema de Facturación implementado p...

Vibrate: ¿Cómo hacer vibrar un dispositivo Android?

Vibrate: ¿Cómo hacer vibrar un dispositivo Android?

En este post crearemos una app para utilizar el vibrador de nuestro dispositivo android usando para ello el IDE Android...

Ejecutables con Launch4J

Ejecutables con Launch4J

Launch4j es un software OpenSource hecho en Java que permite crear ejecutables para programas escritos en ese mismo leng...

Ejemplo RESTFul Webservice en Java

Ejemplo RESTFul Webservice en Java

En este post construiremos un Servicio Web en Java bajo el estandar REST (Representational State Transfer), el cual hace...

Encriptación simétrica en java

Encriptación simétrica en java

En este post veremos un ejemplo sencillo de encriptación/desencriptación simétrica que el API de Java nos permite realiz...

Comparte lo que sabes

Categorias

Últimas entradas

En este post aprenderemos lo que es la clonación de objetos en java o lo que es lo mismo, generación de nuevas instancia...

El índice TIOBE (TIOBE, The Importance of Being Earnest – “La importancia de ser honesto” – refe...

SDKMAN! es una herramienta para la administración de versiones paralelas de varios programas de desarrollo de software c...

Continuando con el estudio del meta lenguaje XML (Lenguaje de Marcado Extensible) bastante utilizado en el intercambio d...

Android Bolivia

MAUS