Smooth Scrolling Flex List « benclinkinbeard.com

Smooth Scrolling Flex List

03.05.09Posted by Ben in AS3, FlexComments Off

Smooth scrolling is a pretty common request for the List component in Flex. Flex Team engineer Alex Harui provided a working, albeit unofficial, example a while back. Michael Ritchie recently ported that example to HorizontalList. I’ve been sitting on some code for a while now and Michael’s tweet on the topic convinced me to finally post my take on the subject.

While in San Francisco for Adobe MAX last November, I volunteered to help out another team from Universal Mind on a project. The task I was assigned was to make a smooth scrolling List. The List had to support variable row heights, which meant Alex’s implementation wasn’t an option. The List also had to support drag and drop, which meant writing my own list component from scratch wasn’t feasible either. I was basically left with only one option: cheat. What I ended up doing was to create a List that would ensure that it was always tall enough to create and show all of its renderers. Wrapping that in a Canvas would then simulate smooth scrolling by utilizing the Canvas’s scroll mechanism instead of the List’s.

Check out the demo (view source enabled) or go straight to the source.

It would obviously be a bad idea to use this if your dataProvider had a ton of items in it, but for most use cases it should work pretty well. The code is pretty straightforward and heavily commented so I won’t rehash everything here. If you have questions feel free to post a comment.

Enjoy!

Both comments and pings are currently closed.

http://www.meutzner.com Brendan

Dude… you’re right… that is SOOO cheating
http://www.tink.ws/blog Tink

Here’s an example of ours. It does the same thing of re-using item renderers so it can handle long lists with complex item renderers.

There’s still some further features we could add in the future and some further optimizations, but it fills our requirements for the meantime (we’ve even sold it on a couple of times), so get away from the bad user experience default Flex list.

You can see an example here (and I’ve edited it a little giving the option to extend the scrollRect so you can see the item renderers outside of the usual visible area), no source though sorry .
http://www.returnundefined.com/ Ben Clinkinbeard

Very cool Tink! Though now I am going to have to figure out how you did it and copy your idea.
Rob Malko

Hi Ben,

Wonderful implementation. Trying to implement I had to change the paddingBottom to “-2″ to pick up all of my itemRenderers (not sure why) and it works fine except for load for load. During the initial load of the dataProvider it’s very jumpy and takes a few seconds for the ScrollBar to take the correct position. However, after refreshing the data the second time, it works very smoothly.

Any ideas on where I should be looking to make the initial load a little less “rigid”.

Cheers!
karim

Hi Ben,

thx for this great post,

See Ben, as you know we can use the repeater component to get this “Smooth Scrolling”, but the probleme whene we use the repeater component we lost big part of the application performence.. so Adobe propose the List component to get the perfect perfermence with the visualisation of logue and big data..

But your component have the same performance as a repeater component,
plz test your component perfermence and you will see this “error”..

Karim.
http://www.returnundefined.com/ Ben Clinkinbeard

Hi Karim,

I think I made it pretty clear that this component is only useful for small data sets. It wasn’t my intention to create a full fledged smooth scrolling List component, just to implement the specific functionality needed for a project.

Thanks,
Ben
Alex Galays

Arg, this is exactly like using a VBox + repeater as there is no renderer recycling. ( I know you are aware of that ). But what’s the point? I would even prefer to use the repeater approach as it’s much simpler and ligher.

Hopefully Flex4 will provide a fully featured List with smooth scrolling.
http://www.returnundefined.com/ Ben Clinkinbeard

Hi Alex,

This approach gets you drag and drop capabilities, a Repeater does not.

Thanks,
Ben
Rich

Three things:

1. This is awesome. Thank you!
2. My tests suggest that item renderers ARE, in fact, recycled… Your experience has been different?
3. I’ve noticed if I add items to the list, the scrollbar gets smaller as the list gets longer. However, if I remove items from the list, the scrollbar doesn’t resize, and the list doesn’t get any shorter (whitespace is left where the removed items used to be)… Any thoughts?

Thanks!
-Rich
Rich

wrt #3 above, I found the problem. Replace:

combinedRendererWidth += columnWidth;

with:

if(renderer!=null)
combinedRendererWidth += columnWidth;

Cheers
Ben

1. Thanks, you’re welcome.
2. Not sure how/why they would, but I didn’t verify it either way.
3. Cool, glad you got it working.
dl

Hm thats not smooth scrolling, it’s scrolling.
If it would be animated, than, it would be smooth, this is just a step back.
Ben

You’re obviously not familiar with the List component in Flex, because if you were you’d know it scrolls one item at a time. It cannot be smoothly transitioned, or transitioned at all really, to display part of an item renderer. If this component were animated, *then* it would be animated. Animation is not the same thing as smooth scrolling.

My suggestion to you is to take the time you currently spend leaving snide, inaccurate and poorly written comments and invest it in some grammar lessons. To start you can learn the difference between then and than, and go easy on the commas. Good luck with that.
Conor

Ben,

have you ever been able to port something like this to a tile list? It’s a great component and scrolls very smoothly (though not according to some apparently ha ^). It’s a real pain to be honest, as the lack of smooth scrolling is probably something that Adobe should have dealt with quite some time ago officially, and in a lot of cases it is a real giveaway that flex has been used to create an app or website.

Thanks,
Conor
Conor

No need,

I actually just changed the extension in Alex’s component and made it extend TileList instead of List.

Thanks again for this component,
Conor
http://www.facebook.com/ephraimt Ephraim Tabackman

Conor: Just changing the parent class to TileList is not enough. You will not get multiple columns. Here is the full code for smooth scrolling TileList:nnnnpackage com.benclinkinbeard.controls{timport flash.display.DisplayObject;ttimport mx.controls.TileList;timport mx.core.Container;timport mx.core.ScrollPolicy;timport mx.core.mx_internal;timport mx.events.FlexEvent;ttpublic class SmoothScrollingTileList extends TileListt{ttpublic function SmoothScrollingTileList()tt{tttsuper();tttttt// required to ensure all renderers get createdtttsetStyle( "paddingBottom", -1 );ttt// parent container will handle scrollingtttverticalScrollPolicy = ScrollPolicy.OFF;ttttttaddEventListener( FlexEvent.UPDATE_COMPLETE, handleUpdateComplete );tt}ttttprivate function handleUpdateComplete( event:FlexEvent ):voidtt{tttvar combinedRendererHeight:Number = 0;ttttttvar renderers:Array = renderersArray;ttttttif (renderers.length > 0)ttt{ttttcombinedRendererHeight = Math.ceil(renderers.length / columnCount) * (renderers[0] as DisplayObject).height;ttt}tttttt// list needs to be at least 10 pixels tallttt// and always needs to be 10 pixels taller than the combined height of the rendererstttheight = combinedRendererHeight + 10;tttttt// need to shrink list width when canvas has a scrollbar so the scrollbar doesn't overlap the listtttwidth = ( Container( parent ).maxVerticalScrollPosition > 0 ) ? parent.width - 16 : parent.width;tt}ttttprivate function get renderersArray():Arraytt{tttvar rawArray:Array = mx_internal::rendererArray;tttvar arr:Array = new Array();tttttttttfor each(var obj:Object in rawArray)ttt{ttttvar rendererArray:Array = obj as Array;ttttttttif(rendererArray != null)tttt{tttttfor each (var renderer:Object in rendererArray)ttttt{ttttttarr.push(renderer);ttttt}tttt}ttt}ttttttreturn arr;tt}t}}nn
http://www.facebook.com/ephraimt Ephraim Tabackman

In addition to subclassing TileList, you also need to make some changes to the code in order to get multiple columns.nnpackage com.benclinkinbeard.controls{timport flash.display.DisplayObject;ttimport mx.controls.TileList;timport mx.core.Container;timport mx.core.ScrollPolicy;timport mx.core.mx_internal;timport mx.events.FlexEvent;ttpublic class SmoothScrollingTileList extends TileListt{ttpublic function SmoothScrollingTileList()tt{tttsuper();tttttt// required to ensure all renderers get createdtttsetStyle( “paddingBottom”, -1 );ttt// parent container will handle scrollingtttverticalScrollPolicy = ScrollPolicy.OFF;ttttttaddEventListener( FlexEvent.UPDATE_COMPLETE, handleUpdateComplete );tt}ttttprivate function handleUpdateComplete( event:FlexEvent ):voidtt{tttvar combinedRendererHeight:Number = 0;ttttttvar renderers:Array = renderersArray;ttttttif (renderers.length > 0)ttt{ttttcombinedRendererHeight = Math.ceil(renderers.length / columnCount) * (renderers[0] as DisplayObject).height;ttt}tttttt// list needs to be at least 10 pixels tallttt// and always needs to be 10 pixels taller than the combined height of the rendererstttheight = combinedRendererHeight + 10;tttttt// need to shrink list width when canvas has a scrollbar so the scrollbar doesn’t overlap the listtttwidth = ( Container( parent ).maxVerticalScrollPosition > 0 ) ? parent.width – 16 : parent.width;tt}ttttprivate function get renderersArray():Arraytt{tttvar rawArray:Array = mx_internal::rendererArray;tttvar arr:Array = new Array();tttttttttfor each(var obj:Object in rawArray)ttt{ttttvar rendererArray:Array = obj as Array;ttttttttif(rendererArray != null)tttt{tttttfor each (var renderer:Object in rendererArray)ttttt{ttttttarr.push(renderer);ttttt}tttt}ttt}ttttttreturn arr;tt}t}}
http://www.facebook.com/ephraimt Ephraim Tabackman

Argh. How to get nice formatted code into a Disqus post?