EditProblem statement
One of the huge problems with RIA technologies is that they break the conventions that the users are accustom to in the browser. One large example of this is the use of the back and forward button in the browser.
EditDefault Action
If you don’t do anything, the default action is to unload the HTML page that contains your application and browse to the previous HTML page. Think about the user’s perspective on this. If you were 4 pages into filling out a wizard of some sort and they click the back button because they wanted to get to page 3 of the wizard, unloading the application is not the expected behavior. Especially because if they were in a standard HTML application, back would go to the previous HTML page which is the previous page in the wizard.
EditWhat you should not do
The immediate reaction from most desktop developers is “Wow – the back button is evil and we should disable it…” That’s a terrible idea because it really breaks the experience.
EditWhat you should do
The correct answer is to manipulate the history with the back and the forward buttons to do the right thing based on your application and where you are. If you are at the start of your application or there’s no data to be lost, you should allow the navigation back the previous page. Otherwise, you should do the navigation back and forth in your own application.
There are a few different methods of accomplishing this depending on your technology. One of the simplest is to leverage the hash tags idea in hyperlinks to do deep linking within your application.
For example, http://www.riapractices.com/somepage.html#sometext There are a few good things about this.
First, it’s an established protocol that all browsers understand.
Second, in the URL above, you don’t navigate to a different page so your application is not unloaded and you don’t lose your state but it does get added to the history so the navigation buttons are still correct.
The trick is that you have to subscribe to the navigation events in the browser and react to them appropriately.
EditAJAX example
This is a problem that’s been tackled over and over by the AJAX community. Here’s a bunch of different solutions.
jQuery History Plugin
Prototype History Extension
Scott Guthrie blogs about MS-AJAX Support for NavigationEditSilverlight example
There are a couple of techniques that leverage new features in IE8. I’m not listing those here because I think that we should be striving for cross platform/browser capable solutions in our RIAs.
Silverlight and AJAX History
Telerik’s Navigation ControlsEditFlex example