Learning Flex – Lesson 15, part II Deep Linking

Deep linking allows the URL to represent different states in a Flex app by using named anchors (the parameters that follow # in a URL that are traditionally used to navigate to different places within a HTML page). The portion of the URL after the ‘#’ is referred to  as a fragment. Each time the fragment is changed, the previous fragment is stored in the browser’s history allowing the user to make use of the back and forwards buttons. These URLs can also be bookmarked and used to get directly to the desired state.

In Flex 3, deep linking is implemented via the BrowserManager class. This provides support for reading and writing to the fragment as well as the browser’s title. It will also provide notification to your app when the fragment changes in the browser. The URLUtils class offers tools to help convert between an object of name value pairs and fragment strings.

It’s important to note that HistoryManager also uses the BrowserManager and will cause interference if it’s active so the two techniques should not be combined (set historyManagementEnabled="false" in the Application tag).

To implement deep linking, start by creating an init method to be called on creationComplete. This should create a property to reference the BrowserManager like so:

private var browserMgr:IBrowserManager = BrowserManager.getInstance();

Call the init() method on this property and provide two Strings as parameters; the first is the initial URL fragment (which is usually the empty string), the second is the desired browser title.

Next, add an eventListener() for the property, listening for the BrowserChangeEvent.BROWSER_URL_CHANGE event and specify an event handler method that will parse the URL.

You should define an update URL method that gets called when the navigation state changes. This method needs to create an Object and add the relevant state data using name,value pairs (object.name = value). The URLUtil.ObjectToString() method is then used to convert the Object to a String fragment that can be provided for the URL using the setFragment() method of your BrowserManager property.

The parse URL method (event handler) should use URLUtil.StringToObject() to translate the fragment attribute of the BrowserManager property into an Object like so:

var o:Object = URLUtil.StringToObject(browserMgr.fragment);

This method may get called before all the display objects are created so it’s a good idea to check if data is non null before proceeding. If it is null, use the callLater() method to call the method again in the next Flash cycle (as you won’t have the event this time round, you’ll want to default that parameter to null in the method specification). Otherwise, the Object data can be retrieved and used to update the navigation state.

Take care to ensure that relevant bounds checking etc is performed on the fragment values to prevent issues from the user hacking the URL data in the address bar of the browser.

Another point you may need to consider is potential race conditions between the parse method updating the navigation state (if this has asynchronous aspects) and further changes to the URL.

You can use the setTitle() method of your BrowserManager property to update the title displayed on the browser to reflect state changes.

There are also alternative 3rd party solutions available for deep linking – SWFAddress and URLKit