The Junk In My Trunk

I think the Adobe Flex developers invented the term “deep linking” just so they could sound a little dirty when talking about it. Unfortunately what it really is, is far less interesteing then what it sounds like.

Deep linking is what Flex 3 uses to replace the History Manager used in Flex 2. I’m sure this isn’t your first time hearing about it, as it’s not a new concept. But I needed to use it for the new Stock20 site, so I had to figure out how it works, when it does work, and how to use it.

I first started developing with it on a computer using Firefox, and it worked great. Then I switched to my other computer which uses Opera and it suddenly stopped working. This took me diving into the documentation to find out why. I knew that the documentation said it only worked with IE, Firefox, and Safari, but I figured that was a general assumption and that most modern browsers would work. I had to do some searching on ther internet, and then I found an article on Adobe labs that states that it does not work with Opera. I was surprised, but none the less, I found the answer to my problem.

So, not only did I have to setup deep linking, but I also had (have) to set up a browser detection script to warn any potential Opera users that their browser isn’t going to work with our site - at least no the way it’s supposed to. Maybe some day in the future Adobe will fix this anoying bug (or Opera will), but for now I guess we’ll only support the major three browsers.

If I was designing a site for a larger company I think I would be a little more worried, but since absolutly zero percent of Stock20’s customers use Opera, I’m not worried at all.

Anyway…. to use deep linking, you have to use Flex’s BrowserManager and IBrowserManager.
You’ll need the following:

	        import mx.events.BrowserChangeEvent;
	        import mx.managers.IBrowserManager;
	        import mx.managers.BrowserManager;
	        import mx.utils.URLUtil;
	        private var browserManager:IBrowserManager;

And then, in your applicationComplete event handler function:

				browserManager = BrowserManager.getInstance();
				browserManager.addEventListener(BrowserChangeEvent.BROWSER_URL_CHANGE, parseURL);
				browserManager.init("", "www.Stock20.com");

And here is my custom parseUrl function:

            private function parseURL(event:Event = null):void{
            	if (browserManager.fragment != "") {
	            	var urlObject:Object = URLUtil.stringToObject(browserManager.fragment);
	            	var tmpString:String;
	            	var tmpArray:Array;
	            	var i:int;
	            	var tmpModuleName:String;
	            	for (var key:String in urlObject) {
	            		tmpString = urlObject[key].toString();
	            		if (tmpString.substr(0, 1) == "(" && tmpString.substr(-1, 1) == ")") {
	            			tmpString = tmpString.slice(1, -1);
	            			tmpArray = tmpString.split(".");
	            			for (i = 0; i < tmpArray.length; i++) {
	            				if (key.toLowerCase() == "mainapplication") {
	            					handleUrlVariables(tmpArray);
	            				} else {
		            				tmpModuleName = findModuleNameFromString(key);
		            				if (tmpModuleName != "") {
		            					sendModuleData(tmpModuleName, "urlVariables", {"urlVariables":tmpArray});
		            				}
	            				}
	            			}
	            		}
	            	}
            	}
            }

Everything is fairly straight forward here (especially if you read the documentation), but I’ll explain how my custom parseUrl function works…

It first uses the URLUtil class to convert the url fragment into an object. Then it loops through that object and looks for an opening and closing () in the value of each key. If it finds one, it then splits the returned string into an array and then sends that array of values to one of the modules.

Obviously you probably wouldn’t want this type of url parsing in your application, but since my application uses modules, I had to devise a way to specify which module was to get which parts of the url. So I came up with this syntax:
modulename=(data.data.data);modulename=(data.data.data)
The modulename is obviously the name of the module. The data.data.data is any number of urlencoded text, each seperated with a period. You can seperate multiple module’s data with a semi-colon.

It may sound complex, but in reality, it’s very simple. If I need to pass data on the url to a specific module, I just write the module name, followed by it’s data, and since I can support upto 2000 characters in a url, I can store a fairly good amount of information.

What I plan to do with this is allow a user to bookmark a page, or copy a url and give it to a friend. This will allow for saved search results, and to come back to a specific song and track in our application.

Here is an example url fragment and what it would do in my application:
#searchtools=(a16.a17.o18.o20);mediaplayer=(s16.t411)
This url fragment sends data to both the SearchTools and the MediaPlayer. The SearchTools get the 4 selected categories, and the MediaPlayer gets the current song id and track id.