<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Alekkus » Empowering social media with Flash &#187; BrowserManager</title>
	<atom:link href="http://alekkus.com/blog/tag/browsermanager/feed/" rel="self" type="application/rss+xml" />
	<link>http://alekkus.com/blog</link>
	<description>flex consultant + social media specialist</description>
	<lastBuildDate>Wed, 17 Mar 2010 07:54:54 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Flex tutorial: URL-based navigation using Deep Linking</title>
		<link>http://alekkus.com/blog/2009/02/flex-tutorial-url-based-navigation-using-deep-linking/</link>
		<comments>http://alekkus.com/blog/2009/02/flex-tutorial-url-based-navigation-using-deep-linking/#comments</comments>
		<pubDate>Tue, 03 Feb 2009 03:41:54 +0000</pubDate>
		<dc:creator>Alekkus</dc:creator>
				<category><![CDATA[Flex 3 (Moxie)]]></category>
		<category><![CDATA[Tutorials]]></category>
		<category><![CDATA[BrowserManager]]></category>
		<category><![CDATA[deeplinking]]></category>

		<guid isPermaLink="false">http://alekkus.com/blog/?p=95</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>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.</p>
<p>The following shows you how to solve these issues by using the BrowserManager class.</p>
<p><strong>Demo:</strong><br />
<a href="http://alekkus.com/flex3/deep_linking.html">Deep Linking</a> (view source enabled)</p>
<p><strong>Source Codes:</strong></p>
<pre name="code" class="as3">

&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;mx:Application
	xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot;
	layout=&quot;absolute&quot;
	backgroundColor=&quot;#F8F8F8&quot;
	creationComplete=&quot;onCreationComplete()&quot;&gt;

&lt;mx:Script&gt;
&lt;![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( &quot;&quot; );  

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

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

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

  		_browserManager.setFragment( canvasLabel.toLowerCase() );
  	}
]]&gt;
&lt;/mx:Script&gt;

	&lt;mx:LinkBar x=&quot;10&quot; y=&quot;10&quot; dataProvider=&quot;{ vsMain }&quot; itemClick=&quot;onChildIndexChange( event )&quot;/&gt;

	&lt;mx:ViewStack
		id=&quot;vsMain&quot;
		x=&quot;0&quot; y=&quot;36&quot;
		width=&quot;252&quot; height=&quot;177&quot;&gt;

		&lt;!-- Home --&gt;
		&lt;mx:Canvas
			label=&quot;Home&quot;
			width=&quot;100%&quot; height=&quot;100%&quot;&gt;

			&lt;mx:Label text=&quot;Home page&quot; x=&quot;10&quot; y=&quot;10&quot; fontSize=&quot;28&quot;/&gt;
		&lt;/mx:Canvas&gt;

		&lt;!-- About us --&gt;
		&lt;mx:Canvas
			label=&quot;About&quot;
			width=&quot;100%&quot; height=&quot;100%&quot;&gt;

			&lt;mx:Label text=&quot;About us&quot; x=&quot;10&quot; y=&quot;10&quot; fontSize=&quot;28&quot;/&gt;
		&lt;/mx:Canvas&gt;

		&lt;!-- Contact us --&gt;
		&lt;mx:Canvas
			label=&quot;Contact&quot;
			width=&quot;100%&quot; height=&quot;100%&quot;&gt;

			&lt;mx:Label text=&quot;Contact us&quot; x=&quot;10&quot; y=&quot;10&quot; fontSize=&quot;28&quot;/&gt;
		&lt;/mx:Canvas&gt;
	&lt;/mx:ViewStack&gt;

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

&lt;/mx:Application&gt;
</pre>
]]></content:encoded>
			<wfw:commentRss>http://alekkus.com/blog/2009/02/flex-tutorial-url-based-navigation-using-deep-linking/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
