JavaFX - Flat Carousel


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

<script src="http://dl.javafx.com/1.2/dtfx.js"></script> <script src="http://javafxdemos.googlecode.com/hg/resource/FlatCarousel/FlatCarousel.js"></script>


To launch click on above image or

The HBox content is clipped using ClipView layout. When user drags the node, the 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..

Comments:

hi

thanks for taking into account the request.

1. shouldn't the scrolling be in the other direction ? (like in the example with the ClipView and the Image)

2. why did you use Container as base class (for Item and Carousel) instead of a CustomNode ?

wouldn't it have been more clear to use custom node, having to provide an implementation for the function create(), instead of having to overide the function doLayout() ?

3. could you update the carousel with a more advanced feature ? i'm refering to inertia, not flat scrolling (like in kinetic scrolling used very often for cellphones with touchscreen)

Posted by belun on March 08, 2010 at 10:29 AM IST #

-- from belun --

hi

thanks for taking into account the request.

1. shouldn't the scrolling be in the other direction ? (like in the example
with the ClipView and the Image)

------

I just did it the same way as ScrollBar knob. When you pull down the knob, the list moves in opposite direction :)

------

2. why did you use Container as base class (for Item and Carousel) instead of a
CustomNode ?

------

Its resizable, easy to manage and reduce one level Node hierarchy.

------

wouldn't it have been more clear to use custom node, having to provide an
implementation for the function create(), instead of having to overide the
function doLayout() ?

------

create() need to return another Node and then I need to handle layout in another Node (eg: Panel). Here I can do all these in one class.

Also Container is Resizable, so Layout will take care of notifying and resizing the Node.

------

3. could you update the carousel with a more advanced feature ? i'm refering to
inertia, not flat scrolling (like in kinetic scrolling used very often for
cellphones with touchscreen)

The scroll effect is determined purely by the Interpolator used for Timeline. I need to search for better one.

------

Posted by Rakesh Menon on March 09, 2010 at 06:05 AM IST #

I'm getting too many spam, so turned on "Comment Moderation", but that is even more complicated, I need to selectively approve. I deleted some comments by mistake, hence re-posting the same.

Posted by Rakesh Menon on March 09, 2010 at 06:25 AM IST #

instead of using the function setInitialX to start the carousel animation - timeline.playFromStart() - couldn't you have used the post-init section ?

Posted by belun on March 09, 2010 at 07:40 AM IST #

@belun It can be done, I just thought of starting animation after Stage is shown.

Posted by Rakesh Menon on March 09, 2010 at 08:07 AM IST #

Hi,

Im getting Exception in trigger: com.sun.javafx.runtime.AssignToBoundException: Cannot assign to bound variable

when end of Carousel is reached.
How to resolve this exceprion??

Posted by jiggy on April 05, 2010 at 10:19 AM IST #

@Jiggy I didn't do proper boundary checks in onMouseDragged. Now its updated. You may have to clear cache to get latest version. Refer to Carousel.fx source code.

Posted by Rakesh Menon on April 05, 2010 at 10:45 AM IST #

Thank you!!!

Posted by jiggy on April 06, 2010 at 07:11 AM IST #

Post a Comment:
Comments are closed for this entry.
About


The views expressed on this blog are my own and do not necessarily reflect that of my organization

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today