JavaFX Uso de ComboBox

abril 05, 2015

Un ComboBox en uno de los controles comúnmente usados en la creación de interfaces gráficas de usuario, es un control diseñado para desplegar una lista de elementos del los cuales el usuario podrá seleccionar el deseado, un ComboBox puede ser editable o no, también podemos cambiar la forma como se presentan los datos.

La forma mas simple de un ComboBox es utilizada para mostrar una lista desplegable de cadenas de texto, añadimos uno utilizando la clase ComboBox<T> donde T indica el tipo de datos a mostrar, para este primer ejemplo la clase String.

Necesitamos crear la lista de elementos que se mostrara, usamos un ObservableList<T> de este modo los cambios en la lista se reflejaran en el control, ya sean la adición, edición o eliminación de un elemento, asignamos la lista al control en el constructor o por medio del método setItems() del ComboBox.

ObservableList<String> items = FXCollections.observableArrayList();
items.addAll("item-1", "item-2", "item-3", "item-4", "item-5");

ComboBox<String> cbx = new ComboBox<>(items);
StackPane pane = new StackPane(cbx);

Scene scene = new Scene(pane, 250, 150);
stage.setTitle("ComboBox JavaFX");
stage.setScene(scene);
stage.show();

En caso que deseemos limitar el número de filas visibles que aparecen en la lista desplegable disponemos del método setVisibleRowCount(N), cuando no se haya seleccionado ningún elemento podemos mostrar al usuario un mensaje informativo usando setPromptText(mensaje), también podemos establecer el control como editable, esto le permite al usuario teclear el elemento a seleccionar o agregar uno nuevo, lo hacemos con el método setEditable(true).

ComboBox toString StringConverter

Como mencionamos anteriormente un control ComboBox puede contener cualquier tipo de objetos en su colección de elementos, cuando estos elementos son una clase creado por nosotros, ejemplo: una clase Persona con los campos nombre, edad y sexo, si creamos un observableList<Person> y lo agregamos al ComboBox este mostrara el valor de retorno del método toString() de la clase Person.

Esta seria la salida que genera toString() por defecto para la clase Person, por lo que debemos sobrescribir el mismo para que muestre la información que deseemos, por ejemplo el nombre, la edad o ambos.

public class Person {

    private String nombre;
    private int edad;
    private boolean sexo;

    public Person(String nombre, int edad, boolean sexo) {
        this.nombre = nombre;
        this.edad = edad;
        this.sexo = sexo;
    }

    @Override
    public String toString() {
        return this.edad + " - " + this.nombre;
    }
}

En casos en los que nos podemos sobrescribir el método toString() contamos con la clase StringConverter<T> que podemos usar para crear una representación en texto del objeto que deseamos mostrar, debemos sobrescribir los métodos toString y fromString, el primero para obtener una representación en texto de la clase Persona y el otro para hacer lo contrario crear un objeto de la clase Persona a partir de una cadena de texto, este último no lo utilizaremos en nuestro ejemplo.

ComboBox<Person> cbx = new ComboBox<>(items);
cbx.setConverter(new StringConverter<Person>() {

    @Override
    public String toString(Person p) {
        return (p.isSexo() ? "H" : "M") + " - " + p.getNombre();
    }

    @Override
    public Person fromString(String string) {
        throw new UnsupportedOperationException("Not supported yet.");
    }
});

Ahora los elementos se muestran con otro formato donde usamos un booleano para definir el sexo, true para hombre y false para mujer que luego convertimos en H y M seguido del nombre de la persona.

ComboBox Eventos de Selección

Algo que nos interesa mucho conocer en cuando el usuario a seleccionado un elemento y cual ha sido el mismo, ahora crearemos un lambda que se ejecutara cada vez que el usuario cambie la selección e imprimirá el elemento seleccionado.

La acción para este control se produce cada vez que se cambia la selección, si deseamos un poco mas de información podemos establecer un Listener a valueProperty y podremos saber además de cuando cambia la selección, el nuevo elemento seleccionado y el viejo.

cbx.setOnAction(e -> System.out.println("Action Nueva Selección: " + cbx.getValue()));

cbx.valueProperty().addListener((ov, p1, p2) -> {
    System.out.println("Nueva Selección: " + p2);
    System.out.println("Vieja Selección: " + p1);
});