ChoiceBox cell factory?

Question

Is there any reason why ChoiceBox doesn't use the same cell factory approach used by list/table/tree? Unless I'm missing something (?) it looks like the intention is that we should just add our nodes (i.e. cells) directly to the list of items.
This is a little odd for me, I would normally want to put my data elements (Beans or enums) in the ChoiceBox and have the renderer take care of the rest, just like I do with lists/tables/trees. In the current model I am having to iterate over my data items and create a custom cell for each one, then when something is selected, etc, I have to get the data item out of my custom cell. It all feels a tad awkward?
Edit: actually adding nodes doesn't seem to work either? I've resorted to creating a wrapper class for my Bean that provides a toString that does my formatting. In this approach, I also lose my underscores in my text (in the popup only, the button bit seems fine) - I assume this is something to do with mnemonics but I have not turned these on and can't see a simple way to turn them off. This all seems a bit wrong, what am I missing?

Answer 1

Here's a simple little ComboBox that should tie us over until Jonathan writes us a real one. It's very light on features, but the basics work. You can obviously just copy and edit this code directly to suit your needs.
The only slightly fancy thing I've done is add a 'Cell' interface to it so you can put in your own custom cell renderer for the current item (the popup list uses a normal cell factory). Just implement ComboBox.Cell with your custom Node and then call setCurrentItemCell. In a better implementation you would have a shared factory between the list and the current item, but we need to leave something for Jonathan to impress us with when he provides his real one ;)
A couple of issues:
* Ideally the popupList would shrink to fit its contents until it reaches a certain height and then it would start scrolling. Currently it just pops up at its preferred size, which is not as pretty as it could be. Anyone got any ideas on doing this better?
* The closeOnEscape setting of the popup doesn't seem to be working. I think perhaps the List is blocking the keyboard input. I put a work around in using an event filter, but this shouldn't be needed in a perfect world.
* The selection listener stuff only triggers if the selection is changed (which makes sense), we need something more like onAction or onCellClicked or something that fires when the user clicks a cell regardless of whether the selection was changed or not. I've used the selection model but also added a little event filter to catch the case when we click the already selected value.
ComboBox.java
package com.zenjava.playground.combo;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.event.Event;
import javafx.event.EventHandler;
import javafx.geometry.Bounds;
import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.control.*;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
import javafx.stage.Popup;
import javafx.util.Callback;
public class ComboBox<ItemType> extends BorderPane
    private ListView<ItemType> popupList;
    private Popup popup;
    private Cell<ItemType> currentItemCell;
    public ComboBox()
        popupList = new ListView<ItemType>();
        popupList.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);
        popupList.getSelectionModel().selectedItemProperty().addListener(new ChangeListener<ItemType>()
            public void changed(ObservableValue<? extends ItemType> source, ItemType oldValue, ItemType newValue)
                currentItemCell.updateItem(newValue);
                popup.hide();
        // need to force escape key to close since default behaviour is not working
        popupList.addEventFilter(KeyEvent.KEY_PRESSED, new EventHandler<Event>()
            public void handle(Event event)
                KeyEvent keyEvent = (KeyEvent) event;
                if (KeyCode.ESCAPE.equals(keyEvent.getCode()))
                    popup.hide();
        // need to force hiding of list for case when current selection is re-selected
        popupList.addEventFilter(MouseEvent.MOUSE_RELEASED, new EventHandler<Event>()
            public void handle(Event event)
                popup.hide();
        popup = new Popup();
        popup.getContent().add(popupList);
        popup.setAutoHide(true);
        popup.setAutoFix(true);
        popup.setHideOnEscape(true);
        // use your own style for this
        Button popupButton = new Button(">");
        popupButton.setOnAction(new EventHandler<ActionEvent>()
            public void handle(ActionEvent actionEvent)
                showPopup();
        setRight(popupButton);
        setCurrentItemCell(new SimpleCell<ItemType>());
    public void setCurrentItemCell(Cell<ItemType> cell)
        currentItemCell = cell;
        Node node = currentItemCell.getNode();
        node.setOnMouseClicked(new EventHandler<Event>()
            public void handle(Event event)
                showPopup();
        setCenter(node);
    public MultipleSelectionModel<ItemType> getSelectionModel()
        return popupList.getSelectionModel();
    public ObservableList<ItemType> getItems()
        return popupList.getItems();
    public void set(Callback<ListView<ItemType>, ListCell<ItemType>> cellFactory)
        popupList.setCellFactory(cellFactory);
    public void showPopup()
        Parent parent = getParent();
        Bounds childBounds = getBoundsInParent();
        Bounds parentBounds = parent.localToScene(parent.getBoundsInLocal());
        double layoutX = childBounds.getMinX()
                + parentBounds.getMinX() + parent.getScene().getX() + parent.getScene().getWindow().getX();
        double layoutY = childBounds.getMaxY()
                + parentBounds.getMinY() + parent.getScene().getY() + parent.getScene().getWindow().getY();
        popup.show(this, layoutX, layoutY);
    public static interface Cell<ItemType>
        Node getNode();
        void updateItem(ItemType item);
    public static class SimpleCell<ItemType> extends TextField implements Cell<ItemType>
        public SimpleCell()
            setEditable(false);
            setStyle("-fx-cursor: hand");
        public Node getNode()
            return this;
        public void updateItem(ItemType item)
            setText(item != null ? item.toString() : "");
}And here's how you would use it:
public void start(Stage stage) throws Exception
    FlowPane root = new FlowPane();
    root.setStyle("-fx-padding: 30");
    root.getChildren().add(new Label("Choose your destiny:"));
    ComboBox<String> combo = new ComboBox<String>();
    combo.setStyle("-fx-border-color: black; -fx-border-width: 1");
    combo.getItems().addAll("Make a difference", "Do no harm", "Start a Krispy Kreme franchise");
    combo.getSelectionModel().selectedItemProperty().addListener(new ChangeListener<Object>()
        public void changed(ObservableValue<? extends Object> source, Object oldValue, Object newValue)
            System.out.println("Your destiny: " + newValue);
    root.getChildren().add(combo);
    Scene scene = new Scene(root, 300, 200);
    stage.setScene(scene);
    stage.show();
}