Question

I have customized a combobox to show line types, in the selection list, but the button just show a text. How can i draw the selected line type in the button.

ComboBox<String> cmb = new ComboBox<String>();
cmb.getItems().addAll("-fx-stroke-dash-array: 12 2 4 2;", "-fx-stroke-dash-array: 2 2;");
cmb.setCellFactory(new Callback<ListView<String>, ListCell<String>>()
    {
        @Override public ListCell<String> call(ListView<String> p)
        {
            return new ListCell<String>()
                {
                    private final Group group;
                    private final Line line;
                    { 
                        setContentDisplay(ContentDisplay.GRAPHIC_ONLY); 
                        group = new Group();
                        group.getChildren().add(new Rectangle(100, 30, Color.WHITE));
                        line = new Line(0, 15, 100, 15);
                        group.getChildren().add(line);
                    }

                    @Override protected void updateItem(String style, boolean empty)
                    {
                        super.updateItem(style, empty);
                        if(style != null && !empty)
                        {
                            line.setStyle(style);
                            setGraphic(group);
                        }
                    }
                };
        }
    });

Here is how it renders:

I want to display the selected line sample, instead of the style text “-fx-stroke…”, how can i fix that?

In the selection list there is always an extra space at the left of the line, is possible to get rid of this space?

Answer 1

JavaFX works differently from Swing in that it caches the Nodes created by your CellFactory and only updates them accordingly rather than using them for rendering and throwing them away (which is why you have to implement updateItem). The JFX classes will use one node (or ‘cell’) as the so-called button cell, which is the one just displaying text for you. Basically, you have to invoke cmd.setButtonCell(myCellFactory.call(null));. This will install one of your custom cells as the button cell, and the combo box will automatically update it with the appropriate value.