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
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!!!
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! :)
Editar un documento PDF no es tan sencillo como editar un archivo de texto por ejemplo, para editar archivos PDFs necesi...
Reproducir archivos de audio en nuestras aplicaciones android. Necesitamos IDE Eclipse y SDK Android instalado Un archiv...
En este tutorial se hará uso de los eventos de ratón de jquery para desplazar shapes sobre el canvas, para tener una mej...
SQLite. SQLite es un sistema de gestión de bases de datos relacional compatible con ACID, contenida en una relativamente...
Tercera parte del tutorial [Crea tu blog con el patrón MVC y php] En este post trabajaremos en el Theme del blog, agrega...
Los JavaBeans son clases que encapsulan objetos en un solo objeto (beans). Son fáciles de crear y pueden contener muchos...
Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...
En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...
Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...
Google Bard la inteligencia artificial de Google se actualiza con una mejora que entra a competir con el resto de IAs y...