History Management in RIAs

I’ve been doing a lot of experimentation with RIAs recently. First, Mike Chambers and I experimented with integrating Flash and Ajax. Then, I did some work to support deep linking in both Flash and Ajax applications. The next challenge was history management.

History management refers to the ability for users to navigate backward and forward using their browsers’ integrated history buttons. We’ve all been doing this for as long as we’ve been browsing the web. In fact, it’s something most of us take for granted, and even depend on (I know I do).

The problem with history management is that it is not always compatible with Rich Internet Applications. One of the distinguishing features of RIAs is that they eliminate the need for total page refreshes by loading data in the background and updating only portions of page. In most cases, this is done without creating a new entry in the browser’s history table, which means you can’t use your browsers’ forward and back buttons to navigate an RIA. Typically, clicking the back button will take you back to the page you were on before visiting the RIA, regardless of how much you had been interacting with the RIA in the meantime.

Flex automatically addresses this issue using a hidden frame which invisibly creates entries in the browsers’ history table as users navigate a Flex application. It’s a very seamless and elegant approach which seems to work quite well, so I decided to borrow some of the same concepts and apply them to MXNA’s Category Click Feed Report.

The Category Click Feed Report has become our sandbox for RIA experimentation. In the latest build, I added some initial support for history management. To see it in action, go to the report, click around on the categories and feeds, then use your browsers’ back and forward buttons to navigate through your history. If all goes according to plan, you should get the best of both the RIA and standard web interface worlds.

The technique I’m using is slightly different than the one Flex uses. Since Flex only needs to worry about history mangement in Flash, it loads a piece of Flash content in a hidden frame which is able to communicate with the main SWF. MXNA, on the other hand, is a combination of both Flash and JavaScript/HTML, so I needed a more generic approach. The technique I settled on (at least for this first, very experimental version) is basically an Ajax history manager which I’ve extended with the Flash / JavaScript Integration Kit so that it talks to Flash, as well. It seems to work fine on all the browsers I have sitting around me (Firefox, Safari, and IE), but it hasn’t gone through a thorough QA cycle. If you find any issues, please let me know. And if you want the code, it’s all availble by viewing the source of the page (and the Flash chart). None of it is obfuscated, so you’re welcome to it.

7 Responses to History Management in RIAs

  1. Erki Esken says:

    Doesn’t work in Opera 8.01 :(Back button is there and going back does something, but the Flash state doesn’t change.

  2. felix says:

    “The problem with history management is that it is not always compatible with Rich Internet Applications.”Shouldn’t that be the other way around? 🙂

  3. mrgoose says:

    Christian,Thought you might like to check out an implementation of the JavaScript -> Flash:http://www.wimpyplayer.com/products/mp3/javascript_mp3_player.html-mike

  4. ronald S Gold says:

    Holy Cow!This is a lot for my little brain to get a hold of. I know ActionScript 2.0 and am familiar with Javascript and HTML and I have briefly glossed over the source of MXNA Feed Report but I have no idea what is happening there. And what does that external “showElement.js” do?Can you recommend a starting point to get a better grasp of this?

  5. Hi Cantrell,I want more information about Flex. Can you help me ?I am a developer from Rio de Janeiro – Brasil.Please help me.I really apreciate this product and what we can do with it. So i cant see any information about price and conditions to buy.Oh, good luck with your home office.Thanks

  6. My URL in the messenge below is wrong. Sorry. Bye.

  7. I don’t also know Mrgoose how it is happening, I hope that cantreel more it will explain.