Code examples of HTML5 push state use in and Errai 3.1.2

[hr.stoyanov]

Hi all,

I need to manipulate the browser URL of an Errai single page application (SPA) without causing  page refresh, so that the browser has correct page state history. From my research, this is exactly what HTML5 push state/history APIs do.

Errai docs imply HTML5 push state is supported in page states via some external GWT library, but I did not see anything on how to directly manipulate it.

Can someone point me to code snippet/example of doing this?  if I construct a HistoryToken, how do I set it in the browser URL, without causing refresh?

Specifically, I have some internal page tab controls, the state of which I would like to record in the url, possibly using the Errai/GWT equivalent of this JS History API: history.replaceState(...)

Can this be done elegantly without resorting to JSNI or downloading extra GWT modules, straight from Errai?

Thanks.

[ddadlani]

Hello Hristo,

You can take a look at Errai's Grocery List demo for pushstate functionality. The push state flag is set in index.html, and you can set custom page paths by using the 'path' parameter in the @Page annotation. For more information you can take a look at Errai Reference Guide - Page State Parameters.

Cheers,
Divya

[hr.stoyanov]

Divya,
Thanks.  I know about page path and page states as described in the docs, but that is not enough. Let me try to explain my issue better:
1. I have an ERRAI web app. In one of the pages I have internal tabs and buttons .
2. As  the user clicks on the tabs and buttons, I simply want to manipulate the url and browser history, reflecting
the internal page state. According to the HTML5 History API, this can be done with JS replaceState(...).
3. I do not want to cause Errai switching pages, as this causes pageShowing, etc, which I already use for data loads

My question is :
1. Should is use JSNI to call replace state?
2. Should I include J. Barops GWT package and use it? I did not see a clear, 5-line example, but if I spend some time digging the sources and test cases I can figure it out.
3. Does Errai offer more elegant API, possibly exposing J. Barop's APIs

Thanks.l

[ddadlani]

Hello Hristo,

There currently isn't a way to manipulate the URL without triggering a page navigation. However, one possible workaround would be to extend PageNavigationErrorHandler with your required functionality, since Errai navigation uses that to deal with any unrecognised URLs entered into the browser's location bar.

You could also submit a feature request at Errai - JBoss Issue Tracker if you feel that this should be explicitly implemented in Errai Navigation.

Cheers,
Divya

[hr.stoyanov]

Divya,

I filed a request for this feature here:

[ERRAI-854] HTML5 pushTSate enhancements - JBoss Issue Tracker

[ddadlani]

Hello Hristo,

We took a look at your feature request, but we decided against implementing it as exposing the pushstate API is not the purpose of Errai Navigation. Instead, you can declare your own page path with a custom parameter, and use the parameter to determine the content to display on your page.

You can also use JSNI to change the page state, as you have already mentioned.

Cheers,
Divya