Link Manager – Deep linking in Flex

I’ve been working on a project recently and it came time to add deep linking. I looked into Adobe’s Browser Manager class and found an amazing API for deep linking but I wanted it in MXML. So I added a few features and wrapped up the behavior so it only takes about one line of code to add deep linking to your app. Well, sortof. Anyway, here it is.

Advanced Example project
Basic Example project

Test deep linking with the test panel

At the minimum all you have to add is this:


The Link Manager automatically adds links in the browser as you move through the states in your application. It also “reads” the url when the page loads in the browser and automatically moves the application to that state.

Every time the state changes it updates and “writes” the project name and current state to the browser title and then writes the permanent link to the browser address bar.

All you need to do is to add the link manager to the application. You do not need to specify any parameters although additional options are available.

If you want to modify what is written to the browser address bar you can use the writeLinkFunction.

If you want to modify the application when you “read” the url in the address bar you can use the readLinkFunction and perform additional actions and/or redirect to a different state.

If the url contains incorrect data, ie if it points to a non existant state. You can use the stateNotFound property to send the user to a “state not found” state.

You can get the source by right clicking on the links. I’ve also uploaded it to an SVN repository, http://www.assembla.com/wiki/show/flexcapacitor getting the most recent version and contributors. Note: If you’ve read that page you’ll know I have a couple of announcements coming up. BTW the license for the Link Manager is MIT (free for commercial use).

This entry was posted in Flex. Bookmark the permalink.

14 Responses to Link Manager – Deep linking in Flex

  1. Rich Tretola says:

    FYI, it is not mentioned in the post, but the examples require FP10 to run.

  2. Judah says:

    Ok. I see. I published it to require 9.0.124. If you have something less than then I think that’s what’s asking you to upgrade. I’ll lower the minor number. http://www.macromedia.com/software/flash/about/

  3. Nick says:

    Works in 9 for me.

  4. Judah says:

    Someone mentioned another site I put up recently requested the user to install Flash Player 9 UB (or some variant). Not sure what that’s about but I’m documenting it and mentioning it here.

  5. Sathish says:

    Hi judah,
    Thanks for the Post. It is very useful.
    When i run the sample application directly from your site, It works fine.
    But when i download the source and set it up in my local Flex Builder ( Version 3 ). It does not work under IE 7. Is there any special step involved for IE 7.

    Thanks & Regards,
    Sathish

  6. Judah says:

    Hi Sathish,

    What happens if you put it on a server, localhost or http://www.yoursite.com? I have the latest version in the repository, http://www.assembla.com/wiki/show/flexcapacitor, which has a couple bug fixes.

  7. Sathish says:

    Hi judah,
    Thanks … It works fine when i run it as wep application ( localhost )
    Regards,
    Sathish

  8. Jeethu says:

    Hi judah,

    Can these URLs be indexed by google or any search engine ? And can these urls be put in a sitemap.xml file ? I’m just wondering if this will assist in SEO in any way…

  9. Momchil says:

    Hi Judah,

    I have a question regarding the URL navigation, for example if I type a URL wrong like (http://drumbeatinsight.com/examples/linkmanager/AdvancedExample.html#state=contact2) on Firefox it works fine and takes me to the state not found page. However on IE7 it just keeps refreshing the page. Only happens when you’re already on the example site and it gets fixed if you right click. If you just copy and paste a wrong url link into a blank IE7 it works fine. Can you provide some help with that.

    Thanks,

    Momchil

  10. Judah says:

    @Jeethu – I don’t know but in the past google was not able to index anything after the question mark, “?parameter1=value”. ajax, flex and flash (gaia) are all using the hash mark for asynchronous calls now. i think it’s on the board at google – http://searchengineland.com/google-io-new-advances-in-the-searchability-of-javascript-and-flash-but-is-it-enough-19881

    @momchil – that’s a bug! i’ll see what might be causing it…

  11. Juan says:

    Chrome it don’t works

    • Judah says:

      @juan – i have heard that recently an update to chrome has broken it. it’s using the flex browser manager up until this point. the fix would be for me to replace the browser manager with swfaddress. i can update it fairly soon.

  12. philihp says:

    @Judah, any luck with figuring out that bug? I’m having it too. It poses an issue because JQuery’s Address API will add in a question mark when using parameters in the hash (which is a totally valid thing to do)

Leave a Reply

Your email address will not be published. Required fields are marked *

Wrap your code before posting! Click the links below:

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">