<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Pane External Content Test</title>
<script type="text/javascript">
var djConfig = {isDebug: true, debugAtAllCosts: false};
</script>
<script type="text/javascript" src="../../dojo.js"></script>
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.debug.console");
dojo.require("dojo.widget.LayoutContainer");
dojo.require("dojo.widget.LinkPane");
dojo.require("dojo.widget.ContentPane");
dojo.require("dojo.widget.Tree");
dojo.require("dojo.widget.TreeSelector");
dojo.require("dojo.widget.FloatingPane");
dojo.require("dojo.widget.Dialog");
dojo.hostenv.writeIncludes();
</script>
<script>
function DisplayTreeContent(){
this.update = function(message) {
var clickedTreeNode = message.node;
var docPane = dojo.widget.getWidgetById("docpane");
var file = clickedTreeNode.object || clickedTreeNode.title + ".html";
if (!file){
docPane.setContent("Try clicking doc0, doc1 or doc2 instead...");
}else{
docPane.setUrl(file);
}
};
}
dojo.addOnLoad(function(){
displayer = new DisplayTreeContent();
var nodeSelectionTopic = dojo.event.topic.getTopic("nodeSelected");
nodeSelectionTopic.subscribe(displayer, "update");
});
// display custom loadError or use built in
// works best from live server instead of filesystem
function contentLoadError(e){
var chkbox = dojo.byId("defaultLoadError");
if(chkbox && chkbox.checked){
// use built in
return;
}
e.preventDefault(); // or e.returnValue = false;
var pane = dojo.widget.byId('docpane');
var str = "Custom Loaderror goes here<br/><img src='images/x.gif' style='float:left;'/> file not found<br/><br/>" +
"This can also be used when debugging a dynamic server page, error objects properties:<br/>" +
"status=" + e.status + "<br/>" +
"statusText=" + e.statusText + "<br/>" +
"responseText=" + dojo.string.escape("html", e.responseText) + "<br/>" +
"responseHeaders=" + e.responseHeaders;
pane.setContent(str);
dialogHandler();// turn off loading dialog
}
// display custom Error(Content java/javascript eval error) or use built in method
function contentExecError(e){
var chkbox = dojo.byId("defaultEvalError");
if(chkbox && chkbox.checked){
// use built in
return;
}
e.preventDefault();
alert('Oops! error occured:'+arguments[0]);
}
// display loading dialog or use built in "Loading..." message
function contentDownloadStart(e){
var chkbox = dojo.byId("defaultLoadInfo");
if(chkbox && chkbox.checked){
// use built in
return;
}
dialogHandler(e, true);
}
// show / hide loading dialog
function dialogHandler(e, show){
var dialog = dojo.widget.byId("statusDialog");
if(show){
e.preventDefault();
dialog.show();
return;
}
dialog.hide();
}
</script>
<style>
.dojoDialog {
background : white;
border : 1px solid #999;
-moz-border-radius : 5px;
padding : 4px;
text-align: center;
}
</style>
</head>
<body>
<div dojoType="Dialog" id="statusDialog" bgColor="white">
Please wait download and initialize!<br/>
<img src="images/loading.jpg" />
</div>
<p>HTML before</p>
<p>HTML before</p>
<p>HTML before</p>
<input type="checkbox" id="defaultLoadInfo" checked="true" /><label for="defaultLoadInfo">Use default "Loading..."</label><br/>
<input type="checkbox" id="defaultLoadError" checked="true" /><label for="defaultLoadError">Use default LoadError message</label><br/>
<input type="checkbox" id="defaultEvalError" checked="true" /><label for="defaultEvalError">Use default Error message</label><br/>
<div dojoType="LayoutContainer" id="me"
layoutChildPriority='left-right'
style="border: 2px solid black; width: 90%; height: 500px; padding: 10px;">
<div dojoType="ContentPane" layoutAlign="top" style="background-color: #b39b86; ">
top bar
</div>
<div dojoType="ContentPane" layoutAlign="bottom" style="background-color: #b39b86;">
bottom bar
</div>
<div dojoType="LinkPane" layoutAlign="left" style="width: 200px; background-color: #acb386;" href="tree.html"></div>
<div dojoType="ContentPane" layoutAlign="right" style="background-color: #acb386;">
right
</div>
<div dojoType="ContentPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px;"
id="docpane" executeScripts="true"
onDownloadEnd="dojo.debug('loaded data from ' + arguments[0]);"
onDownloadError="contentLoadError(arguments[0]);"
onExecError="contentExecError(arguments[0]);"
onLoad="dialogHandler(/*hide dialog*/);"
onDownloadStart="contentDownloadStart(arguments[0]);">
This is the initial content of the pane (inlined in the HTML file), but
it will be overriden when you click "doc0" or "doc1" or "doc2" in the tree on the left (underneath "Item 1")
</div>
</div>
<div dojoType="FloatingPane" style="width: 300px; height: 300px;"
href="doc0.html" title="externally loaded" executeScripts="true"></div>
<p>HTML after</p>
<p>HTML after</p>
<p>HTML after</p>
</body>
</html>