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.
150 lines
4.9 KiB
150 lines
4.9 KiB
2 years ago
|
<!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>
|