Vaadin vs. the Dreaded Back Button

I owe the Vaadin framework an apology. When demoing some research I’ve been doing on Vaadin to a colleague today, he asked if Vaadin, like many Ajax-oriented frameworks, “breaks” the browser’s back button. What he meant was that when you’re working in a Vaadin app, pressing your normal “back” button in the browser takes you to whatever site you were visiting before you came to the Vaadin app, not to the last place you were inside the Vaadin app.

I told him yes – and hence the source of my apology. Strictly speaking, I was correct: if you take no extra care, then clicking the browser “back” will take you out of your Vaadin app altogether. However, this bothered me, and I went home to tinker with it a bit.

It turns out that Vaadin has full and easy support for “back”, bookmarking, and all of the other URL goodness you might expect in any other kind of web application or site, and it’s so easy.

By adding a component called a UriFragmentUtility to your first Vaadin window, you get a “hook” into the URL of your application, with the ability to both read and write the “fragment” portion of the URL, that is, anything after a # sign in the URL. For example, if your application’s URL is www.foo.com/myapp, then www.foo.com/myapp/#bar will have a “fragment” of “bar”.

I had already wired up my Vaadin to use Spring to dependency-inject it’s components, so I was able to map this fragment directly to the Spring ID’s of my components. So when my app says “www.foo.com/myapp/#bar”, I can have it automagically find the component “bar” and display it in the main area. Invalid names (if the user types a URL I don’t understand) can easily be handled with an appropriate message, or I can just send them back to the main menu.

The reverse is also true: if the user selects a new item from my menu, and the application loads the component, I can use the UriFragmentUtility to set the fragment seen in the URL box – so the user clicks a menu choice, and the URL changes to “www.foo.com/myapp/#baz”.

This means bookmarks work as well: if I bookmark “www.foo.com/myapp/#baz”, and come back tomorrow, it will work just as expected, taking me directly to the “baz” “page” of my app (I use “page” cautiously, as there is in fact no such concept as a “page” in a Vaadin app).

It’s equally easy to handle URL parameters, or to read a format of URL that doesn’t include the “#”, if you are bothered by it. So I can do things like “www.foo.com/myapp/someplace/1234″, and automatically load the component “someplace” and pass it the parameter 1234, or “www.foo.com/myapp/someplace?id=1234″ if you prefer.

All easy, all friendly to the browser back-button – which now does exactly what the user would expect – takes him/her to the last place in the Vaadin app he was.

So as far as I’m concerned, Vaadin doesn’t break the back button at all, and leverages it, bookmarking, and URLs and general very easily.

This also solves the issue of how to Search-Engine Optimize a Vaadin app – but that’s another post for a later day.

Thought I’d pass that along.

Published: December 22 2009

  • tags: