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!!!
En este post hablaremos sobre la biblioteca de Apache PDFBox el cual es una herramienta para java de código abierto que[...]
En este tutorial crearemos un botón con el estilo del nuevo windows 8 Modern UI que primero se conoció como Metro UI. E[...]
Google tiene entre su formulario de autenticación de usuario para sus diferentes servicios (gmail, blogger, youtube, g+)[...]
En este post diseñaremos un reporte de un padrón electoral con dos columnas que contendrá los certificados de sufragio e[...]
Última parte del tutorial «Mapas interactivos HTML5», vamos uniendo todo todo el código. En la parte 5 de este tutorial,[...]
El Algoritmo de Aldous-Broder llamado así por dos matemáticos, David Aldous and A. Broder (quienes trabajaban en la inve[...]
