What is Deep Linking?
Deep Linking is a term that describes the support for URL based navigation in applications that are not a collection of HTML pages. In a web site, for example, if you have a menu with Home, About Us, and Contact, whenever someone chooses an item from the menu, the browser will point to a new URL, such as http://mysite/home.html or http://mysite/contact.html. This is great because you can bookmark the page that you have an interest in and you can give the link to your friend. Without this, you have to send your friend a link to http://mysite along with an explanation about how to get to the Contact page.
In Flex applications, when you don’t use Deep Linking this is also the case. You are not able to bookmark a particular state of the application or to send someone just a link to get him to the Contact form page. Deep Linking fixes this and also enables the browser back button.
How does it work in Flex?
In Flex 3, Deep Linking is implemented using fragments, the portions of URLs after the “#”. For example, in this link http://mysite/page.html#view=1 the fragment is view=1. Whenever you add to URL fragments (and you can write basically anything you want) the browser does not reload the page. This is exactly what you need in a Flex application. In a Flex app you have all the states inside of a SWF file, and thus you don’t change the content by reloading another page.
Flex uses these fragments to “store” the state and when an URL is loaded, the Flex application can analyze the URL fragments to recreate the state corresponding to that URL. Let’s see how a programmer can write and read URL fragments from within a Flex app.
BrowserManager is a Singleton that acts as a proxy between the browser and the Flex application. It lets you:
- set fragments in the current URL
- set the HTML title
- register event listeners on URL change events
The second class we use is the static class URLUtil which has methods to manipulate URLs. The last thing to know is that we need to turn off the HistoryManager (which enables back/forward navigation in Flex apps) in order to not interfere with fragment processing. We can turn it off by setting the property historyManagementEnabled to false (for example: <mx:Application historyManagementEnabled=”false”>).
Most of the work a programmer does for Deep Linking is centered on creating functions that either “serialize” the current state to URL or “deserialize” the URL and use that information to change the Flex application state.
A Simple Example
Let’s see a simple Flex application that use Deep Linking. It has three states: the default state, “Step 2” state and “Step 3” state. Click here to open the application – you can see the source code by choosing “View Source” from the contextual menu (right click on the application). To illustrate different states in the application, I used an accordion. I could have used mx:states, a tabset or some other UI components. It wouldn’t matter, the principle is the same. As I said the main task a programmer has while working with Deep Linking is to create the functions to serialize the state to URL and deserialize the URL to get the states out of it. Then, you need to hook these functions into your application by registering them as event listeners. Usually, the function for creating the URL gets called a lot from different parts of your application. In my sample these functions are doUpdateURL() for serializing to URL and parseURL() for deserializing the URL. In the application, the URL controls what step of the accordion is selected. For this I read the current selectedIndex from the accordion and I save it as a fragment. For example, for step 2, I will have something like this: http://corlan.org/downloads/examples/deep_linking_project/deep_linking_project.html#view=1 – note the view=1 at the end of the URL, this is the fragment that stores the selectedIndex.
As you can see in the mx:Application I set the historyManagementEnabled property to false. Then I declare three variables: one to keep a reference to BrowserManager, one flag to use it when parsing the URL and one variable to store the titles I want to be displayed for each state.
Then I define the init() function; this is called when the application gets loaded. Here we initialize the browserManager variable and add to browserManager the event listener for URL changes. The last line calls the parseURL() function, see the description of this function below.
Next I define the parseURL() function which is the event listener registered to browserManager. This function reads the URL, and if fragments are found, it sets the title and changes the selection in the accordion.
Then I define the updateURL() function which is called when someone makes a selection in the accordion. This function verifies that no other instance of parseURL() is running in the same time; if not, it calls doUpdateURL().
The last function is doUpdateURL(). This function rewrites the browser URL and page title:
And last we need the UI. I used an accordion to simulate different states. On the mx:accordion I registered the function updateURL() for the change event.