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 thoughts on “phone like scrollable listview with JavaFX

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

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

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

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

      1. Hey Tom, I couldn’t find the source code of the FlingPane in above link. If you could mail me the class file or provide the link of source that would be big help. Thnx (hirandsfxsl@gmail.com)

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