1

I'm making a basic dice app, and I'd like to display dice results in a FlowPane because it automatically adjusts the "columns" as the window is sized/resized horizontally. The problem with this solution is that the results need to be scrollable, and ScrollPane performance seems completely lackluster in Gluon on android.

Currently, for the desktop version (regular JavaFX) I use a FlowPane in a scroll pane, and for the mobile version I use a CharmListView. But I'd like to be able to use a good-performing grid on mobile, too.

I'd like to be able to have the image on the right be more like the one on the left, without destroying scrolling performance on mobile. Desktop version is on the left, mobile version on the right

Does anyone know of any tools to do this without having to get the width of the window, calculate how many columns of dice I can have, and populating the CharmListView with HBoxes with the number of columns calculated?

Everything in my project is Gluon 3. I wonder if it just has a problem with a bunch of image boxes.

My code is roughly shaped like this: 

private Image image1 = new Image("/Dice/one.png");
private Image image2 = new Image("/Dice/two.png");
private Image image3 = new Image("/Dice/three.png");
private Image image4 = new Image("/Dice/four.png");
private Image image5 = new Image("/Dice/five.png");
private Image image6 = new Image("/Dice/six.png");

ArrayList<Image> images = new ArrayList<>();
 images.add(image1);
 images.add(image2);
 images.add(image3);
 images.add(image4);
 images.add(image5);
 images.add(image6);

 FlowPane pane = new FlowPane();
 pane.prefWidthProperty().bind(widthProperty());
 ScrollPane scrollPane = new ScrollPane(pane);
 scrollPane.setHbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);

 for(int i = 0; i < 1000; i++) {
     pane.getChildren().add(new ImageView(images.get(random.nextInt(6))));
    }

 setCenter(scrollPane);'

This is all inside my basic view class. Performance is absolutely terrible, even with just around ~100 dice. I'm mostly making this for tabletop war games, and I play a horde army... so more than 100 dice is not uncommon for me. The devices I've done it on are reasonably high-end, too: Samsung Galaxy S7 and a Nexus 9.

Daniel
  • 71
  • 4
  • As you can see in the [javadoc](http://docs.gluonhq.com/charm/javadoc/3.0.0/) for Gluon Charm 3.0.0 there is a `GridLayout` class. Unfortanetly, there are no samples for it, and I haven't been able to get it working. While I had a lot of trouble with the `ListView` performance (http://stackoverflow.com/questions/36819513/poor-listview-performance-on-gluon), the `ScrollPane` performance seems to be absolutely acceptable. I use a `FlowPane` e.g. inside a `ScrollPane` to display some tags and even on a very old phone there is no performance problem. How are the dices created / added? – jns Jun 06 '16 at 03:32
  • Have you already tried the scrolling performance with the new Gluon Mobile 3.0.0 version? As Gluon stated in their release announcement, there is is supposed to be a "much smoother scrolling in all UI controls when based on touch events". – jns Jun 06 '16 at 03:43
  • My project was using Gluon 3 already. I've updated the original question to include code detailing how the images were loaded and added to a FlowPane. – Daniel Jun 09 '16 at 18:15
  • Maybe it helps if you refactor the `ImageViews` to a `Dice`class which represents the dice as a `SVGPath`. Instead of the `FlowPane` you can try to use the `ButtonGridPane` from http://stackoverflow.com/questions/36831753/tilepane-with-automatically-stretching-tiles-in-javafx/36831899#36831899 (though you still would need to know the number of columns) and see what the performance is like. – jns Jun 09 '16 at 19:43

0 Answers0