The objective of deep linking is typically centered on creating functions that either serialize the current state to the URL or deserialize the URL and use that information to change the state of the application. This makes it possible to bookmark a specific state of your Flex application. The main ingredient for this deep linking implementation is called a “fragment”. You’ve probably seen these used before in HTML or Javascript. A fragment is separated from the URL using the hash mark symbol (#). For example, fragments are used when anchoring items of an HTML web page. A “frequently asked questions” page is the first thing that comes to mind for me because there are so many FAQ pages on the web that list the questions at the top of the page and when you click on a question, the scrollbar jumps down to the respective answer for the question you clicked on. However, in Flex, you can use this same concept to tell your application what state it should be in or even the state of a specific component!
Note that when using URL fragments for deep linking, you actually want to keep the built-in history management off, otherwise it will interfere with fragment processing.
Step 1
Start by declaring three variables:
1) a reference to the Flex BrowserManager class,
2) a flag to signal that URL parsing is in progress, and
3) a variable to hold the title for the browser’s title bar.
public var browserManager:IBrowserManager; private var isParsing:Boolean; private var title:String;
Step 2
Now, you need to declare your states of your application if you haven’t already and place a listener for the enterState event. When the state changes, a call to updateURL will be made.
<s:states>
<s:State name="Home" enterState="updateURL()" />
<s:State name="About" enterState="updateURL()" />
<s:State name="Services" enterState="updateURL()" />
<s:State name="Store" enterState="updateURL()" />
</s:states>
Step 3
When the application loads, you’ll need to initialize the BrowserManager, and register two listeners, one for when the browser’s URL changes and the other for when the application’s state changes. Lastly, you’ll use the callLater() method of UIComponent to parse the URL. Note that this function is called on creationComplete of the Application tag.
private function application_creationCompleteHandler():void
{
browserManager = BrowserManager.getInstance();
browserManager.init("", "Home");
browserManager.addEventListener(BrowserChangeEvent.BROWSER_URL_CHANGE, parseURL);
callLater(parseURL);
}
Step 4
Now write the code for your parseURL() function. This function will be called whenever the BROWSER_URL_CHANGE event fires. The function parses the URL, and if fragments are found, it will change the title and state of the application accordingly.
private function parseURL(event:Event = null):void
{
isParsing = true;
var o:Object = URLUtil.stringToObject(browserManager.fragment);
if (o.view == undefined)
o.view = "Home";
currentState = o.view;
title = currentState;
browserManager.setTitle(title);
isParsing = false;
}
Step 5
You are now successfully updating the application from the URL! The next thing you need to do is update the URL from the application though. We’ll accomplish this with the function updateURL().
private function updateURL():void
{
title = currentState;
var fragments:String = "";
var o:Object = {};
if (currentState != "Home")
o.view = currentState;
fragments = URLUtil.objectToString(o);
browserManager.setTitle(title);
browserManager.setFragment(fragments);
}
And that’s all there is to it. Happy Flexing!
-Dan Orlando
