Using the browser navigation buttons

Vaadin 6 / 7 / 8
1

Hi there,

I’m trying to use a Wizard (based on the wizard from the add-on directory), in the Bakery App. However: The example Wizard allows navigation using the browsers ‘back’ button. The example Wizard is started directly from a UI class. In my app, I would like the Wizard to be part of a View class. In that case, the browsers ‘back’ button does not work. This is what I did:

  • In the Bakery app, added a view class: WizardBoardView, to which I can navigate from the MainView.
  • The WizardBoardView is basically a Board (lieke the DashBoardView), and one of the boxes on the board is supposed to be my Wizard
  • The Wizard itself is created as Spring Bean, with annotation @Component, @UIScope (so state is persisted when view changes)
  • The Wizards ‘back’ and ‘next’ buttons work fine, but, using the browsers ‘back’ button results in strange behaviour
  • When I navigate to the WizardBoardView, my browser’s url becomes:http://localhost:8080/#!wizard-board
  • After the first step forward in the wizard, the URL changes to e.g.: http://localhost:8080/#setup
  • And after the second one to :http://localhost:8080/#listen
  • Using the Wizards Back and Next is OK
  • Using the browsers ‘back’, results in: java.lang.IllegalArgumentException: Trying to navigate to an unknown state ‘’ …

I read some documents on your site about PopStateListeners, is that a concept I need to use to be able to use the browsers back button from within a View?
The example used for that also starts from a UI, not from a View, so I cannot use it directly I think.

Thanks for any hints,

2

Which version of Vaadin are you using? When using Vaadin 8, have you tried the UI annotation @PushStateNavigation?

*edit: As I see, the URLs seem to be wrong. The ! is missing, so it should be for example .../#!setup instead of .../#setup.

3

No, not yet, actually: I didn’t know it existed. The name suggests that is related to my issue. I hope it’s documented somewhere???

Thanks, Wouter

4

Yes, it is a new feature introduced in 8.2, enabling HTML5 navigation state handling.

https://vaadin.com/docs/v8/framework/advanced/advanced-navigator.html

5

(but I also recommend to check, why the urls are missing the exclamation mark after the hashtag)

6

Thanks, I’ll have a look next week,
I don’t really understand your remark: “but I also recommend to check, why the urls are missing the exclamation mark after the hashtag”

But that’s is probably due to my lack of knowledge of the web application arena.

My App is based on the Bakery example I started with Vaadin 8.1.5, just now switched to 8.4.4

Wouter

7

The “old” way of handling views in the url was by separating the view name with a #!, like in your example http://localhost:8080/#!wizard-board. At your first step “setup”, your URL changes to http://localhost:8080/#setup. As you can see, here you just have the hashtag # (it should be http://localhost:8080/#!setup, when I got your steps correctly).

Even when using @PushStateNavigation in future, you should check anyway, where this comes from. Maybe the URL is built manually and this could lead to problems later.