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();
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 ..."));

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

14 thoughts on “phone like scrollable listview with JavaFX

  1. Farrukh February 13, 2012 / 2:36 pm

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

    • Tom Schindl February 13, 2012 / 3:13 pm

      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 February 14, 2012 / 8:19 am

    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 ?


    • Tom Schindl February 14, 2012 / 9:35 am

      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. framas February 21, 2012 / 5:57 am

    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!

  4. Ilya June 1, 2012 / 6:54 am

    Tom, thank you very much!!!

  5. Tobi February 24, 2014 / 11:44 am

    could you please public your source code?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s