Forum Stats

  • 3,827,838 Users
  • 2,260,827 Discussions
  • 7,897,396 Comments

Discussions

How to show ListView with ListCell in Popup?

Emon Haque
Emon Haque Member Posts: 1 Green Ribbon
edited Dec 8, 2021 12:53AM in JavaFX 2.0 and Later

Here's the ListView in the primary stage:

everything is displayed correctly. Here's my ListCell<Preson>:

public class PersonTemplate extends ListCell<Person> {
    @Override
    protected void updateItem(Person item, boolean empty) {
        super.updateItem(item, empty);
        setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
        if(item == null || empty) setGraphic(null);
        else{
            setPrefWidth(0);
            var spacer = new Region();
            HBox.setHgrow(spacer, Priority.ALWAYS);
            setGraphic(new HBox(new Text(item.name), spacer, new Text(item.phone)));
        }
    }
}

In a custom control named SelectionBox I tried to use a ListView with PersonTemplate like this:

public class SelectionBox<T> extends GridPane {
    Popup popup;
    TextField input;
    ListView<T> listView;
    Label hintLabel;
    Separator line;
    ActionButton close, open;
    SVGPath svgIcon;
    public SelectionBox(String hint, String icon, ObservableList<T> list, ListCell<T> template){
        listView = new ListView<>(list);
        listView.setCellFactory(v -> template);
        listView.setMaxHeight(200);
        popup = new Popup();
        popup.getContent().add(listView);
        popup.setAutoHide(true);
        popup.setHideOnEscape(true);
        input = new TextField();
        input.setBackground(null);
        hintLabel = new Label(hint);
        line = new Separator();
        line.setBorder(new Border(new BorderStroke(Color.LIGHTBLUE, Color.TRANSPARENT, Color.TRANSPARENT,Color.TRANSPARENT, BorderStrokeStyle.SOLID, BorderStrokeStyle.NONE,BorderStrokeStyle.NONE,BorderStrokeStyle.NONE, null, null, null)));
        open = new ActionButton(Icons.DownArrow, 24, "show");
        close = new ActionButton(Icons.CloseCircle, 16, "remove");
        svgIcon = new SVGPath();
        svgIcon.setContent(icon);
        addRow(0, svgIcon, input, open);
        addRow(1,line);
        setColumnSpan(line, 3);
        setHgrow(input, Priority.ALWAYS);
        input.textProperty().addListener(this::onTextChanged);
    }
    void onTextChanged(ObservableValue<? extends String> observable, String oldValue, String newValue){
        if(oldValue.equals(newValue)) return;
        if(!popup.isShowing()){
            var point = input.localToScreen(0.0, 0.0);
            listView.setMinWidth(input.getWidth());
            popup.show(input, point.getX(), point.getY() + getHeight());
        }
    }
}

if I comment listView.setCellFactory(v -> template) in the constructor it looks like this:

and if I uncomment that line, I don't see any ListCell inside the ListView . It looks like this with that line uncommented:

How to show it properly in the Popup?

Tagged: