Blame | Last modification | View Log | RSS feed
<html>
<head>
<script language="JavaScript" type="text/javascript">
// Dojo configuration
djConfig = {
//debugAtAllCosts: true, //Don't normally need this in applications.
isDebug: true,
dojoIframeHistoryUrl: "../../resources/iframe_history.html", //for xdomain
preventBackButtonFix: false
};
</script>
<script language="JavaScript" type="text/javascript" src="../../dojo.js"></script>
<script language="JavaScript" type="text/javascript" src="browser/ApplicationState.js"></script>
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.lang.common");
dojo.require("dojo.undo.browser");
dojo.require("dojo.io.*");
//dojo.hostenv.writeIncludes(); //Don't normally need this in applications.
//****************************************
function goIoBind(id){
doApplicationStateBind("browser/" + id + ".xml", "output", "dataOutput", id);
}
//****************************************
/*
This method illustrates using dojo.io.bind() that also saves an application
state via dojo.undo.browser (dojo.io.bind() will automatically use dojo.undo.browser
if the dojo.io.bind() request object contains a back for forward function).
*/
function doApplicationStateBind(url, outputDivId, backForwardOutputDivId, bookmarkValue){
dojo.io.bind({
//Standard dojo.io.bind parameter
url: url,
//Standard dojo.io.bind parameter.
//For this test, all of the bind requests are for text/xml documents.
mimetype: "text/xml",
//Standard dojo.io.bind parameter: if this is a value that evaluates
//to true, then the page URL will change (by adding a fragment identifier
//to the URL)
changeUrl: bookmarkValue,
//Data for use once we have data for an ApplicationState object
outputDivId: outputDivId,
backForwardOutputDivId: backForwardOutputDivId,
//A holder for the application state object.
//It will be created once we have a response from the bind request.
appState: null,
//Standard dojo.io.bind parameter. The ioRequest object is returned
//to the load function as the fourth parameter. The ioRequest object
//is the object we are creating and passing to this dojo.io.bind() call.
load: function(type, evaldObj, xhrObject, ioRequest){
var stateData = "XHR: " + evaldObj.getElementsByTagName("data")[0].childNodes[0].nodeValue;
ioRequest.appState = new ApplicationState(stateData, ioRequest.outputDivId, ioRequest.backForwardOutputDivId);
ioRequest.appState.showStateData();
},
back: function(){
this.appState.back();
},
forward: function(){
this.appState.forward();
}
});
}
//****************************************
dojo.addOnLoad(function(){
//See if there is a bookmark hash on the page URL.
var bookmarkId = location.hash;
if(bookmarkId){
bookmarkId = bookmarkId.substring(1, bookmarkId.length);
}
//If we have a bookmark, load that as the initial state.
if(bookmarkId && bookmarkId.indexOf("xhr") == 0){
//Load the XHR data for the bookmarked URL
dojo.io.bind({
url: "browser/" + bookmarkId + ".xml",
mimetype: "text/xml",
dataId: bookmarkId,
load: function(type, evaldObj, http, kwArgs){
var stateData = "(Initial State) XHR: " + evaldObj.getElementsByTagName("data")[0].childNodes[0].nodeValue;
var appState = new ApplicationState(stateData, "output", "dataOutput");
appState.showStateData();
//Since this is the initial state, don't add it to the dojo.undo.browser
//history stack (notice that this dojo.io.bind() request does not define
//any back or forward functions). Instead, register the result of this bind
//as the initial state for the page.
dojo.undo.browser.setInitialState(appState);
}
});
}else{
var appState = new ApplicationState("This is the initial state (page first loaded, no dojo.io.bind() calls yet)", "output", "dataOutput");
appState.showStateData();
dojo.undo.browser.setInitialState(appState);
}
});
</script>
</head>
<body>
<div style="padding-bottom: 20px; width: 100%; border-bottom: 1px solid gray">
<h3>dojo.undo.browser test (dojo.io.bind() with bookmarking)</h3>
See the Dojo Book entry for
<a href="http://manual.dojotoolkit.org/WikiHome/DojoDotBook/DocFn1">Back Button and Bookmarking</a>.
<p>This page tests the dojo.undo.browser back/forward integration with dojo.io.bind(),
and dojo.undo.browser's bookmarking facility. For a back/forward test without bookmarking,
see <a href="test_browser.html">test_browser.html</a>.</p>
<p>The buttons that start with "XHR" use
dojo.io.bind to do some XMLHTTPRequest calls for some test data, and they
also define back/forward handlers, so dojo.io should use dojo.undo.browser
add to history tracking.</p>
<p>To test the bookmarking facility:</p>
<ul>
<li>Click on one of the buttons below.</li>
<li>Save the resulting URL as a bookmark.</li>
<li>Close the browser window, or navigate to a different page.</li>
<li>Click on the bookmark to jump to that state in the page</li>
</ul>
<p>Other notes:</p>
<ul>
<li>Don't test this page using local disk for MSIE. MSIE will not
create a history list for iframe_history.html if served from a file:
URL. The XML served back from the XHR tests will also not be properly
created if served from local disk. Serve the test pages from a web
server to test in that browser.</li>
<li>Safari 2.0.3+ (and probably 1.3.2+): Only the back button works OK
(not the forward button), and only if changeUrl is NOT used (so it <b>will not</b>
work for this test page, since it is using bookmarking -- changeUrl).
When changeUrl is used, Safari jumps all the way
back to whatever page was shown before the page that uses
dojo.undo.browser support.</li>
<li>Opera 8.5.3: Does not work.</li>
<li>Konqueror: Unknown. The latest may have Safari's behavior.</li>
</ul>
</div>
<div style="float:left; padding: 20px">
<button onclick="goIoBind('xhr1')">XHR 1</button><br />
<button onclick="goIoBind('xhr2')">XHR 2</button><br />
<button onclick="goIoBind('xhr3')">XHR 3</button><br />
<button onclick="goIoBind('xhr4')">XHR 4</button><br />
</div>
<div style="float: left; padding: 20px">
<b>Data Output:</b><br />
<div id="output"></div>
<hr />
<i>Back/Forward Info:</i><br />
<div id="dataOutput"></div>
</div>
</body>
</html>