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

Validación XML con Esquema XSD en PHP

Validación XML con Esquema XSD en PHP

En este post realizaremos un pequeño ejemplo de validación de archivos XML utilizando el esquema XSD y el lenguaje PHP (...

Introduccion a la programacion shell

Introduccion a la programacion shell

En este post veremos una muy pequeña introducción de lo que es el mundo de la programación en shell de Linux. Necesitamo...

Gestión de productos – El modelo (Parte 4)

Gestión de productos – El modelo (Parte 4)

En la estructura del proyecto, nuestro modelo mvc esta compuesto por tres paquetes, la vista, el modelo y controlador. L...

Sourcetrail ahora es Open Source

Sourcetrail ahora es Open Source

Sourcetrail el explorador de código fuente de los lenguaje C, C ++, Java y Python se pasa al Software Libre y desde ahor...

Crea presentaciones Power Point desde Java

Crea presentaciones Power Point desde Java

Apache POI es la API de Java para el trabajo con archivos de Microsoft como son Word, Excel y Power Point. Apache POI se...

Configurar Chrome para usar Tor

Configurar Chrome para usar Tor

Tor es la forma más fácil de navegar por internet de una manera segura y anónima,  Tor cuenta con su propio navegador «T...

Comparte lo que sabes

Categorias

Últimas entradas

simuladorasamblea.bo es una herramienta digital  desarrollado por los Analistas de Datos Rafael López Valverde y  Sergio...

Crecen las startups en Bolivia: La mayoría está en Santa Cruz, Cochabamba y La Paz Según el «Mapeo del Ecosistema de Tec...

«Las palabras que elegimos dan forma a nuestra realidad. La Fuente Educada (Polite Type) es una fuente de código abierto...

En este post realizaremos un proyecto en VUE que se conectara a un REST API  y utilizara un servicio del mismo para obte...

Herramientas

Generador de Enlaces a Whatsapp