HTML5 specification introduces new History API:
history object can use
pushState() to push given data onto the session history and change the URL to a given one, if provided.
- When history changes, browser will fire an
onpopstate event to
How to Use?
The only thing you must do before start digging into the code is to download ZKPS.jar and put it in classpath so you can call
PushState.push(Map, String, String) in Java and set
onPopupState attribute on root element in ZUL.
Follow the example in the next section will make this more clear.
Following Ashish’s example in History management with HTML5 History API in ZK which contains three textboxes and (filter)buttons. You could input some text in the textbox to search for the content you want and upon clicking the filter button, listbox will display filtered data based on the text entered in the textbox.
I will re-write his example using ZKPushState and MVVM, the ZUL code of the buttons would be as follows:
In the View Model, the command method writes:
The function of
doFilter is to rebuild the model of listbox. At the end of
filter(), I invoke
PushState.push() which will execute
history.pushState() on client side automatically. At this point in time, the URL will change and end users can go back to its previous state by clicking back on the browser and going back to the previous page.
This is what happens: after a few searches, browser will keep some states to bind with the give URL. When end users click the browser’s “back” button, ZKPushState will fire a
PopupStateEvent, therefore, I need to add
onPopupState on the ZUL root element like the following:
In the view model, the command method writes:
We can retrieve the state by
event.getState() which will return a
Map<String, ?> instance. To do this, we call
doFilter with arguments returned by
PopupStateEvent, listbox will thus show the same data as before (before the user exited this page previously).
You can download the complete source code for this example and ZKPushState from its github repository here.
Any feedback is welcome 🙂