At Projectplace we are currently in the process of developing an exiting thing: a fast and easy to use planning tool (working name: Yap)! You can read more about that at Projectplace Labs.

The reason for this little post however  is to promote the open source project flexlib and more specifically a component contained therein, the DragScrollingCanvas. Brad Rice covers the basics of this component.

We’ve had much use of this little component in our early development of our timeline view, and whatever your Flex needs might be, you are sure to find tons of helpful components in flexlib.

One thing that we were lacking was the ability to make some components contained in a DragScrollingCanvas move together with the view port. Basically, we wanted a few components to be able to “float” on top of the Canvas, keeping its relative position at all times. We solved this by dispatching an event from within the DragScrollingCanvas itself. So, first we typed up a little Event (the below event only allows relative positioning vertically).

package com.projectplace.graphics.events
{
	import flash.events.Event;
 
	public class DragScrollEvent extends Event
	{
		public static const DRAGSCROLLED:String = "dragscrolled";
 
		public var _y:Number;
 
		public function DragScrollEvent(type:String, y:Number)
		{
			super(type, false);
			this._y = y;
		}
	}
}

and within DragScrollingCanvas we dispatched this event as soon as some scrolling occured, in the systemManager_mouseMoveHandler function. Last in this function we added:

dispatchEvent(new DragScrollEvent(DragScrollEvent.DRAGSCROLLED, this.verticalScrollPosition));

This allowed us to be able to listen for the event in the application, and move whatever component within the canvas to a new position on the canvas, while the user is scrolling. If you’re crafty you can easily expand this functionality to the horizontal axis as well. Anyway, this is the result, so far. Notice how the date bar on top, follows your scrolling vertically :)