Deep linking in Flex: using SWFAddress and BrowserManager

In Flex 3 there is support for deep linking in the BrowserManager class. Unfortunately it requires that you use the Flex HTML templates which, frankly, are really ugly. I prefer to use SWFObject to embed my Flash and Flex applications. To solve this I have created a simple package that makes it possible to use the BrowserManager class with SWFAddress. You can find it and a description on what it does here: Flex BrowserManager + SWFAddress integration.

27 Responses to “Deep linking in Flex: using SWFAddress and BrowserManager”

  1. sectore Says:

    Thanks for sharing this, Theo! I totally agree with your conclusion, that the standard HTML template created by Flex Builder really sucks.

    -sectore

    http://www.websector.de/blog/

  2. Lauren Says:

    Hey, we’ve got an entry on our blog that’s an update on what you have here. Check out our deep linking example and see if it helps you:

    http://9mmedia.com/blog/?tag=deep-linking

  3. Theo Says:

    Lauren:

    Have you looked at my integration kit at all or are you in fact just trying to get linked to? Your article seems to be nothing more than an example of how to use the BrowserManager, and in that it doesn’t seem to add anything to the BrowserManager documentation.

    What I’ve done is creating an integration kit which let’s you use BrowserManager with SWFAddress instead of Adobe’s default embed code, how are you updating on that, and are you even using it at all?

  4. Lauren Says:

    There’s no need to attack, the point of blogs is to share other information that could be helpful.

    You posted on deep linking using BrowserManager and SWFAddress, I responded with a similar post about another way to implement deep linking.

    In fact, I just noticed that you posted a comment on our article so we can’t be completely unrelated.

  5. Theo Says:

    It sure sounded like you hadn’t bothered to read the post, sorry that I was harsh.

  6. Theo Says:

    Ok, so now I’m really confused as to what you mean by “update to what you have here”, I did comment on your post, but to say that I had written a backend that could be used with BrowserManager.

    I still think you haven’t understood what my integration kit does, it’s not an alternative method for deep linking, but an alternative backend to BrowserManager. Nothing changes on the Flex side, the code on your blog would run just the same, but it would be another bit of JavaScript that handled things on the browser side.

  7. willwork Says:

    Hey Theo-

    Does Flex’s BrowserManager work with Google Analytics? Can Analytics track pages like swfAddress does?

  8. Theo Says:

    Out of the box BrowserManager doesn’t integrate with Google Analytics, at least not automatically. You could set up some kind of event listener and call the GA tracking code manually when the state changes, but that’s not practical.

    However, if you use my BrowserManager/SWFAddress integration kit you can work with BrowserManager just as before, but have SWFAddress do the GA integration for you (it will do this automatically if it detects that the GA script is loaded).

    What happens is that when you change the properties of the BrowserManager instance in your application, it calls some JavaScript code which in turns tells SWFAddress that the state has changed. SWFAddress updates the URL and the page title, and then checks to see if the GA tracker is present. If it is, it calls it with the new URL.

  9. willwork Says:

    Thanks, Theo. I like swfAddress and will definitely check out your integration.

  10. Smith Says:

    How can i get your example work? got error: Error: Could not install browser history script: ReferenceError: SWFAddress is not defined at net.iconara.state::SWFAddressBrowserHistory$/install()[/Users/theo/Documents/Projects/aslib/src/net/iconara/state/SWFAddressBrowserHistory.as:22] at Main/onPreinitialize()[C:\Documents and Settings\raymonds\My Documents\Flex Builder 3\SWFAddress_BrowserManager\src\Main.mxml:25]

  11. Theo Says:

    You need to make sure that SWFAddress is included on the HTML page.

  12. RG Chowdary Says:

    When I try to run your example on Flex Builder 3, I got the following error.

    Error: Could not install browser history script: ReferenceError: SWFAddress is not defined

    do I need a Java plugin to run your example???

    If not please help to run the sample.

    Regards, RG

  13. Theo Says:

    @RG Chowdary

    See the comment above yours.

  14. Ben Says:

    Hey Theo,

    nice work. Could it be, that the integration kit is not fully compatible with the latest SWFAdress v2.2? When I click around in my Flex app the browser url gets updated correctly, but the other way round, if I click the browser back button, the BrowserChangeEvent.BROWSER_URL_CHANGE never gets fired …

    Thanks, Ben

  15. Theo Says:

    It does seem like it’s not compatible with SWFAddress 2.2, but I don’t see the same problem as you do. In my quick tests the problem I have is that the BROWSER_URL_CHANGE event is dispatched too much. Using the back button works fine, though.

    When I log what my application does and what SWFAddress reports it really looks like there’s a bug in SWFAddress 2.2. Using 2.1 it only reports changes when my application requests changes and when I use the browser buttons, but in 2.2 it reports changes where there shouldn’t be any, where my application doesn’t request them. If it’s not a bug it’s definitely a change in 2.2 that does something differently.

    I’ll see if I can get some more time to research the problem further.

  16. Victor Says:

    Thanks for sharing! I find this immensely useful – when I get it to work properly :-) Which seems to be half of the time, and I just can’t figure out what I do wrong. On some of my projects I get this error message:

    Error: Could not install browser history script: Error #2060: Security sandbox violation: ExternalInterface caller file:///Users/victor/Sites/FlexProjects/myProject/bin-debug/Main.swf cannot access file:///Users/victor/Sites/FlexProjects/myProject/bin-debug/Main.html.

    Which is weird, cause the file is cleary there.

    I also get a “source not found” error, with a button that reads “Edit Source Lookup Path…”. Source to what? The SWC-files? Both SWC-files live happily in my sdks/3.2.0/frameworks/libs folder and code-completion works as expected.

    The weird thing is, if I copy an mxml file from a project where the installation was successful to a project where it was not, it stops working. Some times it works properly while debugging, but not when I export a release build. I use SWFOject 2.1, SWFAddress 2.2 and Flex 3.2, reference both js-filens in my template, and include both id and name. Any suggestion is greatly appreciated…

  17. Theo Says:

    @Victor

    ExternalInterface throws security errors when you run the application locally (any non-HTTP/S URL). There is a way to turn that off in the Flash Player settings — right click on the application and choose settings and try to find the security settings and add your local folder to the list of trusted places, or something like that. The other option is to always test through a webserver.

    Also, there seems to be some issues with SWFAddress 2.2, see the post above yours.

  18. Sander Says:

    Hey Theo, great work! I was wondering if there’s a way to get SWFAddress to work without including it on the HTML page? In case you can’t change the HTML page for example.

    Could that be solved using Javascript injection for example? I’ve tried a number of things (using ExternalInterface.call(”), but so far without luck. I guess persistence is an issue, if not included on the html page? Any suggestion would be greatly appreciated… (this would be a flash-based scenario btw)

  19. Theo Says:

    You should be able to use the same strategy I use with SWFAddressBrowserHistory, just include the JavaScript code in the compiled ActionScript, and inject it into the JavaScript runtime via ExternallInterface. Check out the source of SWFAddressBrowserHistory (available from the download page) to see how I do it.

    Instead of including the whole SWFAddress code in the ActionsScript you could also just inject a piece of JavaScript that inserts a new script-tag that points to SWFAddress.js, that should work too, but you get some issues with timing instead. Don’t try to install SWFAddressBrowserHistory until SWFAddress has loaded.

  20. zenMonkey Says:

    My flex project is throwing this error:

    Error: Could not install browser history script: Error: Could not find application node at net.iconara.state::SWFAddressBrowserHistory$/install()[/Users/theo/Documents/Projects/aslib/src/net/iconara/state/SWFAddressBrowserHistory.as:49] at DataVisualization/initBrowserManager()

    Any suggestions? The install method is being called on preinitialize and i tried it on creationcomplete too.

  21. Theo Says:

    @zenMonkey: your object or embed tag probably has no ID. Unless it has an ID there is no way for the JavaScript environment to call into the Flash environment, and nothing will work.

  22. Mark Says:

    I am not sure of the benefit of this approach if one simply uses swfAddress for URL management and embeds its tag in the wrapper (since it requires swfobject in the template anyhow).

    Why would you also use BrowserManager if you have swfAddress installed?

    Thanks.

  23. Theo Says:

    @Mark: I assume from your comment that you haven’t used Flex’ BrowserManager. In one way it’s a replacement for SWFAddress, but that’s only because it comes with its own JavaScript implementation, but it does a bit more than that on the Flex side of things. SWFAddress’ Flash/Flex libraries are a joke, and BrowserManager’s JavaScript libraries are ugly, but using the best of both worlds is a pretty neat combo.

  24. Mark Says:

    Have used BrowserManager. However, I see some strengths and weakness in each.

    BrowserManger actually has better event handling in that it differentiates how the URL changes (application or browser) which swfAddress does not.

    swfAddress, though not very sophisticated has some functionality coded that is helpful (though constrained) in parsing URLs that you would have to implement yourself in some way to use the fragments from BrowserManager.

    So, per your comment on the best of both worlds and your class, I suppose you use BrowserManager for better control of what is going on with address changes and swfAddress for its built in functionality with say google analytics (and possibly if you are lazy use it url parsing capabilities).

    Any other advantages to your approach I am missing?

  25. nath Says:

    Just out of interest does anyone now if this will work the same in Flex 4 with flash builder? ..it might be a stupid question but I was just intrigued

  26. Nami Says:

    Hi,

    I have a persistant problem with SwfAddress.

    It appears that when my flex application is loaded directly to my navigator, change event is transmited to my application. But if it’s embedded in an html page, event is only transmitted on page loading, and that’s all.

    I can change URL, nothing appear..

    Could you help me ? I spent already 2 days on the problem and didn’t find any solution :(

    Thanks a lot

  27. Theo Says:

    I’m not sure what’s going on there, but try asking the question over on http://www.stackoverflow.com and I’m sure you’ll get an answer in no time.

Leave a Reply