JavaFX – Flat Carousel

Bookmark and Share

There was a request to write a Flat Carousel, here is an attempt using HBox, ClipView and Timeline.

To launch click on above image or

The HBox content is clipped using ClipView layout. When user drags the node, ClipView.clipX is updated accordingly using a Timeline + EASEOUT Interpolator. We may use custom Interpolator as shown in SpringAnimation sample. Two buttons (vertical bars) are provided on both sides to scroll as per the width of the Carousel.

Please try it out and let me know feedback..


About Rakesh Menon

13 Responses to JavaFX – Flat Carousel

  1. Mirko Bonadei says:

    That’s very nice man… A good work…

  2. Dharma says:

    Really amazing…….

  3. Pingback: JavaFX links of the week, March 8 // JavaFX News, Demos and Insight // FX Experience

  4. Rakesh Menon says:

    Thanks Mirko Bonadei & Dharma..

  5. Guillaume says:

    Nice work!

    This is a nice example how to have dynamic applications.

    Here I’m working on a multicolumn listview. Also with a ClipView, but with a Scrollbar instead of dragging.
    The only big issue I see with this and common with your application, is that this asking lot heap memory and lot of repainting wath isn’t very cpu friendly.

    I know like outlook, you can scroll down. But it’s only creating the lines when you release your mouse.
    Do you have any experience in such application?

    Some improvements possible for your app:
    – When performing the transition, make sure you can’t click anymore on the buttons.
    – When running afther 50, I’ve retrieve this error: number Exception in trigger:
    com.sun.javafx.runtime.AssignToBoundException: Cannot assign to bound variable

  6. Rakesh Menon says:

    @ Guillaume Thanks!.. As of now I have used physical nodes for each of the item, which is not efficient. There is concept of virtual cell available in next release, that will address these issues.

    Thanks for the improvement tips, I didn’t check for max bounds, need to clamp if dragged beyond max width. As of now I’m checking only for min bounds.

    > I know like outlook, you can scroll down. But it’s only creating the lines
    > when you release your mouse. Do you have any experience in such
    > application?

    Sorry, I didn’t clearly get the requirement, can you map it back to any of controls listed here?

    • Guillaume says:

      I’m interested of this new “virual cell”! Hope this can save lot of performance for my applications.

      For my question, you can map it to:
      25. Table/ Data Grid ( scrolling, editable, grouped)
      >> This but not grouped.

      In fact a simple Table with scrolling.

      In my case is every cell of the table a customNode.
      So if you have about 200lines and 5 columns = (200*5) = 1000 customNodes initiated.
      That can run out in heap troubles and cpu intensive!

      Even if you only can show about 20lines and 5columns in your ClipView at the time!
      So in theory you only should have (20*5) = 100 customNodes initiated on your screen.

      I’ve read once that outlook only initiate the cell’s who should be visible on your screen.
      This initialisation happens when your mouse is released from the scrollbar.

      So, I was wondering if you have experience on only initiate the visible Nodes in the ClipView?

  7. Guillaume says:

    The best example I can give is with this link:

    Any idea’s how to create something like this?

  8. Rakesh Menon says:

    @Guillaume I don’t have a straight forward solution for 1.2.. I’ll be able to discuss more after next release.. You may also refer to below sample for some ideas, but its way too old..

  9. Moses says:

    I am developing the mobile application based on JavaFX. On the main page, I have a Carousel with elements. The idea is that when a user selects one of the items in the carousel, a scene is loaded on the stage based on the carousel title. Can I access carousel in a group?

    • Rakesh Menon says:

      @Moses I suggest to replace the content of Scene rather than Scene itself. You may be having some elements which are common across all screens of your application. Switching Scene introduced some flicker and didn’t provide good user experience.

      “Can I access carousel in a group?” Sorry, I didn’t understand the question, you meant to ask if you can add Carousel to a Group? Yes.. You will have to set width and height of Carousel.

  10. neha says:

    hey i have a very stupid doubt . Can u plz tell me from where i can download the javafx code for this one(flat Carousel).

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

%d bloggers like this: