|
This tutorial shows you how to use the history and bookmark mechanism in order to create your own history manager.
Overview
It is a well-known problem when creating a Rich Internet Application that pressing the Back and Forward buttons may not cause the result that the user intuitively expects. The Backbase Client Framework provides a History Manager, which allows you to record user interactions and provides the user with the possibility to retrace his or her actions by pressing the Back and Forward buttons in the same way as for a Multi-Page Interface (MPI).
The Definition
Below you can see the definition of the tabBox. The tab box has a handler that adds a history event listener when the tab box is inserted into the page.
<b:tabBox>
<e:handler event="DOMNodeInsertedIntoDocument" type="text/javascript">
<![CDATA[
// Add the handler for history actions!
var oTabbox = this;
// Function used for restoring the tabbox
function bookmarkTabbox(sTab){
// It is a tabselect
if(sTab.indexOf('tab') == 0){
var iTab = sTab.charAt(3);
oTabbox.setProperty('selectedIndex', iTab-1);
return true;
}
return false;
}
// Add the tabbox update to the history event
bb.document.addEventListener('history', function(event) {
bookmarkTabbox(event.bookmark);
}, false);
// Restore the initial state
if (!bookmarkTabbox(bb.history.current)) {
// Add the first tab because there will be no select event for it
bb.history.add('tab1', 'Tab 1');
}
]]>
</e:handler>
<b:tab label="Tab 1">
Tab 1
<e:handler event="select" type="text/javascript">
// Add the action to history
bb.history.add('tab1', 'Tab 1');
</e:handler>
</b:tab>
<b:tab label="Tab 2">
Tab 2
<e:handler event="select" type="text/javascript">
// Add the action to history
bb.history.add('tab2', 'Tab 2');
</e:handler>
</b:tab>
<b:tab label="Tab 3">
Tab 3
<e:handler event="select" type="text/javascript">
// Add the action to history
bb.history.add('tab3', 'Tab 3');
</e:handler>
</b:tab>
</b:tabBox>
Looking at the code, you may notice the DOMNodeInsertedIntoDocument event handler of the b:tabBox:
- First, the bookmarkTabbox function is defined, which takes a string as an argument identifying a tab in the tabBox. The function simply sets the tab given as the argument for the selected tab.
- Next, a history event listener is added to the bb.document. When the history event fires because the user presses the Back or Forward button, the bookmarkTabbox function will be called.
- Finally, if there is no bookmark yet, then a bookmark for the first tab is added, because initially there is no select event for it.
Each of the tabs has a select event handler that adds a bookmark to the bb.history object.
Live Demo
The live demo is loaded in a pop-up window when you click the button below. Resize the pop-up window if needed, so that you can see the complete URL in the address bar. Click on a few tabs in a sequence that you can remember. Then press the Back button to focus the tabs in reverse order and the Forward button to replay your actions.
Download
You can download a zipped version of the example provided on this page to try it out for yourself.
Note: Make sure to extract the content of this zip file to the root folder of your web server or application server (for example, htdocs), and then run it from your local development environment.
Additional Resources
For more information on history and bookmarking, refer to the following documentation:
