Aprende Java Aprende Php Aprende C++ Aprende HTML 5 Aprende JavaScript Aprende JSON Aprende MySQL Aprende SQLServer Aprende Visual Basic 6 Aprende PostgreSQL Aprende SQLite Aprende Redis Aprende Kotlin Aprende XML Aprende Linux VSC Aprende Wordpress Aprende Laravel Aprende VueJS Aprende JQuery Aprende Bootstrap Aprende Netbeans Aprende Android
Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube Sigueme en TikTok Sigueme en Whatsapp
Home / JavaFX / Como capturar cambios del Slider en JavaFX

Como capturar cambios del Slider en JavaFX

Por 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

Artículos similares

Leer datos de Firebase desde Android

En este post crearemos una aplicación en Android Studio para conectarnos con nuestra base de datos de Firebase y leer al[...]

Crear ventana de ayuda sin JavaHelp

Java Help es (o era) una librería para java que permitía añadir ventanas de ayuda HTML a nuestros proyectos, al ser una[...]

Formateo de registros en Excel con JExcel

Tenia un problema, me pasaron unos archivos excel con unos cientos de registros (ver imagen más abajo) que exportaron de[...]

Guía básica: Trabajando con GitHub y Netbeans

Netbeans tiene soporte para trabajar con varias herramientas de control de versiones, GIT es una de ellas, esta herramie[...]

Como personalizar tus ToolTipText

Primeramente debemos saber que es un ToolTipText en Java, pues no es mas que esa información que se muestra cuando posic[...]

Store Procedure: Result Set

Los procedimientos almacenados no solo pueden retornar valores como números, cadenas, etc, sino también datos como los R[...]