alekkus

Flex tutorial: URL-based navigation using Deep Linking

One of the best new features in Flex 3 is Deep Linking. By default, a Flex application is accessible via one URL; that poses several limitations on the users. Firstly, the browser back/forward buttons no longer works the usual way. Secondly, consider an ecommerce site, if a user wants to show his/her friends a particular product information, he/she can no longer simply give out the url, as the the url will always show the default state/page of the application.

The following shows you how to solve these issues by using the BrowserManager class.

Demo:
Deep Linking (view source enabled)

Source Codes:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute"
	backgroundColor="#F8F8F8"
	creationComplete="onCreationComplete()">

<mx:Script>
<![CDATA[
	import mx.events.ItemClickEvent;
	import mx.containers.Canvas;
	import mx.events.BrowserChangeEvent;
	import mx.managers.BrowserManager;
	import mx.managers.IBrowserManager;

	private var _browserManager : IBrowserManager = null;

	private function onCreationComplete() : void
	{
		// 1. add browserManager event listeners here
		_browserManager = BrowserManager.getInstance();
        _browserManager.addEventListener( BrowserChangeEvent.BROWSER_URL_CHANGE, onURLChange ); 		//dispatch when user typed into addr bar
		_browserManager.addEventListener( BrowserChangeEvent.APPLICATION_URL_CHANGE, onURLChange ); 	//necessary to update the url in address bar when gotoURL called has a same base url, orignially used to dispatch when setFragment is called although not use for that purpose. now setFragent is used again.
        _browserManager.init( "" );  

		// 2. explicitly call process url if fragment is empty when loaded
        if ( _browserManager.fragment == "" )
        {
        	onURLChange();
        }
	}

	 private function onURLChange( event:BrowserChangeEvent = null ) : void
  	{
  		switch ( _browserManager.fragment.toLowerCase() )
  		{
  			case "about":
  			{
  				_browserManager.setTitle( "About us | Alekkus.com" );
  				vsMain.selectedIndex = 1;
  				break;
  			}
  			case "contact":
  			{
  				_browserManager.setTitle( "Contact us | Alekkus.com" );
  				vsMain.selectedIndex = 2;
  				break;
  			}
  			default:
  			{
  				_browserManager.setTitle( "Home | Alekkus.com" );
  				vsMain.selectedIndex = 0;
  			}
  		}
  	}

  	private function onChildIndexChange( event : ItemClickEvent ) : void
  	{
  		var canvasLabel : String = Canvas( vsMain.getChildAt( event.index ) ).label;

  		_browserManager.setFragment( canvasLabel.toLowerCase() );
  	}
]]>
</mx:Script>

	<mx:LinkBar x="10" y="10" dataProvider="{ vsMain }" itemClick="onChildIndexChange( event )"/>

	<mx:ViewStack
		id="vsMain"
		x="0" y="36"
		width="252" height="177">

		<!-- Home -->
		<mx:Canvas
			label="Home"
			width="100%" height="100%">

			<mx:Label text="Home page" x="10" y="10" fontSize="28"/>
		</mx:Canvas>

		<!-- About us -->
		<mx:Canvas
			label="About"
			width="100%" height="100%">

			<mx:Label text="About us" x="10" y="10" fontSize="28"/>
		</mx:Canvas>

		<!-- Contact us -->
		<mx:Canvas
			label="Contact"
			width="100%" height="100%">

			<mx:Label text="Contact us" x="10" y="10" fontSize="28"/>
		</mx:Canvas>
	</mx:ViewStack>

	<!-- Instructions -->
	<mx:Label x="10" y="224" text="*Notice that the url changes when you navigate thru different pages."/>
	<mx:Label x="10" y="250" text="*You can also use the browser back/forward button to navigate."/>
	<mx:Label x="10" y="276" text="*Manually typing in the url also works. e.g. .http://alekkus.com/...#contact"/>

</mx:Application>

1 Comment »

TrackBack URI

1. SWFAddress-Deep Linking for Flash « Tour D Flex & SEO says:
   July 8, 2010 at 07:07 pm

   [...] Codes: view plaincopy to [...]

Leave a comment