How to display rows into accordion

Question

I have this JavaFX accordion which displays images:

public class Navigation {

private static final Image BLUE_FISH = new Image("/Blue-Fish-icon.png");
private static final Image RED_FISH = new Image("/Red-Fish-icon.png");
private static final Image YELLOW_FISH = new Image("/Yellow-Fish-icon.png");
private static final Image GREEN_FISH = new Image("/Green-Fish-icon.png");

public void initNavigation(Stage primaryStage, Group root, Scene scene) {

    VBox stackedTitledPanes = createStackedTitledPanes();

    ScrollPane scroll = makeScrollable(stackedTitledPanes);
    scroll.getStyleClass().add("stacked-titled-panes-scroll-pane");
    scroll.setPrefSize(395, 580);
    scroll.setLayoutX(5);
    scroll.setLayoutY(32);

    //scene = new Scene(scroll);
    root.getChildren().add(scroll);

}

private VBox createStackedTitledPanes() {
    final VBox stackedTitledPanes = new VBox();
    stackedTitledPanes.getChildren().setAll(
            createTitledPane("Connections", GREEN_FISH),
            createTitledPane("Tables", YELLOW_FISH),
            createTitledPane("Description", RED_FISH),
            createTitledPane("Blue Fish", BLUE_FISH));
    ((TitledPane) stackedTitledPanes.getChildren().get(0)).setExpanded(true);
    stackedTitledPanes.getStyleClass().add("stacked-titled-panes");

    return stackedTitledPanes;
}

public TitledPane createTitledPane(String title, Image... images) {
    FlowPane content = new FlowPane();
    for (Image image : images) {
        ImageView imageView = new ImageView(image);
        content.getChildren().add(imageView);

        FlowPane.setMargin(imageView, new Insets(10));
    }
    content.setAlignment(Pos.TOP_CENTER);

    TitledPane pane = new TitledPane(title, content);
    pane.getStyleClass().add("stacked-titled-pane");
    pane.setExpanded(false);

    return pane;
}

private ScrollPane makeScrollable(final VBox node) {
    final ScrollPane scroll = new ScrollPane();
    scroll.setContent(node);
    scroll.viewportBoundsProperty().addListener(new ChangeListener<Bounds>() {
        @Override
        public void changed(ObservableValue<? extends Bounds> ov, Bounds oldBounds, Bounds bounds) {
            node.setPrefWidth(bounds.getWidth());
        }
    });
    return scroll;
}

}

I'm interested is it possible to display rows of data where the images are placed. Something like this:

P.S case example. I have a java object which will be used as list:

public List<dataObj> list = new ArrayList<>();

    public class dataObj {

        private int connectionId;
        private String conenctionname;
        private String connectionDescription;

        public dataObj() {
        }

        ....................
    }

When I insert some data into the Java Array list I want to display it into the accordion based on the above requirement.

P.S 2 In my case what is the proper way to insert text into FlowPane? I tested this:

public TitledPane createTitledPane(String title, Image... images) {
        FlowPane content = new FlowPane();
        for (Image image : images) {
            ImageView imageView = new ImageView(image);
            content.getChildren().add(imageView);

            FlowPane.setMargin(imageView, new Insets(10));
        }
        content.setAlignment(Pos.TOP_CENTER);
        content.setText("This part will be the first line.\n This part the second.");

        TitledPane pane = new TitledPane(title, content);
        pane.getStyleClass().add("stacked-titled-pane");
        pane.setExpanded(false);

        return pane;
    }

I get error that inserting text using setText is not correct. What is the proper way?

Answer 1

You can simply use a ListView:

private void hello() {
    ListView<Object> lv = new ListView<>();
    // yourList is you List<Object> list
    lv.itemsProperty().set(yourList);
    lv.setCellFactory(new Callback<ListView<Object>, ListCell<Object>>() {
        @Override
        public ListCell<Object> call(ListView<Object> p) {
            return new youCellFactory();
        }
    });
    AnchorPane content = new AnchorPane();
    content.getChildren().add(lv);
    // add to TitelPane
    TitledPane pane = new TitledPane(title, content);
}
static class youCellFactory extends ListCell<Object> {
    @Override
    public void updateItem(Object item, boolean empty) {
        super.updateItem(item, empty);
        if (item != null) {
            setText(item.getConenctionname());
        }
    }
}

I have not tested this code but it should work.

Here is an nice Example too, but without object:
ListViewSample.java

Answer 2

If you use "\n" the output String will be separated into multiple lines of text. For example:

component.setText("This part will be the first line.\n This part the second.");

From your update, assuming you have getters and setters:

component.setText(String.valueOf(dataObj.getConnectionId()) + "\n" + dataObj.getConnectionname() + "\n" + dataObj.getConnectionDescription());