Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Adobe AIR Development

Reply
Highlighted
Developer
Posts: 39
Registered: ‎01-13-2011
My Device: Not Specified

Nested scrollPanes, each with different scrollDirections not working

Been poring over documentation and exploring the ScrollPane class for a bit now and can't see any elegant solution to make this work. I have a scrollPane that scrolls vertically, populated with multiple instances of content that can scroll horizontally. Instead of working as expected, scrolling vertically activates the horizontal scrollPane at the position at which the scroll starts, as well as scrolling vertically. The horizontal scrollPane gets stuck, having been triggered by the vertical drag. Then, any click to get rid of the horizontal scrollPane being in scroll mode registers as the beginning of a scroll in the vertical scrollPane.

 

Has anyone figured out a solution to handling nested scrollPanes with different scroll directions? I'm at the point right now where I think it would be a better idea to wait for the SDK to mature instead of trying to hack a workaround.

 

Thanks in advance.

Developer
Posts: 168
Registered: ‎01-13-2011
My Device: Not Specified

Re: Nested scrollPanes, each with different scrollDirections not working

You are in luck.  I have tackled this very issue.  The trick is that onMouse_Down on the "sub"scrollPane, you need to disable (read: scrollPane.enabled = false) the scrollPane below.  Then on mouse_up, you just re-enable it. 

 

You will find that you need to disable scrollPanes in many instances, such as when you have a Scroller or DropDownBox on top of a scrollPane.

 

Let me know if this works out for you.

 

Developer
Posts: 39
Registered: ‎01-13-2011
My Device: Not Specified

Re: Nested scrollPanes, each with different scrollDirections not working

Thanks for your reply. Unfortunately, I don't think I'm understanding your solution.

 

I tried listening to MouseEvent.MOUSE_DOWN on the below scroll pane and disabling that same scrollPane when that event listener triggered. Likewise, I connected a listener on the below scrollPane (the same one) to MouseEvent.MOUSE_UP and to a function which enabled the same scrollPane.

 

This allows the above scrollPane with no connected event listeners (the vertical one) to scroll properly. However, all that happens when I try to scroll horizontally (on one of the below scrollPanes) is that the scroll bar triggers. The scroll bar remains there indefinitely - even on subsequent clicks or attempted drags on a given horizontal, below scrollPane, the scroll bar does not go away. Likewise, scrolling vertically triggers the scroll bar on the horizontal, below scrollPane in the section of the screen where the scroll originated. It is impossible to move any of the horizontal scrollPanes.

Developer
Posts: 168
Registered: ‎01-13-2011
My Device: Not Specified

Re: Nested scrollPanes, each with different scrollDirections not working

Let me try to break down the problem so that we can find a solution.

There are two scrollpanes: parent and child.

I have assumed, perhaps incorrectly that you want one of them but never both of them to scroll at any one time.

To this end, I propose that when a mouse down is registered on a child ("child.mouseDown") you disable the parent so that the child can move and the parent does not.

Then when the stage registers a mouse up ( because they could and probably have moved their finger off of the child, you re-enable the parent.

Let me know if this is the solution you are looking for and if I have characterized the what you are trying to do correctly.

Developer
Posts: 508
Registered: ‎01-19-2011
My Device: My Trusty Red Plane
My Carrier: Outer Space

Re: Nested scrollPanes, each with different scrollDirections not working

try this on the scrollpanes which are on top

 

 

			//to prevent the underlying scrollpane from being scrolled, the mouseevent is stopped in propagation
			this.addEventListener(MouseEvent.MOUSE_DOWN, function(e:Event):void
			{
				e.stopPropagation();
				e.stopImmediatePropagation();
			});

 

 

-----------------------------------------------------------------------
I'm a bird from outer space. But I'm not flappy o.o
Developer
Posts: 168
Registered: ‎01-13-2011
My Device: Not Specified

Re: Nested scrollPanes, each with different scrollDirections not working

@pyth.  I tried that option before using the enabled= false but it doesn't seem to work. I think the scrollpane may be capturing mouse events during the capture phase (bottom-up instead of top down) so that the child scrollpane is not actually the first to receive.  
-Nick
Developer
Posts: 39
Registered: ‎01-13-2011
My Device: Not Specified

Re: Nested scrollPanes, each with different scrollDirections not working

[ Edited ]

@pyth: I had previously tried that option as well, no dice.

 

@EraserX: Thanks for your explanation. Earlier this morning I figured out that that is what you meant. I implemented your solution, which works; provided that there is a space within the parent scrollPane where no child scrollPane exists. My problem lies in that the parent scrollPane is nothing more than a container for numerous child scrollPanes, which fill the parent scrollPane end to end. Whenever a scroll is initiated, the mouse_down event handler set on the child scrollPane below the mouse/touch point triggers, preventing scrolling of the parent scrollPane. 

 

To verify that this was the problem, I quickly modified the child scrollPanes to leave a space on the right hand side of the parent scrollPane. As expected, I can scroll the parent scrollPane by dragging in this empty space. Likewise, I can scroll the child scrollPane (and the child scrollPane only!) by dragging within that scrollPane's bounds. 

 

I would imagine that to enable scrolling in both panes in my example will need input buffering of some sort. In the attached mouseDown event handler, you could conditionally enable the appropriate scrollPane once you have determined the direction of the movement. The problem there seems to lie within the fact that some user input will be dropped during the period of time where both scrollPanes are disabled and you are determining which scrollPane should be enabled. One would have to store the input the user provided that was captured during the short time that the desired scroll direction was being determined, and feed it back into the scroll pane. 

 

I was searching the forum for more internal details of scrollPane and came across this thread, discussing nested scrollPanes: http://supportforums.blackberry.com/t5/Tablet-OS-SDK-for-Adobe-AIR/Scroll-Pane-within-Scroll-Pane/m-... 

Developer
Posts: 168
Registered: ‎01-13-2011
My Device: Not Specified

Re: Nested scrollPanes, each with different scrollDirections not working

Yea I think a buffer is probably the best solution. Otherwise you could allocate some space on the parent designated as a handle of sorts for the user to drag on to scroll the parent.