Interaccionando con una lista

En los ejemplos de este apartado vamos a interaccionar con una lista y personalizarla.

El primer ejemplo muestra una lista de colores que al seleccionar uno de ellos lo muestra como color de fondo de un panel que se muestra a su derecha. Para ello se escucha para los cambios en el elemento seleccionado de la lista. Por lo que nos quedamos con el modelo de selección asociado a la lista mediante el método getSelectionModel().selectedItemProperty() al cuál le añadimos un ChangeListener mediante el método addListener que ya conocemos y así poder mostrar el color de fondo del panel con el valor del elemento seleccionado en la lista. La interfaz para este ejemplo es la siguiente.

El segundo ejemplo hace lo mismo, pero personalizamos la forma en la que los elementos de la lista son visualizados, mostrando un rectángulo redondeado del color asociado a cada uno de los elementos. Para ello he creado una clase interna que hereda de ListCell y que sobreescribe el método updateItem que es el encargado de visualizar cada uno de los elementos para que en vez de mostrar el texto pinte un rectángulo redondeado de dicho color. Luego simplemente debemos decirle a la lista que utilice un objeto de dicha clase para visualizar los elementos mediante el método setCellFactory de la misma. La interfaz es la que muestro a continuación.

El tercer ejemplo permite además añadir y borrar elementos de la lista. Para añadir elementos, éstos se seleccionan de un selector de color y al pulsar el botón Añadir se añaden al modelo de la lista mediante el método add. Para eliminar el elemento seleccionado se utiliza el método remove del modelo asociado a la lista. La interfaz es la siguiente.

Ahora os dejo el código de cada uno de los ejemplos.

ListaColores1.java

package javafx.eventos;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class ListaColores1 extends Application {
	
	private static final ObservableList<String> COLORES = FXCollections.observableArrayList(
            "Red", "Maroon", "Pink", "PaleVioletRed", "Moccasin",
            "Orange", "Wheat", "Peru", "SaddleBrown", "LightYellow",
            "Gold", "LawnGreen", "Green", "Aquamarine", "Teal",
            "CornflowerBlue", "MidnightBlue", "Violet", "DarkMagenta", "Indigo");
	private static final String ESTILO_PANEL = "-fx-border-color: gray; -fx-border-radius: 5; -fx-background-radius: 5; ";
	
	private Pane panel;
	
	private void mostrarColor(String color) {
		panel.setStyle(ESTILO_PANEL + "-fx-background-color: " + color + ";");
	}
	
	@Override
	public void start(Stage escenarioPrincipal) {
		try {
			HBox raiz = new HBox(20);
			raiz.setPadding(new Insets(30));
			raiz.setAlignment(Pos.BOTTOM_CENTER);
			
			VBox hbOpciones =new VBox(20);
			raiz.setAlignment(Pos.CENTER);
			
			Label lbElige = new Label("Elige el color");
			lbElige.setFont(Font.font(20));
			ListView<String> lvColores = new ListView<>(COLORES);
			lvColores.getSelectionModel().select("chocolate");
			lvColores.getSelectionModel().selectedItemProperty().addListener((ov, viejo, nuevo) -> mostrarColor(nuevo));
			hbOpciones.getChildren().addAll(lbElige, lvColores);
			
			panel = new Pane();
			panel.setMinSize(140, 140);
			panel.setMaxSize(140, 140);
			panel.setStyle(ESTILO_PANEL + "-fx-background-color: chocolate;");
			
			raiz.getChildren().addAll(hbOpciones, panel);
			
			Scene escena = new Scene(raiz, 430, 200);
			escenarioPrincipal.setTitle("Elige un color");
			escenarioPrincipal.setScene(escena);
			escenarioPrincipal.show();
		} catch(Exception e) {
			e.printStackTrace();
		}
	}

	public static void main(String[] args) {
		launch(args);
	}
}

ListaColores2.java

package javafx.eventos;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class ListaColores2 extends Application {
	
	private class CeldaColor extends ListCell<String> {
        @Override
        public void updateItem(String color, boolean vacio) {
            super.updateItem(color, vacio);
            Pane colorMostrado = new Pane();
            colorMostrado.setMinSize(70, 20);
            colorMostrado.setMaxSize(70, 20);
            colorMostrado.setStyle(ESTILO_PANEL);
            if (color != null) {
                colorMostrado.setStyle(ESTILO_PANEL + "-fx-background-color: " + color + ";");
                setGraphic(colorMostrado);
            } else {
            	setGraphic(null);
            }
        }
    }
	
	private static final ObservableList<String> COLORES = FXCollections.observableArrayList(
            "Red", "Maroon", "Pink", "PaleVioletRed", "Moccasin",
            "Orange", "Wheat", "Peru", "SaddleBrown", "LightYellow",
            "Gold", "LawnGreen", "Green", "Aquamarine", "Teal",
            "CornflowerBlue", "MidnightBlue", "Violet", "DarkMagenta", "Indigo");
	private static final String ESTILO_PANEL = "-fx-border-color: gray; -fx-border-radius: 5; -fx-background-radius: 5; ";

	private Pane panel;
	
	private void mostrarColor(String color) {
		panel.setStyle(ESTILO_PANEL + "-fx-background-color: " + color + ";");
	}
	
	@Override
	public void start(Stage escenarioPrincipal) {
		try {
			HBox raiz = new HBox(20);
			raiz.setPadding(new Insets(30));
			raiz.setAlignment(Pos.BOTTOM_CENTER);
			
			VBox hbOpciones =new VBox(20);
			raiz.setAlignment(Pos.CENTER);
			
			Label lbElige = new Label("Elige el color");
			lbElige.setFont(Font.font(20));
			ListView<String> lvColores = new ListView<>(COLORES);
			lvColores.setPrefWidth(80);
			lvColores.getSelectionModel().select("Red");
			lvColores.getSelectionModel().selectedItemProperty().addListener((ov, viejo, nuevo) -> mostrarColor(nuevo));
			lvColores.setCellFactory(l -> new CeldaColor());
			hbOpciones.getChildren().addAll(lbElige, lvColores);
			
			panel = new Pane();
			panel.setMinSize(140, 140);
			panel.setMaxSize(140, 140);
			panel.setStyle(ESTILO_PANEL + "-fx-background-color: Red;");
			
			raiz.getChildren().addAll(hbOpciones, panel);
			
			Scene escena = new Scene(raiz, 430, 200);
			escenarioPrincipal.setTitle("Elige un color");
			escenarioPrincipal.setScene(escena);
			escenarioPrincipal.show();
		} catch(Exception e) {
			e.printStackTrace();
		}
	}

	public static void main(String[] args) {
		launch(args);
	}
}

ListaColores3.java

package javafx.eventos;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ColorPicker;
import javafx.scene.control.Label;
import javafx.scene.control.ListCell;
import javafx.scene.control.ListView;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.stage.Stage;

public class ListaColores3 extends Application {
	
	private class CeldaColor extends ListCell<String> {
        @Override
        public void updateItem(String color, boolean vacio) {
            super.updateItem(color, vacio);
            Pane colorMostrado = new Pane();
            colorMostrado.setMinSize(70, 20);
            colorMostrado.setMaxSize(70, 20);
            colorMostrado.setStyle(ESTILO_PANEL);
            if (color != null) {
                colorMostrado.setStyle(ESTILO_PANEL + "-fx-background-color: " + color + ";");
                setGraphic(colorMostrado);
            } else {
            	setGraphic(null);
            }
        }
    }
	
	private static final ObservableList<String> COLORES = FXCollections.observableArrayList(
            "Red", "Maroon", "Pink", "PaleVioletRed", "Moccasin",
            "Orange", "Wheat", "Peru", "SaddleBrown", "LightYellow",
            "Gold", "LawnGreen", "Green", "Aquamarine", "Teal",
            "CornflowerBlue", "MidnightBlue", "Violet", "DarkMagenta", "Indigo");
	private static final String ESTILO_PANEL = "-fx-border-color: gray; -fx-border-radius: 5; -fx-background-radius: 5; ";

	private Pane panel;
	private ListView<String> lvColores;
	private Color nuevoColor = Color.WHITE;	
		
	
	private void mostrarColor(String color) {
		if (color != null) {
			panel.setStyle(ESTILO_PANEL + "-fx-background-color: " + color + ";");
			lvColores.getSelectionModel().select(color);
		}	
	}
	
	private void anadirColor() {
		String color = nuevoColor.toString().replace("0x", "#");
		if (color != null && !COLORES.contains(color)) {
			COLORES.add(0, color);
			mostrarColor(color);
		}
	}
	
	private void borrarColor() {
		String color = lvColores.getSelectionModel().getSelectedItem();
		COLORES.remove(color);
		if (COLORES.isEmpty()) {
			panel.setStyle(ESTILO_PANEL);
		}
	}
	
	@Override
	public void start(Stage escenarioPrincipal) {
		try {
			HBox raiz = new HBox(20);
			raiz.setPadding(new Insets(30));
			raiz.setAlignment(Pos.BOTTOM_CENTER);
			
			VBox hbOpciones =new VBox(20);
			raiz.setAlignment(Pos.CENTER);
			
			Label lbElige = new Label("Elige el color");
			lbElige.setFont(Font.font(20));
			lvColores = new ListView<>(COLORES);
			lvColores.setPrefWidth(80);
			lvColores.getSelectionModel().select("Red");
			lvColores.getSelectionModel().selectedItemProperty().addListener((ov, viejo, nuevo) -> mostrarColor(nuevo));
			lvColores.setCellFactory(l -> new CeldaColor());
			
			HBox hbAnadir = new HBox(10);
			ColorPicker cp = new ColorPicker();
			cp.setMinWidth(230);
			cp.setOnAction(e -> nuevoColor = cp.getValue());
			Button btAnadirColor = new Button("Añadir");
			btAnadirColor.setOnAction(e -> anadirColor());
			hbAnadir.getChildren().addAll(cp, btAnadirColor);
			
			VBox vbAcciones = new VBox(10);
			Button btBorrarColor = new Button("Borrar");
			btBorrarColor.setMinWidth(300);
			btBorrarColor.setOnAction(e -> borrarColor());
			vbAcciones.getChildren().addAll(hbAnadir, btBorrarColor);
			
			hbOpciones.getChildren().addAll(lbElige, lvColores, vbAcciones);
			
			panel = new Pane();
			panel.setMinSize(300, 300);
			panel.setMaxSize(300, 300);
			panel.setStyle(ESTILO_PANEL + "-fx-background-color: Red;");
			
			raiz.getChildren().addAll(hbOpciones, panel);
			
			Scene escena = new Scene(raiz, 650, 350);
			escenarioPrincipal.setTitle("Elige un color");
			escenarioPrincipal.setScene(escena);
			escenarioPrincipal.show();
		} catch(Exception e) {
			e.printStackTrace();
		}
	}

	public static void main(String[] args) {
		launch(args);
	}
}

« Anterior | Siguiente »

CC by-nc - José Ramón Jiménez Reyes - IES Al-Ándalus