You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
149 lines
4.9 KiB
149 lines
4.9 KiB
<!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>
|
|
|