phone like scrollable listview with JavaFX


I guess all users of smartphones (Android, iPhone, …) know the scrollable lists you have there. While working on the example application for EclipseCon North America I thought it might make my example application look cooler if I could have it such an list.

After hacking the whole sunday I have an initial running version. Here’s an example how to use it:

FlingPane pane = new FlingPane();
pane.setFlingDirection(FlingDirection.VERTICAL);
		
VBox box = new VBox();
		
for( int i = 0; i < 30; i++ ) {
  box.getChildren().add(createMailItem("Sender " + i, "Title " + 1, "Lorem ipsum lorem ipsum lorem ipsum lorem ipsum ..."));
}
		
pane.setContent(box);

and I’ve recorder a small video to see it in action:

This entry was posted in e(fx)clipse. Bookmark the permalink.

16 Responses to phone like scrollable listview with JavaFX

  1. Farrukh says:

    Excellent work!. Is this scrolling only applicable to ListView or can we use it in Table and Trees?

    • Tom Schindl says:

      The scrolling is realized through a Pane similar to how ScrollPane is working. So it is applicable to any node. I would not suggest though to use it for Table/Tree/ListView because this would make them render all their items/rows which is not what you want because you loose their performance gains by reusing Nodes and freeing memory. The main idea for the FlingPane is to act as a replacement for ScrollPane.

  2. poussinbleu says:

    Hello,
    Really great !! Do you plan also to implement the behaviour of the titles/categories in the list like the letters in the iPhone contact list ?

    Thanks

    • Tom Schindl says:

      The current control only mimics a ScrollPane without and one can use it to construct something similar to a iPhone-List – to get a list like you want it I think the best would be to enhance the current list-widget. The reason for this is that List/Table perform a lot better with a large amount of data. Anyways writing a iphone list contact list is not really though but currently not on schedule. My next plan is to add a Swip-Widget to create a Image-Gallery control.

  3. Pingback: Java desktop links of the week, February 21 | Jonathan Giles

  4. Pingback: JavaFX links of the week, February 21 // JavaFX News, Demos and Insight // FX Experience

  5. framas says:

    Nice 🙂
    I’ve also done this a few months ago for Swing JScrollpanes with JxLayer. I’ve used like you the Velocitytracker from the android gesture stack :-), too. But I have not so nice stop transitions at the end of the list. Instead I added other gestures like long press and double tap.

    Keep on!

  6. Ilya says:

    Tom, thank you very much!!!

  7. Tobi says:

    could you please public your source code?

  8. kehoe says:

    hello Tom, Could you tell how I can set TilePane’s width to fit the FlingPane? thanks.

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.