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:

12 Responses to “phone like scrollable listview with JavaFX”

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

    • 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. 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

    • 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. 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!

  4. Tom, thank you very much!!!

  5. could you please public your source code?

Trackbacks/Pingbacks

  1. Java desktop links of the week, February 21 | Jonathan Giles - February 21, 2012

    […] Schindl blogged about creating a phone-like scrollable list with velocity and friction. You can find the code for the FlingPane on […]

  2. JavaFX links of the week, February 21 // JavaFX News, Demos and Insight // FX Experience - February 21, 2012

    […] Schindl blogged about creating a phone-like scrollable list with velocity and friction. You can find the code for the FlingPane on […]

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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

Follow

Get every new post delivered to your Inbox.

Join 770 other followers

%d bloggers like this: