Comments on: Smooth Scrolling HorizontalList

By: Vikram

Vikram — Tue, 15 Jun 2010 11:43:54 +0000

Hi i am using the same logic for Image gallery and created Horizontal List. But i am rendering the images dynamically and images get streamed when i give path of image but some images are missing from the Horizontal List when i scroll the Horizontal Bar.

Kindly help me if u have any idea.

Thanks

By: Richard

Richard — Tue, 16 Mar 2010 16:34:19 +0000

Rich (and Mister, and Ben),

Thank you all for this all this great inventiveness and improvements. One more (very slight) one to add to Rich’s mods…

Allow for switching-off of horizontal scroll bars, via setting horizontal scroll policy off on parent container:

change:

// need to shrink list height when canvas has a scrollbar so the scrollbar doesn’t overlap the listheight = ( Container( parent ).horizontalScrollPolicy = ScrollPolicy.OFF ) ? parent.height – 16 : parent.height;

to:

// need to shrink list height when canvas has a scrollbar so the scrollbar doesn’t overlap the list
// added detection to avoid shrink when horizontalScrollPolicy of parent container is set to “off”
height = ( Container(parent).maxHorizontalScrollPosition > 0 && !Container(parent).horizontalScrollPolicy == ScrollPolicy.OFF ) ? parent.height – 16 : parent.height;

(the negation of ScrollPolicy.OFF after the [&&] seems to be necessary for an unambiguous detection of scroll policy)

Thank you gentlemen!

Richard

By: JDavis

JDavis — Thu, 11 Mar 2010 06:10:29 +0000

Thanks much for this info – the first class SmoothHorizontalScrollList works great.

To hide the scrollbars I set the horizontalScrollBar visible & includeInLayout properties to false. It doesn’t show up anymore, and things look ok for me :

1
2
3
4
5
6
7
8

override protected function configureScrollBars():void
{
super.configureScrollBars();
if (horizontalScrollBar) {
horizontalScrollBar.includeInLayout=horizontalScrollBar.visible=false;
horizontalScrollBar.lineScrollSize = .125; // should be inverse power of 2
}
}

I changed the mousewheel so that it moves incrementally as well:

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

override protected function mouseWheelHandler(event:MouseEvent):void
{
// Scrolldirection and distance calculation
if (horizontalScrollBar) {
var scrollAmount:Number = horizontalScrollBar.lineScrollSize * event.delta * -1.0;

var oldPosition:Number = super.horizontalScrollPosition;
var newPosition:Number = super.horizontalScrollPosition + scrollAmount;

if (newPosition < 0)
newPosition = 0;
else if (newPosition > maxHorizontalScrollPosition)
newPosition = maxHorizontalScrollPosition;

horizontalScrollBar.scrollPosition = newPosition;

var scrollEvent:ScrollEvent = new ScrollEvent(ScrollEvent.SCROLL);
scrollEvent.detail = event.delta.toString();
scrollEvent.direction = ScrollEventDirection.HORIZONTAL;
scrollEvent.position = newPosition;
scrollEvent.delta = newPosition - oldPosition;

horizontalScrollBar.dispatchEvent(scrollEvent);
}
}

By: Rich

Rich — Thu, 04 Mar 2010 20:56:54 +0000

Item removal and drag indicator bugs fixed. Source:

http://pastie.org/854470

By: Rich

Rich — Thu, 04 Mar 2010 20:32:01 +0000

wrt my previous post, I found the problem. Replace:

combinedRendererWidth += columnWidth;

with:

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

Cheers

By: Rich

Rich — Thu, 04 Mar 2010 20:22:05 +0000

First of all, great work on this! Very helpful indeed – thank you.

Like Victor (above), 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

By: Jonkemon

Jonkemon — Tue, 23 Feb 2010 12:19:41 +0000

Hey Mister!

In reference to your ‘Another Solution’ section, I tried this for a collection of images rather than text as per your example, and as you found with rendering the entire list, I also had to wait for the graphics to draw (Spectrum 48K loading style, just a bit quicker!). After a little tinkering though, I found that you can avoid this problem by specifying a rowheight on the component.

Lastly, thanks for your research and documentation, really helpful. Just surprised that there wasn’t an easier documented way of doing this with Flex 3.5.

By: Mister

Mister — Thu, 11 Feb 2010 23:49:49 +0000

Sounds like the project is hosed. Try creating a new Flex project and recreating the example with your own MXML and class files. You can just view source of the example to see the code.

By: Erica

Erica — Tue, 09 Feb 2010 23:32:03 +0000

Thanks for this solution. I am trying to make use of it in a current project. However, it seems that flex isn’t finding the HorizontalList class. I added the src folder containing the mx libraries, to the source path, thinking this would solve the problem, but instead it added new errors, i.e. “Unable to resolve resource bundle “collections” for locale “en_US”.

This is really frustrating as I assumed the HorizontalList would naturally be included in the sdk (actually it is. the compiler just isn’t seeing it) and I’m not seeing any solutions to this problem after hours of googling and testing. Any ideas?

By: Erica

Erica — Tue, 09 Feb 2010 23:30:19 +0000