This is a 'bare bones' example which aims to get you started as quickly as possible.

see the running demo here: app

download the source code here: source

Firstly we create the main class: Sample.as. It defines the deepsplink page structure via inline xml, passes the xml to a XmlConfigBootstrapper which boots deepsplink according to the xml. As our Sample class implements the IBootStrategy interface it has a boot method which is eventually invoked by the XmlConfigBootstrapper. For the sake of brevity our boot method only adds the root display container of all pages to the display list. You might wonder what's with the Test; statement. As the Test page class isn't referenced anywhere in our project, we need to add a reference so the compiler includes the class.

public class Sample extends Sprite implements IBootStrategy {
	public function Sample() {
		stage.align = StageAlign.TOP_LEFT;
		stage.scaleMode = StageScaleMode.NO_SCALE;
		scrollRect = new Rectangle(0, 0, 550, 400);
		
		var xml : XML = <config>
			<home id="home" />
			<notfound redirect="404" />
			<page id="root" clazz="TestPage">
				<page id="404" clazz="TestPage" />
				<page id="home" clazz="TestPage">
					<page id="page1" clazz="TestPage" />
					<page id="page2" clazz="TestPage" />
				</page>
				<page id="page3" clazz="TestPage">
					<page id="page4" clazz="TestPage">
						<page id="page5" clazz="TestPage" />
					</page>
					<page id="page6" clazz="TestPage" />
				</page>
			</page>
		</config>;
		
		TestPage;
		
		new XmlConfigBootstrapper(xml, this).start();
	}

        public function boot(facade : IDeepsplinkFacade) : void {
		addChild(facade.display);
	}
}

The next step is to create the pages which have been referenced in the xml configuration. Our configuration only defines a TestPage. So we extend the Page class which conforms to the interfaces expected by deepsplink and therefore is the most convenient option to create a page.

Once the user requests a page, it's initialize method is invoked. This is the place where we setup the page. Firstly we detect the layer the page lives in and prepare how the page is shown and how it is hidden. Secondly we prepare the page content. In this case it's just a background, a title and a navigation for the pages below this page.

To build the navigation we use the PageNavigationFactory to create a page navigation controller which leaves us to only implement our own view for the navigation. The controller interacts with deepsplink and deals with all the logic involved. Read a more detailed explaination on the page navigation here.

When the page is left because another page has been requested it will be hidden by the hide strategy we defined in the constructor and afterwards it's finalize method is invoked. Here we clean up everything so the page content gets garbage collected. But our instance lives on and at some point later when the user decides to request the page again it's intialize method is invoked and the lifecycle starts all over again. Read on about the page lifecycle

public class TestPage extends Page {
	private var _controller : IPageNavigationController;
	private var _color : uint = 19000 + 5000 * Math.random();
	private var _navigationView : IPageNavigationView;

	public function TestPage(supplier : IPageSupplier) {
		super(supplier);
		trace("instantiated page " + id + " (" + title+ ")");
		_controller = PageNavigationFactory.create(id, tree, navigationCommand);
		_navigationView = _controller.addView(new NavigationView(["404"]));
	}

	override public function initialize() : void {
		createBackground();
		createTitle();
		display.addChild(_navigationView.display).y = 30;
			
		var layer : uint = Tree.getNodeById(id, tree.root).layer;
		display.y = 400;
			
		setShowStrategy(new QTween(display).add(QTweenConst.Y, 60 * layer).duration(400));
		setHideStrategy(new QTween(display).add(QTweenConst.Y, 400).duration(200));
			
		setInitialized();
	}

	private function createTitle() : void {
		var t : TextField = new TextField();
		var tf : TextFormat = new TextFormat();
		tf.font = "Arial";
		tf.size = 18;
		t.defaultTextFormat = tf;
		t.htmlText = "<b>" + id + "</b>";
		t.autoSize = TextFieldAutoSize.LEFT;
		display.addChild(t);
	}

	private function createBackground() : void {
		display.addChild(new Bitmap(new BitmapData(550, 400, false, _color)));
	}

	override public function finalize() : void {
		while(display.numChildren > 0) {
			display.removeChildAt(0);
		}
	}
}

Finally we need to create the IPageNavigationView implementation NavigationView in order to work with the IPageNavigationController in our TestPage.

The class is a typical navigation which renders a couple of buttons side by side. If one of these buttons is clicked the controller is notified and issues a request to change to the page which belongs to the id of the clicked button.

If a page change request happens somewhere in the application, each affected IPageNavigationController is informed and delegates the request to it's corresponding IPageNavigationView's select method where the navigation view marks the button which belongs to the given id and unmarks all other buttons. Once the controller is finalized because the page it lives in is finalized, it invokes the finalize method on the corresponding navigation view.

public class NavigationView implements IPageNavigationView {
	private var _display : Sprite = new Sprite();
	private var _controller : IPageNavigationController;
	private var _btns : Array = new Array();
	private var _excludeIds : Array;

	public function NavigationView(excludeIds : Array = null) {
		_excludeIds = excludeIds ? excludeIds : new Array();
	}

	public function setController(controller : IPageNavigationController) : void {
		_controller = controller;
	}

	public function render(subpageIds : Array) : void {
		var nextX : int = 0;
		for each (var id : String in subpageIds) {
			if(!ArrayUtils.contains(_excludeIds, id)) {
				var btn : Btn = new Btn(id);
				btn.addEventListener(MouseEvent.CLICK, onClick);
				_display.addChild(btn).x = nextX;
				nextX = btn.x + btn.width + 5;
				_btns.push(btn);
			}
		}
	}

	private function onClick(event : MouseEvent) : void {
		_controller.gotoPage(Btn(event.target).id);
	}

	public function select(id : String, pageParams : Array = null, changed : Boolean = true) : void {
		for each (var btn : Btn in _btns) {
			if(btn.id == id) {
				btn.mark();
			} else btn.unmark();
		}
	}

	public function finalize() : void {
		for each (var btn : Btn in _btns) {
			_display.removeChild(btn);
			btn.removeEventListener(MouseEvent.CLICK, onClick);
		}
		_btns.splice(0, _btns.length);
	}

	public function get display() : DisplayObject {
		return _display;
	}
}

...and here the according button class

internal class Btn extends Sprite {
	private var _id : String;
	private var _marked : Boolean;
	private var _t : TextField;

	public function Btn(id : String) {
		mouseChildren = false;
		buttonMode = true;
		_id = id;
		
		render();
	}

	private function render() : void {
		addChild(_t = new TextField());
		var tf : TextFormat = new TextFormat();
		tf.font = "Arial";
		tf.size = 12;
		_t.defaultTextFormat = tf;
		_t.htmlText = id;
		_t.autoSize = TextFieldAutoSize.LEFT;
	}

	public function mark() : void {
		if(!_marked) {
			_t.background = true;
			_t.backgroundColor = 0;
			_t.textColor = 0xffffff;
		}
		_marked = true;
	}

	public function unmark() : void {
		_marked = false;
		if(!_marked) {
			_t.background = false;
			_t.textColor = 0;
		}
	}

	public function get id() : String {
		return _id;
	}
}

The last step is to embed the swf into a html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>Sample</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript" src="swfaddress.js"></script>
	
		<style type="text/css">
			html,body {
				margin: auto;
				padding: 0;
				height: 100%;
				overflow: hidden;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="flash">
			<p>You need JavaScript and the Adobe Flash Player Version 9.0.115.0+</p>
			<p>You can get Adobe Flash Player <a href="http://www.adobe.com">here</a></p>
		</div>
		
		<script type="text/javascript">
		swfobject.embedSWF("Sample.swf", "flash", "550", "400", "9.0.115.0", "expressInstall.swf");
		</script>
	</body>
</html>