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:

About these ads

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 666 other followers

%d bloggers like this: