Search code examples
javalistviewjavafxflexboxresponsive-design

Fluid nodes list layout with JavaFX

I use ListView to dynamically display items in my JavaFX app. Items are loaded through REST call to my backend app. Each item can be clicked and then product view is displayed instead of product list. That works (looks) fine until app window is resized. After resize, items look ugly and they use too much space.

The question: Is there a way to get some kind of fluid item order?

In HTML and CSS that would be Flexbox if I remember well.

All items would be the same width and the same height not giving a chance to calculate width or height for each item separately.

The only solution I found on the internet is here: https://github.com/onexip/FlexBoxFX - but it uses FXML files only and there is no option to add items dynamically. The last project update is 6 years ago which tells me it's abandoned or poorly maintained. Their official website is dead: http://flexboxfx.io

EDIT: As James_D mentioned, I don't need ListView but any other solution that works.

Also I am aware of WebView but I would like to avoid HTML content in my app.

To make my case more clear, I made some screenshots and the first one is edited to represent the idea what I want. Numbers on edited screenshot represent desired order of items.

If window grows more in width, first row should have items 1, 2 and 3, next row 4, 5 and 6, next row 7, 8 and 9 and last row should have only one item (10). All rows should be centered and item 10 of last row should be positioned below item 8.

This is the final layout I want to get but I don't know how.

enter image description here

Everything is nice when window is not resized, but after resize, it looks ugly.

Before -- After

Solution

  • The primary purpose of a ListView is to provide virtualization; i.e. it provides an efficient mechanism to display a large number of items, letting the user scroll through them, without the overhead of UI components for the items that are not currently displayed. It also provides some additional functionality, such as selection (allowing the user to put one or more items in the list into a "selected" state which is shown visually).

    If you actually need virtualization, and perhaps selection, and want a grid-like layout, then the third-party library ControlsFX provides a similarly-virtualized GridView.

    However, your question appears to be only about layout and your screenshots appear to show you using a Pagination control, which would (probably) obviate the need for virtualization anyway. If you don't need the functionality of the ListView, then a standard layout pane such as FlowPane or TilePane, possibly wrapped in a ScrollPane, should provide the layout you need.