Flex 2 Applications and Bookmarking 101

We all know what browser bookmarks are, right ?

Well of course we do.

Browser bookmarks are composed largely of a URL and some meta-data.

How would we go about allowing a Flex 2 Application to handle bookmarks in the same way as any HTML based Application ?

The Problem

Flex 2 Applications use only one URL, assuming the goal was to present the application using a single HTML page.

It is not useful to create a bookmark for the URL that invokes a typical Flex 2 Application because the URL that launches the application merely allows the application to be shown in a browser.

The Solution

The solution is very simple, almost too simple.

The html-template for the Flex 2 application needs some JavaScript code that does nothing more than to modify the URL that appears in the browser’s address bar.  This can be done using JavaScript “window.location.href = ‘’;”

The JavaScript that modifies the URL will be invoked using the ExternalInterface from Flex2.

The Tricky Part

What can you do to a URL without causing the browser to reload the page of content ?

Someone recently asked me this question and it was so simple I had forgotten it briefly.

Okay, here’s what I recalled sometime later after I came to my senses.

Remember the “#” (pound sign) ?  Yup, you can modify a URL using a “#” with anything you want to the right of the “#” without causing the browser to reload the page of content.

The Easy Part

The following JavaScript code will modify the URL without reloading the page of content:

window.location.href += “#” + “anything-you-want-this-to-be”;

Tie GUI Actions to Bookmarks using Flex 2

Let’s say you have a GUI Button that when clicked causes the browser’s URL to indicate that the button was clicked so the user can bookmark the action for the purpose of returning at a later time.

Every time this GUI Button is clicked the browser’s URL will be modified to show something to the right of the “#” we can use later to cause the GUI to show that the button was clicked.

This is all very simple, isn’t it ?

Tie Bookmarks to GUI Actions using Flex 2

How can we retrieve the information that appears to the right of the “#” using Flex 2?

Again, this is all too simple.

The Application.url variable holds the URL that caused the Flex 2 Application to start-up.

Code an event handler for the “creationComplete” event for the Application and then retrieve the information to the right of the “#” and now you have whatever information was made part of the bookmark to allow the appropriate GUI actions to be performed automatically so that the user feels like the bookmark actually meant something such as returning to a certain place within the application.

Conclusion

Obviously the code one would have to write to make this bookmarking magic happen would be a bit tedious and it might have to be a bit different and unique for every Flex 2 Application.

Surely some enterprising soul out there would be able to produce some kind of automatic means for making bookmarks in a Flex 2 Application quick and painless.

You can get the JavaScript code for this article from “flash.ez-ajax.com” by viewing the source for the page that launches the Flash site.

You can get the Flex 2 code for this article by reviewing those String functions that allow strings to be parsed based on a delimiter such as the “#” symbol.  The rest of the Flex 2 code would be specific to the specific Flex2 Application and might not be all that useful to every other Flex 2 Application.

Carefully constructing the information you want to appear to the right of the “#” in the URL for a Flex 2 Bookmark will make the task of using the bookmark either easy or difficult.  You will only know how to do this by working with the required techniques often enough to make it second nature to you.

Sure, you could code an Event or two to make it fairly easy to modify the browser’s URL based on specific GUI locations and actions.

You could keep track of certain paths your users would follow when traversing your Flex 2 GUI and then code the user path into the URL to the right of the “#” and then interpret the path at runtime when starting-up your Flex 2 application but again this depends on a specific implementation.

It is a bit surprising that Adobe didn’t add bookmarking support to Flex 2 in some automatic manner but it seems this was overlooked and left in the hands of those of us who love to code Flex 2.

The amusing thing for me is that I actually knew how to do this Flex 2 Bookmarking thing but I temporarily spaced it one day when I was asked about it only because I had not even thought about this topic for some months.

Maybe someday I will even produce some Flex 2 code to handle all this Bookmarking stuff but that code will likely become part of some kind of Flex 2 Framework I might choose to use for my own Applications.  Rest assured, if that day ever does come around for me I will surely produce some kind of SWC and distribute it at my website just for the amusement more than anything else to be sure.