384 lines
10 KiB
HTML
384 lines
10 KiB
HTML
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Programmatic Layout Demo</title>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
@import "../../../dojo/resources/dojo.css";
|
||
|
|
@import "css/dijitTests.css";
|
||
|
|
|
||
|
|
html, body{
|
||
|
|
width: 100%; /* make the body expand to fill the visible window */
|
||
|
|
height: 100%;
|
||
|
|
overflow: hidden; /* erase window level scrollbars */
|
||
|
|
padding: 0 0 0 0;
|
||
|
|
margin: 0 0 0 0;
|
||
|
|
}
|
||
|
|
.dijitSplitPane{
|
||
|
|
margin: 5px;
|
||
|
|
}
|
||
|
|
#rightPane {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
#creator, #current {
|
||
|
|
border: 3px solid blue;
|
||
|
|
padding: 10px;
|
||
|
|
margin: 10px;
|
||
|
|
}
|
||
|
|
#wrapper {
|
||
|
|
border: 3px solid green;
|
||
|
|
padding: 10px;
|
||
|
|
margin: 10px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="../../../dojo/dojo.js"
|
||
|
|
djConfig="isDebug: true, parseOnLoad: true"></script>
|
||
|
|
<script type="text/javascript" src="../_testCommon.js"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
dojo.require("dijit.layout.LayoutContainer");
|
||
|
|
dojo.require("dijit.layout.AccordionContainer");
|
||
|
|
dojo.require("dijit.layout.ContentPane");
|
||
|
|
dojo.require("dijit.layout.SplitContainer");
|
||
|
|
dojo.require("dijit.layout.TabContainer");
|
||
|
|
|
||
|
|
// Used in doc0.html
|
||
|
|
dojo.require("dijit.form.ComboBox");
|
||
|
|
dojo.require("dijit.form.Button");
|
||
|
|
|
||
|
|
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
|
||
|
|
|
||
|
|
// Simple layout container layout
|
||
|
|
var simpleLayout = {
|
||
|
|
widgetType: "LayoutContainer",
|
||
|
|
params: { id: "rootWidget" },
|
||
|
|
style: "border: 3px solid grey; width: 95%; height: 400px;",
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
widgetType: "ContentPane",
|
||
|
|
params: {id: "left", layoutAlign: "left"},
|
||
|
|
style: "width: 100px; background: #ffeeff;",
|
||
|
|
innerHTML: "this is the left"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
widgetType: "ContentPane",
|
||
|
|
params: {id: "right", layoutAlign: "right"},
|
||
|
|
style: "width: 100px; background: #ffeeff;",
|
||
|
|
innerHTML: "this is the right"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
widgetType: "ContentPane",
|
||
|
|
params: {id: "top", layoutAlign: "top"},
|
||
|
|
style: "height: 100px; background: #eeeeee;",
|
||
|
|
innerHTML: "this is the top"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
widgetType: "ContentPane",
|
||
|
|
params: {id: "bottom", layoutAlign: "bottom"},
|
||
|
|
style: "height: 100px; background: #eeeeee;",
|
||
|
|
innerHTML: "this is the bottom"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
widgetType: "ContentPane",
|
||
|
|
params: {id: "client", layoutAlign: "client"},
|
||
|
|
style: "height: 100px; background: #ffffee;",
|
||
|
|
innerHTML: "this is the client"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
// split container layout
|
||
|
|
var splitLayout = {
|
||
|
|
widgetType: "SplitContainer",
|
||
|
|
params: {id: "rootWidget", orientation: "horizontal"},
|
||
|
|
style: "border: 3px solid grey; width: 95%; height: 400px;",
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
widgetType: "ContentPane",
|
||
|
|
params: {id: "left"},
|
||
|
|
style: "background: #ffeeff;",
|
||
|
|
innerHTML: "left pane of split container"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
widgetType: "SplitContainer",
|
||
|
|
params: {
|
||
|
|
id: "nested", orientation: "vertical"},
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
widgetType: "ContentPane",
|
||
|
|
params: {id: "top"},
|
||
|
|
style: "background: #eeffee;",
|
||
|
|
innerHTML: "center-top pane of nested split container"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
widgetType: "ContentPane",
|
||
|
|
params: {id: "bottom"},
|
||
|
|
style: "background: #eeffee;",
|
||
|
|
innerHTML: "center-bottom pane of nested split container"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
widgetType: "ContentPane",
|
||
|
|
params: {id: "right"},
|
||
|
|
style: "background: #ffeeff;",
|
||
|
|
innerHTML: "right pane of split container"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
// tab container layout
|
||
|
|
var tabLayout = {
|
||
|
|
widgetType: "TabContainer",
|
||
|
|
params: {id: "rootWidget"},
|
||
|
|
style: "width: 95%; height: 400px;",
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
widgetType: "ContentPane",
|
||
|
|
params: {id: "content", title: "Content tab", href: "doc0.html", executeScripts: true},
|
||
|
|
style: "background: #ffeeff;"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
widgetType: "SplitContainer",
|
||
|
|
params: {id: "nestedSplit", title: "Split pane tab", orientation: "vertical"},
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
widgetType: "ContentPane",
|
||
|
|
params: {id: "top"},
|
||
|
|
style: "background: #eeffee;",
|
||
|
|
innerHTML: "top pane of nested split container"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
widgetType: "ContentPane",
|
||
|
|
params: {id: "bottom"},
|
||
|
|
style: "background: #eeffee;",
|
||
|
|
innerHTML: "bottom pane of nested split container"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
widgetType: "TabContainer",
|
||
|
|
params: {id: "nestedTab", title: "Nested tabs"},
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
widgetType: "ContentPane",
|
||
|
|
params: {id: "left", title: "Nested Tab #1"},
|
||
|
|
style: "background: #eeffee;",
|
||
|
|
innerHTML: "tab 1 of nested tabs"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
widgetType: "ContentPane",
|
||
|
|
params: {
|
||
|
|
id: "right", title: "Nested Tab #2"},
|
||
|
|
style: "background: #eeffee;",
|
||
|
|
innerHTML: "tab 2 of nested tabs"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
/*
|
||
|
|
// tab container layout
|
||
|
|
var tabNoLayout = {
|
||
|
|
widgetType: "TabContainer",
|
||
|
|
params: {id: "rootWidget", doLayout: false},
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
widgetType: "ContentPane",
|
||
|
|
params: {id: "doc0", title: "Doc 0", href: "doc0.html", executeScripts: true},
|
||
|
|
style: "background: #ffeeff;"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
widgetType: "ContentPane",
|
||
|
|
params: {id: "doc1", title: "Doc 1", href: "doc1.html", executeScripts: true},
|
||
|
|
style: "background: #eeffee;"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
widgetType: "ContentPane",
|
||
|
|
params: {id: "doc2", title: "Doc 2", href: "doc2.html", executeScripts: true},
|
||
|
|
style: "background: #ffffee;"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
*/
|
||
|
|
|
||
|
|
// accordion container layout
|
||
|
|
var accordionLayout = {
|
||
|
|
widgetType: "AccordionContainer",
|
||
|
|
params: {id: "rootWidget"},
|
||
|
|
style: "border: 3px solid grey; width: 95%; height: 400px;",
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
widgetType: "AccordionPane",
|
||
|
|
params: {id: "one", title: "Pane #1"},
|
||
|
|
style: "background: #ffeeff;",
|
||
|
|
innerHTML: "first pane contents"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
widgetType: "AccordionPane",
|
||
|
|
params: {id: "two", title: "Pane #2"},
|
||
|
|
style: "background: #ffeeff;",
|
||
|
|
innerHTML: "second pane contents"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
widgetType: "AccordionPane",
|
||
|
|
params: {id: "three", title: "Pane #3"},
|
||
|
|
style: "background: #ffeeff;",
|
||
|
|
innerHTML: "third pane contents"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
// Create a widget hierarchy from a JSON structure like
|
||
|
|
// {widgetType: "LayoutContainer", params: { ... }, children: { ... } }
|
||
|
|
function createWidgetHierarchy(widgetJson){
|
||
|
|
// setup input node
|
||
|
|
var node = document.createElement("div");
|
||
|
|
document.body.appendChild(node); // necessary for tab contianer ???
|
||
|
|
if(widgetJson.style){
|
||
|
|
node.style.cssText = widgetJson.style;
|
||
|
|
}
|
||
|
|
if(widgetJson.innerHTML){
|
||
|
|
node.innerHTML=widgetJson.innerHTML;
|
||
|
|
}
|
||
|
|
|
||
|
|
// create the widget
|
||
|
|
var widget = new dijit.layout[widgetJson.widgetType](widgetJson.params, node);
|
||
|
|
|
||
|
|
// add its children (recursively)
|
||
|
|
if(widgetJson.children){
|
||
|
|
dojo.forEach(widgetJson.children,
|
||
|
|
function(child){ widget.addChild(createWidgetHierarchy(child)); });
|
||
|
|
}
|
||
|
|
widget.startup(); //TODO: this is required now, right?
|
||
|
|
|
||
|
|
return widget;
|
||
|
|
}
|
||
|
|
|
||
|
|
// create the widgets specified in layout and add them to widget "rootWidget"
|
||
|
|
function create(layout){
|
||
|
|
|
||
|
|
// erase old widget hierarchy (if it exists)
|
||
|
|
var rootWidget = dijit.byId("rootWidget");
|
||
|
|
if(rootWidget){
|
||
|
|
rootWidget.destroyRecursive();
|
||
|
|
}
|
||
|
|
|
||
|
|
// create new widget
|
||
|
|
rootWidget = createWidgetHierarchy(layout);
|
||
|
|
|
||
|
|
// and display it
|
||
|
|
var wrapper = dojo.byId("wrapper");
|
||
|
|
wrapper.innerHTML=""; // just to erase the initial HTML message
|
||
|
|
wrapper.appendChild(rootWidget.domNode);
|
||
|
|
// rootWidget.onResized();
|
||
|
|
|
||
|
|
// make/update the menu of operations on each widget
|
||
|
|
makeOperationTable();
|
||
|
|
}
|
||
|
|
|
||
|
|
// write out a menu of operations on each widget
|
||
|
|
function makeOperationTable(){
|
||
|
|
var html = "<table border=1>";
|
||
|
|
dijit.registry.forEach(function(widget){
|
||
|
|
html += "<tr><td>" + widget.id + "</td><td>";
|
||
|
|
html += "<button onclick='removeFromParent(\"" + widget.id + "\");'> destroy </button> ";
|
||
|
|
if(/Container/.test(widget.declaredClass)){
|
||
|
|
html += "<button onclick='addChild(\"" + widget.id + "\");'> add a child </button> ";
|
||
|
|
}
|
||
|
|
html += "</td></tr>";
|
||
|
|
});
|
||
|
|
html += "</table>";
|
||
|
|
dojo.byId("operations").innerHTML = html;
|
||
|
|
}
|
||
|
|
|
||
|
|
// remove a widget from it's parent and destroy it
|
||
|
|
function removeFromParent(widget){
|
||
|
|
widget = dijit.byId(widget);
|
||
|
|
if(widget.parent){
|
||
|
|
widget.parent.removeChild(widget);
|
||
|
|
}
|
||
|
|
widget.destroy();
|
||
|
|
|
||
|
|
// reset the operation table so this widget is no longer shown
|
||
|
|
makeOperationTable();
|
||
|
|
}
|
||
|
|
|
||
|
|
// add a child to given widget
|
||
|
|
function addChild(widget){
|
||
|
|
widget = dijit.byId(widget);
|
||
|
|
|
||
|
|
// setup input node
|
||
|
|
var node = document.createElement("div");
|
||
|
|
node.style.cssText = "height: 70px; width: 150px; overflow: auto; background: #cccccc; border: dotted black 2px;"; // necessary if parent is LayoutContainer
|
||
|
|
// create the widget
|
||
|
|
var alignments = ["top","bottom","left","right"];
|
||
|
|
var hrefs = ["doc0.html", "doc1.html", "doc2.html"];
|
||
|
|
var child = new dijit.layout.ContentPane(
|
||
|
|
{
|
||
|
|
title: "Widget " + cnt, // necessary if parent is tab
|
||
|
|
layoutAlign: alignments[cnt%4], // necessary if parent is LayoutContainer
|
||
|
|
executeScripts: true,
|
||
|
|
href: hrefs[cnt%3]
|
||
|
|
},
|
||
|
|
node);
|
||
|
|
cnt++;
|
||
|
|
|
||
|
|
if(/AccordionContainer/.test(widget.declaredClass)){
|
||
|
|
var pane = new dijit.layout.AccordionPane({
|
||
|
|
title: "AccordionWidget " + cnt
|
||
|
|
});
|
||
|
|
pane.setContent(child);
|
||
|
|
child = pane;
|
||
|
|
}
|
||
|
|
// add it to the parent
|
||
|
|
widget.addChild(child);
|
||
|
|
|
||
|
|
// reset the operation table so the new widget is shown
|
||
|
|
makeOperationTable();
|
||
|
|
}
|
||
|
|
var cnt=1;
|
||
|
|
|
||
|
|
// show a widget
|
||
|
|
function show(widget){
|
||
|
|
widget = dijit.byId(widget);
|
||
|
|
widget.show();
|
||
|
|
}
|
||
|
|
|
||
|
|
// hide a widget
|
||
|
|
function hide(widget){
|
||
|
|
widget = dijit.byId(widget);
|
||
|
|
widget.hide();
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Test of layout code programmatic creation</h1>
|
||
|
|
<table width="100%">
|
||
|
|
<tr>
|
||
|
|
<td id="creator" valign="top">
|
||
|
|
<h4>Creator</h4>
|
||
|
|
<p>Pressing a button will programatically add a hierarchy of widgets</p>
|
||
|
|
<button onClick="create(simpleLayout);">Simple Layout</button>
|
||
|
|
<button onClick="create(splitLayout);">Split Layout</button>
|
||
|
|
<button onClick="create(tabLayout);">Tab Layout</button>
|
||
|
|
<!-- <button onClick="create(tabNoLayout);">Tab Non-Layout</button> -->
|
||
|
|
<button onClick="create(accordionLayout);">Accordion Layout</button>
|
||
|
|
</td>
|
||
|
|
<td id="current">
|
||
|
|
<h4>Current widgets</h4>
|
||
|
|
This pane will let you try certain operations on each of the widgets.
|
||
|
|
<div id="operations" style="height: 200px; overflow: auto;"></div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
<hr>
|
||
|
|
<div id="wrapper">
|
||
|
|
When you press a button, this will be filled in with the generated widgets
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|