JavaScript DHTML/SmartClient/History
Back button history management
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_History.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY> <SCRIPT> DynamicForm.create({
ID:"pane1", autoDraw:false, titleOrientation:"top", itemChange : function () { Page.setUnloadMessage("Exiting the page now will lose changes"); }, fields:[ {name:"firstName", title:"First Name"}, {name:"lastName", title:"Last Name"} ]
}); DynamicForm.create({
ID:"pane2", autoDraw:false, titleOrientation:"top", itemChange : function () { Page.setUnloadMessage("Exiting the page now will lose changes"); }, fields:[ {name:"officeNumber", title:"Office Number"}, {name:"mobileNumber", title:"Mobile Number"} ]
}); DynamicForm.create({
ID:"pane3", autoDraw:false, titleOrientation:"top", itemChange : function () { Page.setUnloadMessage("Exiting the page now will lose changes"); }, fields:[ {name:"address", title:"Street Address"}, {name:"city", title:"City"}, {name:"state", title:"State"}, {name:"zip", title:"Zip"} ]
});
// whenever history is navigated, call this callback isc.History.registerCallback("historyCallback(id)"); // on page load, restore tabset state isc.Page.setEvent("load", "restoreTabSetState()"); function restoreTabSetState() {
isc.Log.logWarn("restoring state"); // if we have history state, our callback will fire. Otherwise, we need to inspect the URL // to see if there"s history ID in there - this is what happens when the user bookmarks one // of the history URLs, closes the browser, opens a new one and then navigates to the bookmark. if (!isc.History.haveHistoryState()) { tabSet.jumpToTab(isc.History.getCurrentHistoryId() || 0); }
} function historyCallback(id) {
// the id is the tabNum and null is initial state - which is the first tab. tabSet.jumpToTab(id == null ? 0 : id);
} TabSet.create({
ID:"tabSet", top:50, left:50, width:600, height:400, rememberHistory : true, jumpToTab : function (tabNum) { this.noHistory = true; // convert string to number this.selectTab(new Number(tabNum)); this.noHistory = false; }, tabSelected : function (tabNum) { if (!this.noHistory && isc.Page.isLoaded()) isc.History.addHistoryEntry(tabNum); }, tabs:[{title:"red", pane:pane1, width:70}, {title:"green", pane:pane2, width:70}, {title:"blue", pane:pane3, width:70}]
}); </SCRIPT> </BODY> </HTML>
</source>