Set Application State From Flex to URL

Although this didn't turn out to be difficult by any means, I thought I'd throw it up anyways...

I came across the requirement to save the current "view" or "state" into the URL (much like Google Maps does with their "Link to this page" feature) for my Flex 2.0 application. I ended up throwing together a solution that works the same way as Yahoo Maps does, using the a hash in the URL string.

From my Flex app, I added a function which called an external JavaScript function to reset the URL with the values I wanted added...

App.mxml (excerpt)
----------------------------------------------
private function changeDocumentURL():void
{
var urlString:String = "var1=test1&var2=test2";
ExternalInterface.call("myJSFunction", urlString);
}


Inside my HTML wrapper for my swf, I add my JS function that's getting called.

App.html (excerpt)
----------------------------------------------
function myJSFunction(newString)
{
location.replace('#' + newString);
}


When I make the call for changeDocumentURL() it sets the string of variables in urlString to the browsers url (but DOESN'T reload the page)

Browser URL now looks like: http://www.visualconcepts.ca/App.html#var1=test1&var2=test2

Now for the flip side... looking into the script used to initiate the swf object in our HTML wrapper page App.html there is already an entry for flashvars which we can simply append to:

App.html (inside the AC_FL_RunContent() JS function)
----------------------------------------------
var preLoadFlashVars = location.hash ? location.hash.substr(1) : '';
"flashvars",'historyUrl=history.htm%3F&lconid=' + lc_id + '&' + preLoadFlashVars


Back inside App.mxml file, accessing the input vars is simply done using:

App.mxml (excerpt)
----------------------------------------------
Application.application.parameters.var1
Application.application.parameters.var2

So simple, but so cool!