how to change IViewport verticalScrollPosition dynamicly - flex4

Question

I'm trying to scroll VGroup with scroller:
<s:Scroller id="scroller" width="100" height="100">
<s:VGroup id="vp" width="100%" height="100%">
<my:TripView id="one"/>
<my:TripView id="two"/>
// if any more TripView.....
</s:VGroup>
</s:Scroller>
The TripView is dynamiclly generated, so the VGroup contentHeight may much greater than viewPortHeight. Since I could drag stuff in the TripView, I want to change the vp.verticalScrollPosition when the drag stuff almost move to the bottom of the view so the other TripView could be in the screen.

Answer 1

The most important thing is the scrollRect. Change the verticalScrollPosition based on the scrollRect. To use the ScrollManager, you should register viewport by registerViewport function. Then listen for mouseMove event, in the event listener invoke startScroll. Following is implementation:
package utils {
import flash.display.Stage;
import flash.events.MouseEvent;
import flash.geom.Point;
import flash.geom.Rectangle;
import mx.core.IInvalidating;
import spark.components.Group;
public class ScrollManager {
private var viewport:Group;
private var stage:Stage;
private var oldMovingMouseY:Number;
private static var _instance:ScrollManager;
//threshold for scrolling
private const FUDGE:Number = 35;
//scroll up speed
private const UP_SCROLL_DELTA:int = 50;
//scroll down speed
private const DOWN_SCROLL_DELTA:int = 80;
public function registerViewport(viewport:Group):void {
this.viewport = viewport;
this.stage = viewport.stage;
}
public static function getInstance():ScrollManager {
if(_instance == null) {
_instance = new ScrollManager();
}
return _instance;
}
public function startScroll(mouseEvent:MouseEvent):void {
oldMovingMouseY = mouseEvent.stageY;
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove, false, 0, true);
stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp, false, 0, true);
}
private function onMouseUp(event:MouseEvent):void {
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
stage.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
if (viewport is IInvalidating) {
//viewport.callLater(IInvalidating(viewport).validateNow);
//change VSP on scrollRect.y
var rect:Rectangle = viewport.scrollRect;
viewport.verticalScrollPosition = rect.y;
trace("========final vsp ========", rect.y);
}
}
private function onMouseMove(event:MouseEvent):void {
var currentMouseX:Number = event.stageX;
var currentMouseY:Number = event.stageY;
trace("mouseY ", currentMouseY);
//scroll direction
var delta:Number = currentMouseY - oldMovingMouseY;
var direction:int = (delta > 0) ? 1 : (delta < 0) ? -1: 0;
var scrollDelta:Number = direction > 0 ? DOWN_SCROLL_DELTA : UP_SCROLL_DELTA;
//current mousePoint in viewport coordination
var localPoint:Point = viewport.globalToLocal(new Point(currentMouseX, currentMouseY));
trace("localPoint: ", localPoint);
var scrollRect:Rectangle = viewport.scrollRect;
trace("viewport rect", scrollRect);
//determine if need scroll
if(needScroll(localPoint, scrollRect, direction)) {
trace("direction ", direction > 0 ? " UP": " DOWN");
scrollRect.y += scrollDelta*direction;
viewport.scrollRect = scrollRect;
if (viewport is IInvalidating) {
IInvalidating(viewport).validateNow();
}
}
oldMovingMouseY = currentMouseY;
}
private function needScroll(localPoint:Point, scrollRect:Rectangle, direction:int):Boolean {
var localY:Number = localPoint.y;
var bottom:Number = scrollRect.bottom;
var top:Number = scrollRect.top;
if(direction > 0 && (localY + FUDGE) > bottom) {
return true;
}
if(direction< 0 && (localY - FUDGE) < top) {
return true;
}
return false;
}
}
}