HistoryPopStateEvent"

From Documentation
m (correct highlight (via JWB))
 
(3 intermediate revisions by 3 users not shown)
Line 14: Line 14:
  
 
= Example =
 
= Example =
Catch a <code>HistoryPopStateEvent</code> in a MVC controller
+
The example shows how to push a history state and handle a <code>HistoryPopStateEvent</code> object.
<source lang="xml" high="">
+
<source lang="xml" highlight="6">
 
<zk>
 
<zk>
    <window id="win" apply="org.zkoss.MainController">
+
  <tabbox id="tb" height="300px">
         <label id="lbl">Handle history states in MVC fashion.</label>
+
    <attribute name="onSelect"><![CDATA[
        <button id="btnHistoryAdd">Add History</button>
+
      Tab selected = event.getReference();
     </window>
+
      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>
 
</zk>
 
</source>
 
</source>
 +
* Line 6: Use <javadoc class="true"  method="pushHistoryState(java.lang.Object,java.lang.String,java.lang.String)">org.zkoss.zk.ui.Desktop</javadoc> to push a history state.
 +
* Line 9: Listen <code>onHistoryPopState</code> on any root component to handle <code>HistoryPopStateEvent</code> object.
  
<source lang="java" high="12,17">
+
You can handle events in an MVC fashion.
public class MainController extends SelectorComposer<Window> {
+
<source lang="java" highlight="5">
private int position = 1;
+
public class TestComposer extends SelectorComposer<Tabbox> {
 
+
  @Wire
@Wire
+
  private Tabbox tb;
private Label lbl;
+
 
 +
  @Listen("onHistoryPopState = #tb")
 +
  public void handleHistoryPopState(HistoryPopStateEvent event) {
 +
    Map state = (Map) event.getState();
 +
    if (state != null) {
 +
      tb.setSelectedIndex((int) state.get("tabIndex"));
 +
    }
 +
  }
 +
}
 +
</source>
 +
* Line 5: Listen the onHistoryPopState event of the root component #tb.
  
@Listen("#btnHistoryAdd")
+
Or you can use a special annotition <javadoc type="interface">org.zkoss.bind.annotation.HistoryPopState</javadoc> if you prefer MVVM.
public void addHistory() {
+
<source lang="java" highlight="14">
Map<String, Object> map = new HashMap<String, Object>();
+
public class TestVM {
map.put("f1", position);
+
  private int selectedIndex = 0;
map.put("f2", "Clicked: " + System.currentTimeMillis());
+
 
getSelf().getDesktop().pushHistoryState(map, "", "?p" + position);
+
  public int getSelectedIndex() {
}
+
  return selectedIndex;
 +
  }
 +
 
 +
  public void setSelectedIndex(int index) {
 +
    selectedIndex = index;
 +
    Desktop desktop = Executions.getCurrent().getDesktop();
 +
    desktop.pushHistoryState(Collections.singletonMap("tabIndex", selectedIndex), "", "/" + selectedIndex);
 +
  }
  
@Listen("onHistoryPopState = #win")
+
  @HistoryPopState
public void handleHistoryPopState(HistoryPopStateEvent event) {
+
  @SmartNotifyChange("selectedIndex")
Map<String, ?> state = (Map<String, ?>) event.getState();
+
  public void handleHistoryPopState(@ContextParam(ContextType.TRIGGER_EVENT) HistoryPopStateEvent event) {
if (state != null) {
+
    Map state = (Map) event.getState();
lbl.setLabel(state.get("f2"));
+
    if (state != null) {
}
+
      selectedIndex = ((int) state.get("tabIndex"));
}
+
    }
 +
  }
 
}
 
}
 
</source>
 
</source>
* Line 12: Desktop object provides pushHistoryState API to push history status.
+
* Line 14: a method annotated with <code>HistoryPopState</code> can handle HistoryPopStateEvent.
* Line 15: Listening on the onHistoryPopState event.
 
* Line 17: Get history state object map.
 
  
 
=Supported events=
 
=Supported events=
  
{| border="1" | width="100%"
+
{| class='wikitable' | width="100%"
 
! <center>Name</center>
 
! <center>Name</center>
 
! <center>Event Type</center>
 
! <center>Event Type</center>
Line 68: Line 110:
 
=Use cases=
 
=Use cases=
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Description !! Example Location
 
! Version !! Description !! Example Location
 
|-
 
|-
Line 78: Line 120:
 
=Version History=
 
=Version History=
  
{| border='1px' | width="100%"
+
{| class='wikitable' | width="100%"
 
! Version !! Date !! Content
 
! Version !! Date !! Content
 
|-
 
|-

Latest revision as of 09:23, 18 January 2022


HistoryPopStateEvent

HistoryPopStateEvent

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>

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

Name
Event Type
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


Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.