addicted2flash

The ScrollPane contains an encapsulated view and handles the overflow of that view.

The ScrollPane itself is a container that has its own width and height measurement in the layout cycle, so it is totally encapsulated from the underlying view.

It is configurable with a horizontal and/or vertical ScrollBar. These ScrollBars get their components (arrows, thumb, track) from a ScrollBarFactory, so it is possible to change the look-and-feel at runtime.

In addition, it has an attribute variant, which can be configured with the following values:

Here is a quick example of a simple setup:

 
package layout
{
	import com.addicted2flash.layout.component.Application;
	import com.addicted2flash.layout.component.ScrollBar;
	import com.addicted2flash.layout.component.ScrollPane;
	import com.addicted2flash.layout.core.Component;
	import com.addicted2flash.layout.util.Orientation;
 
	import flash.display.Graphics;
 
	/**
	 * @author Tim Richter
	 */
	public class ScrollableTest extends Application
	{
		public function ScrollableTest()
		{
			super( ABSOLUTE );
 
			var view: Component = new Component();
			view.desiredWidth = 600;
			view.desiredHeight = 400;
 
			var g: Graphics = view.display.graphics;
			g.beginFill( 0xccff00 );
			g.drawRect( 10, 10, 580, 380 );
			g.endFill();
 
			var pane: ScrollPane = new ScrollPane( view );
			pane.desiredPercentWidth = 1;
			pane.desiredPercentHeight = 1;
			pane.horizontalScrollBar = new ScrollBar( new ScrollBarFactory(), Orientation.HORIZONTAL );
			pane.horizontalScrollBar.desiredPercentWidth = 1;
			pane.horizontalScrollBar.desiredHeight = 20;
			container.add( pane );
		}
	}
}
 
import com.addicted2flash.layout.component.IScrollBarFactory;
import com.addicted2flash.layout.core.Component;
 
import flash.display.Graphics;
 
class ScrollBarFactory implements IScrollBarFactory
{
	public function createUpArrow(): Component
	{
		return new Arrow();
	}
 
	public function createTrack(): Component
	{
		return new Track();
	}
 
	public function createThumb(): Component
	{
		return new Thumb();
	}
 
	public function createDownArrow(): Component
	{
		return new Arrow();
	}
}
 
class Arrow extends Component
{
	public function Arrow()
	{
		desiredWidth = 16;
		desiredPercentHeight = 1;
	}
 
	override public function arrange(): void
	{
		var g: Graphics = display.graphics;
		g.clear();
		g.beginFill( 0x666666 );
		g.drawRect( 0, 0, width, height );
		g.endFill();
	}
}
 
class Track extends Component
{
	public function Track()
	{
		desiredPercentWidth = 1;
		desiredPercentHeight = 1;
	}
 
	override public function arrange(): void
	{
		var g: Graphics = display.graphics;
		g.clear();
		g.beginFill( 0xcdcdcd );
		g.drawRect( 0, 0, width, height );
		g.endFill();
	}
}
 
class Thumb extends Component
{
	public function Thumb()
	{
		desiredWidth = 20;
		desiredPercentHeight = 1;
		minimumWidth = 16;
	}
 
	override public function arrange(): void
	{
		var g: Graphics = display.graphics;
		g.clear();
		g.beginFill( 0x000000 );
		g.drawRect( 0, 0, width, height );
		g.endFill();
	}
}