Expandable list in javafx as android

Android has ListView Like This enter image description here

How can this be implemented in Java FX, any links, suggestions or custom components? I woke up and didn't find it? however, the accordion is closely related to it, but it does not suit the appearance. it should look like a LIST with evenly sized cells. any help? I am using JavaFx 2.


As pointed out in the comments, a tree view might help me. OK. But i tried to use treeview and i also read this blog post http://myjavafx.blogspot.com/2012/03/treeview-with-data-source.html but how can i customize one line. i mean how can i map or bind data from my POJO alerts to different labels and images. for example something like

TreeView<Alerts> tv = new TreeView<>(new Alerts("Incedent Name","Alerts Title",
                "Short Message","Sender",new Date(),new Image("titleImage.png"),


and all these values ​​are mapped to their respective labels and images in one line. Since there is currently no extensible list offered by JavaFX, I think this is the approach. can any body have suggestions or sample collation code, etc.


source to share

1 answer

Here's a sample startup code:

public class TreeDemo extends Application {

    public void start(Stage stage) {
        TreeItem<Alert> rootNode = new TreeItem<>(new Alert("dummy", "dummy"));
        TreeItem<Alert> groupNode = new TreeItem<>(new Alert("group item", "group item"));
        groupNode.getChildren().addAll(new TreeItem<>(new Alert("sub item 1", "sub item 1")),
                new TreeItem<>(new Alert("sub item 2", "sub item 2")),
                new TreeItem<>(new Alert("sub item 3", "sub item 3")));

        rootNode.getChildren().addAll(new TreeItem<>(new Alert("item 1", "item 1")),
                new TreeItem<>(new Alert("item 2", "item 2")),
                new TreeItem<>(new Alert("item 3", "item 3")));

        VBox box = new VBox();
        final Scene scene = new Scene(box, 400, 300);

        TreeView<Alert> treeView = new TreeView<>(rootNode);
        treeView.setCellFactory(new Callback<TreeView<Alert>, TreeCell<Alert>>() {
            public TreeCell<Alert> call(TreeView<Alert> p) {
                return new AlertTreeCell();


    private final class AlertTreeCell extends TreeCell<Alert> {

        private final AnchorPane anchorPane;
        private final Label label;
        private final Button button;

        public AlertTreeCell() {
            anchorPane = new AnchorPane();
            label = new Label();
            button = new Button();
            anchorPane.getChildren().addAll(label, button);
            anchorPane.setStyle("-fx-border-color: gray");
            anchorPane.setPadding(new Insets(5));
            AnchorPane.setRightAnchor(button, 10.0);
            AnchorPane.setLeftAnchor(label, 15.0);

        public void updateItem(Alert item, boolean empty) {
            super.updateItem(item, empty);
            if (empty) {
            } else {

    public static class Alert {

        private final SimpleStringProperty name;
        private final SimpleStringProperty status;

        private Alert(String name, String department) {
            this.name = new SimpleStringProperty(name);
            this.status = new SimpleStringProperty(department);

        public String getName() {
            return name.get();

        public void setName(String fName) {

        public String getStatus() {
            return status.get();

        public void setStatus(String fName) {

    public static void main(String[] args) {


  • There is only one root in treeview, so to display a list like a screen, we do


  • I used Anchorpane as the layout for the cell, as it seems to fit your gui design better.

  • You should probably use a css file and move all inline styles into it.



All Articles