HistoryPopStateEvent
From Documentation
HistoryPopStateEvent
- Demonstration: N/A
- Java API: HistoryPopStateEvent
- JavaScript API: N/A
Employment/Purpose
The history pop state event used with onHistoryPopState
to notify that user pressed BACK, FORWARD or others that causes the history changed (but still in the same desktop).
All root components of all pages of the desktop will receives this event.
Example
The example shows how to push a history state and handle a HistoryPopStateEvent
object.
<zk>
<tabbox id="tb" height="300px">
<attribute name="onSelect"><![CDATA[
Tab selected = event.getReference();
int selectedIndex = selected.getIndex();
desktop.pushHistoryState(Collections.singletonMap("tabIndex", selectedIndex), "", "/" + selectedIndex);
]]>
</attribute>
<attribute name="onHistoryPopState"><![CDATA[
Map state = event.getState();
if (state != null)
tb.setSelectedIndex(state.get("tabIndex"));
]]>
</attribute>
<tabs id="tabs">
<tab id="A" label="Tab A" />
<tab id="B" label="Tab B" />
<tab id="C" label="Tab C" />
<tab id="D" label="Tab D" />
<tab id="E" label="Tab E" />
</tabs>
<tabpanels>
<tabpanel>This is panel A</tabpanel>
<tabpanel>This is panel B</tabpanel>
<tabpanel>This is panel C</tabpanel>
<tabpanel>This is panel D</tabpanel>
<tabpanel>This is panel E</tabpanel>
</tabpanels>
</tabbox>
</zk>
- Line 6: Use Desktop.pushHistoryState(Object, String, String) to push a history state.
- Line 9: Listen
onHistoryPopState
on any root component to handleHistoryPopStateEvent
object.
You can handle events in an MVC fashion.
public class TestComposer extends SelectorComposer<Tabbox> {
@Wire
private Tabbox tb;
@Listen("onHistoryPopState = #tb")
public void handleHistoryPopState(HistoryPopStateEvent event) {
Map state = (Map) event.getState();
if (state != null) {
tb.setSelectedIndex((int) state.get("tabIndex"));
}
}
}
- Line 5: Listen the onHistoryPopState event of the root component #tb.
Or you can use a special annotition HistoryPopState if you prefer MVVM.
public class TestVM {
private int selectedIndex = 0;
public int getSelectedIndex() {
return selectedIndex;
}
public void setSelectedIndex(int index) {
selectedIndex = index;
Desktop desktop = Executions.getCurrent().getDesktop();
desktop.pushHistoryState(Collections.singletonMap("tabIndex", selectedIndex), "", "/" + selectedIndex);
}
@HistoryPopState
@SmartNotifyChange("selectedIndex")
public void handleHistoryPopState(@ContextParam(ContextType.TRIGGER_EVENT) HistoryPopStateEvent event) {
Map state = (Map) event.getState();
if (state != null) {
selectedIndex = ((int) state.get("tabIndex"));
}
}
}
- Line 14: a method annotated with
HistoryPopState
can handle HistoryPopStateEvent.
Supported events
None | None |
Supported Children
*NONE
Use cases
Version | Description | Example Location |
---|---|---|
Version History
Version | Date | Content |
---|---|---|
8.5.0 | Oct 2017 | ZK-3711: Support HTML5 history API |