Revisiting Deep Linking with Flex

A few months *cough *cough over a year ago I posted some thoughts on Deep Linking within a Flex Application. Since making this post I have worked on a variety of different applications using AIR, Flex, and other RIA technologies.

As time goes on I’ve changed my methods but the theory has stayed the same: Get the URL, go to a specific state of the application.

The question is again how do we get this information, how do we determine where to go, and how do we mark updates in our application to the URL. We’re going to also want to have our application’s URL be shareable between applications.

More concisely, I’m going to talk about a very simple framework I’ve set up to speed up the programming behind deep linking. In no way is this framework complete, however it has served it’s purpose for some applications I’ve put together and can definitely help you. If you have feedback please let me know.

Example (View Source Enabled) | View Source

Thinking of SEO and Search Engines we still don’t need to worry about search engines finding our content because we are going to use SWFObject and Alternative Content to show the data and text that belongs to the specified link. We can even still use HTML links within our alternative content so that search engines crawl and scrap our content… while the user will see your beautiful Flex application.

In this blog post I’m not going to talk about writing your alternative content, that was previously discussed.

As discussed earlier, it is very beneficial to have this alternative content for your Flex Applications – especially if you are creating a Flex Application to be delivered to the open web. If a device that doesn’t support Flash runs into your site the alternative content will be shown and the user can keep getting your fabulous content.

My framework that will handle the Deep Linking is going to be built around a Singleton Class. Why? Well there is only one browser and I want to be able to update the single browser from anywhere in my application. When this class starts up we’ll get the initial URL and set the application’s initial state.

Get the URL
In my previous post I used server side code to set the initial vars and url for our application. I still believe that if you need to do some augmentation on your URL prior to reaching the Flex Application this is a perfectly legitimate method, but I also want to show a simpler route to getting your application’s url.

Determine the application state
Once you have the URL the next step is easy. Parse the URL string for your application specific variables and move your application to that location.

As simple as this step is – this step is infinitely difficult to explain for your specific application. If you’re wondering when I will get to get to my framework, that time is now. Here is precisely where my framework helps your development. What you need to do is register components, in my example I will register a Spark List component.

What I have done is register a List (the id is list), say that the name in the url will be “list” and that the property that we will be watching is “selectedIndex”. Finally I say that the default value is 0. So if the value is 0, we don’t worry about putting it into the url – keeps the URL pretty .

Mark Application State updates to the URL
When the application state changes the first thing you need to do is parse the current state of the application and turn that into a URL. Then, if the URL changes you need to reverse this process and set the application state based on the parsed URL.

To update the URL is really simple with the application, just call the updateUrl function.

Whenever and whatever you want to trigger an update to the Url just mark the event with this code.

That’s it. The browser’s URL is set based on the application and the application’s state is set based on the URL. The roundtrip is complete and the application is deep linking compatible. I hope the framework helps you as much as it’s helped me. Again, I’m looking for feedback if you run into any troubles using it.

Example (View Source Enabled) | View Source

You can get the code in my public library on github.
Here is the source to the DeepLinkingManager.

Update:
Geez, I am a constant perfectionist when it comes to my code – blog post typos are a different story. I felt that if you are listening for a change on the instance then why am I forcing you to make ANOTHER handler function to just update the url. If you want this handled for you based on an event from the instance there is a new parameter on the register function that will allow you to enter that event type. Now you don’t even need to call the updateUrl if you don’t want to. Just do:
DeepLinkingManager.getInstance().registerNavigationControl(“list”, list, “selectedIndex”, 0, IndexChangeEvent.CHANGE);