After adding a state to the browser's history, users can then surf among these states such as pressing the BACK button to return the previous state. When the state is changed, ZK will notify the application by broadcasting the onBookmarkChanged event (an instance of the org.zkoss.zk.ui.event.BookmarkEvent class) to all root components in the desktop.

Unlike traditional multi-page Web applications, you have to manipulate the ZK desktop manually when the state is changed. It is application developer's job to manipulate the desktop to reflect the state that a bookmark represented.

To listen the onBookmarkChanged event, you can add an event listener to any page of the desktop, or to any of its root component.

<window onBookmarkChanged="goto(event.bookmark)">
    <zscript>    
    void goto(String bookmark) {    
        if ("Step-2".equals(bookmark)) {        
            ...//create components for Step 2            
        } else { //empty bookmark        
            ...//create components for Step 1            
        }        
    </zscript>    
</window>

Like handling any other events, you can manipulate the desktop as you want, when the onBookmarkChanged event is received. A typical approach is to use the createComponents method of the org.zkoss.zk.ui.Executions class. In other words, you can represent each state with one ZUML page, and then use createComponents to create all components in it when onBookmarkChanged is received.

if ("Step-2".equals(bookmark)) {
    //1. Remove components, if any, representing the previous state    
    try {    
        self.getFellow("replacable").detach();        
    } catch (ComponentNotFoundException ex) {    
        //not created yet        
    }    

    //2. Creates components belonging to Step 2    
    Executions.createComponents("/bk/step2.zul", self, null);    
}