Forum Stats

  • 3,854,238 Users
  • 2,264,344 Discussions
  • 7,905,618 Comments

Discussions

Achieving Resizability and responsive UI while maintaining Layout with a TilePane in a ScrollPane

cf06a24a-3a56-4e14-a96f-7375740c7328
edited Aug 17, 2016 8:28AM in JavaFX 2.0 and Later

I am trying to wrap my head around Scroll- and Tilepanes atm, and I have come upon an issue I just cant solve without a dirty hack.

I have a horizontal TilePane that has 8 Tiles, and I set it to have 4 columns, resulting in 2 rows with 4 tiles.

That TilePane I put in an HBox, since if I put it in a StackPane it would stretch the size of the tilepane making my colum setting void. A bit weird that setting the prefColumns/Rows recalculates the size of the TilePane, rather than trying to set the actual amounts of columns/rows, feels more like a dirty hack.

Anyway, putting the HBox directly into the ScrollPane would not work either, since the Scrollbars would not appear even after the 2nd row of tiles would get cut off. Setting that HBox again in a Stackpane which I then put in a ScrollPane does the trick. Atleast until I resize the width of the window to be so small the tilepane has to align the tiles anew and a 3rd or more rows appear.

Here is the basic programm:

    public class Main extends Application {          @Override        public void start(Stage stage) {              TilePane tilePane = new TilePane();            tilePane.setPadding(new Insets(5));            tilePane.setVgap(4);            tilePane.setHgap(4);            tilePane.setPrefColumns(4);            tilePane.setStyle("-fx-background-color: lightblue;");              HBox tiles[] = new HBox[8];            for (int i = 0; i < 8; i++) {                tiles[i] = new HBox(new Label("This is node #" + i));                tiles[i].setStyle("-fx-border-color: black;");                tiles[i].setPadding(new Insets(50));                tilePane.getChildren().add(tiles[i]);            }              HBox hbox = new HBox();            hbox.setAlignment(Pos.CENTER);            hbox.setStyle("-fx-background-color: blue;");            hbox.getChildren().add(tilePane);              StackPane stack = new StackPane();            stack.getChildren().add(hbox);              ScrollPane sp = new ScrollPane();            sp.setFitToHeight(true);            sp.setFitToWidth(true);            sp.setContent(stack);              stage.setScene(new Scene(sp, 800, 600));            stage.show();        }          public static void main(String[] args) {            launch();        }    }

I managed to achieve my wanted behaviour, but its more of a really dirty hack. I added a listener to the height and width of my HBox containing the TilePane and assumed that when the height changes its because the width got so small that a column was removed and a new row added. To be able to do that I put the HBox in a VBox so that it would not grow withe the height of the ScrollPane. For the width I simply calculated if there is space to display another colum (up to 4), to do it.

Here are the changes:

    public class Main extends Application {          private boolean notFirstPassHeight;        private boolean notFirstPassWidth;          @Override        public void start(Stage stage) {              TilePane tilePane = new TilePane();            tilePane.setPadding(new Insets(5));            tilePane.setVgap(4);            tilePane.setHgap(4);            tilePane.setPrefColumns(4);            tilePane.setStyle("-fx-background-color: lightblue;");            // I took the value from ScenicView            tilePane.prefTileWidthProperty().set(182);              HBox tiles[] = new HBox[8];            for (int i = 0; i < 8; i++) {                tiles[i] = new HBox(new Label("This is node #" + i));                tiles[i].setStyle("-fx-border-color: black;");                tiles[i].setPadding(new Insets(50));                tilePane.getChildren().add(tiles[i]);            }              ScrollPane sp = new ScrollPane();            sp.setFitToHeight(true);            sp.setFitToWidth(true);              StackPane stack = new StackPane();              VBox vbox = new VBox();            vbox.setStyle("-fx-background-color: red");              HBox hbox = new HBox();            hbox.setAlignment(Pos.CENTER);            hbox.setStyle("-fx-background-color: blue;");            hbox.getChildren().add(tilePane);            notFirstPassHeight = false;            notFirstPassWidth = false;            hbox.heightProperty().addListener((observable, oldValue, newValue) -> {                if (oldValue.doubleValue() < newValue.doubleValue() && notFirstPassHeight) {                    tilePane.setPrefColumns(tilePane.getPrefColumns() - 1);                    stack.requestLayout();                }                notFirstPassHeight = true;            });            hbox.widthProperty().addListener((observable, oldValue, newValue) -> {                 if (oldValue.doubleValue() < newValue.doubleValue() && notFirstPassWidth && tilePane.getPrefColumns() <= 3                         && (newValue.doubleValue() / (tilePane.getPrefColumns() + 1)) > tilePane.getPrefTileWidth()) {                     tilePane.setPrefColumns(tilePane.getPrefColumns() + 1);                     stack.requestLayout();                 }                 notFirstPassWidth = true;            });              vbox.getChildren().add(hbox);              stack.getChildren().add(vbox);              sp.setContent(stack);            stage.setScene(new Scene(sp, 800, 600));            stage.show();        }          public static void main(String[] args) {            launch();        }      }

However this approach requires me to

> 1.Know the Width of the Tiles in the Tilepane.

> 2.Consider Padding and Gap between tiles for my calculation to be accurate, which I dont do in my example.

And its just not a good approach at any rate if you ask me. Too complicated a process for such a basic thing. There has to be a way better and simple way to accomplish complete resizability and the wanted behaviour with TilePanes in a ScrollPane.

Added requestLayout call in Listener, scrollbars dont appear otherwise.

Tagged:
This discussion has been closed.