FlexLive.net

Flex let’s you build a kick ass UI every quickly. The Flash runtime creates a nice little sandbox so you don’t have to worry about tweaking your code for different browsers. The downside of this is that the Flash sandbox is completely opaque to the browser. If you have a Flex based photo album viewer, for example, and you want to show you friend a particular image in that album viewer. A regular user’s first instinct is to copy and send the URL, and we all know what’s going to happen next. Fortunately, deep linking in Flex is not difficult. This tutorial will show you how. 

Flex 3 Deep Linking vs. SWFAddress

Deep linking is one the new features in Flex 3, but the technique has been used by Flash developers for quite a while. The most notable implementation is called SWFAddress.

So what’s the difference between the Flex 3 deep linking feature and SWFAddress? Not much. So why should you choose one over the over? Personally, I found the SWFAddress implementation to be much cleaner. Flex 3 deep linking is great if you never have to touch the HTML/JS templates, but that’s rarely the case once you start doing serious Flex development. This tutorial is going to focus on SWFAddress, but it should be conceptually applicable to Flex 3 builtin deep linking.

In the browser environment, every time a user changes the URL, the page is reloaded. The only exception is when you load a HTML page anchor. In the URL, the anchor starts with the “#” sign. The deep linking technique is based on manipulating the HTML anchor in the URL. For example, if you Flex application URL is http://myflexapp.com/index.html, a deep link would looking something like http://myflexapp.com/index.html#/param1=123&param2=true.

To use SWFAddress deep linking in your application, you need go through the following steps,

• Clear out the html-template folder and replace it with SWFObject and SWFAddress templates. Copy the SWFAddress ActionScript files to your src directory.
• Handle URL change events
  • The SWFAddress.onChange event is fired whenever the URL is changed in the address bar of your browser
  • Create a private function which takes no parameters and return void. It would be the handler for your URL change event
  • Attach the newly created function to SWFAddress.onChange during application initialization
  • The new address string could be accessed via SWFAddress.getValue()
• Update the URL
  • To change the deep linking URL, simply call SWFAddress.setValue and pass in the new address as the string parameter
  • To pass multiple parameters into the URL encoding, you could either concatenate the parameters or use the URLUtil class on a collection object
  • For a concrete example, take a look at the sample project attached to this post

What about URLKit?

When you are using SWFAddress, you are essentially given a getter, a setter, and an update event for the URL. You still have to construct code to interpret the parameters. This could get dangerous if you are trying to encode the state of multiple components into one URL. URLKit insulate you from directly accessing the URl string. Instead, it creates a rule based system which allows you to map variables to URL, group several variables together, and delegate URL handling to a sub component safely. URLKit is designed for Flex with full MXML support. I will not cover URLKit in detail in this post, but please let me know if you are interested in finding out more. I could write a tutorial for URLKit if there’s sufficient demand.

Flex Deep Linking Sample Code

Need to bring your Flex project up to speed? Zee Yang is a freelance Flex developer with deep understanding of architecture and user experience. You can reach him at zee.yang@gmail.com.

Trackback This Post | Subscribe to the comments through RSS Feed