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!!!
Se utiliza la paginación para poder mostrar al usuario una gran cantidad de datos de una forma ordenada en forma de «pag[...]
Un BLOB en SQL es un tipo incorporado que almacena un Objeto Binario Grande como un valor de columna en una fila de una[...]
Los smartphone al no tener los típicos botones de los celulares, su pantalla es sensible al movimiento, esto se llama «t[...]
BorderPane es un layout que distribuye los nodos hijos en 5 posiciones TOP, LEFT, BOTTOM, RIGHT y CENTER Los nodos hijos[...]
En este tutorial de android, vemos como leer un archivo de texto y mostrarlo en pantalla del celular, el texto elegido e[...]
Alda es un lenguaje de programación desarrollado por Dave Yarwood el cual esta basado en texto para composición musical,[...]
