<html>
<head>
<script type="text/javascript">
var djConfig = {isDebug: true};
</script>
<script type="text/javascript" src="../../dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.LayoutContainer");
dojo.require("dojo.widget.SplitContainer");
dojo.require("dojo.widget.TabContainer");
dojo.require("dojo.widget.AccordionContainer");
dojo.require("dojo.widget.ContentPane");
// Simple layout container layout
var simpleLayout = {
widgetType: "LayoutContainer",
params: { widgetId: "rootWidget" },
style: "border: 3px solid grey; width: 95%; height: 400px;",
children: [
{
widgetType: "ContentPane",
params: {widgetId: "left", layoutAlign: "left"},
style: "width: 100px; background: #ffeeff;",
innerHTML: "this is the left"
},
{
widgetType: "ContentPane",
params: {widgetId: "right", layoutAlign: "right"},
style: "width: 100px; background: #ffeeff;",
innerHTML: "this is the right"
},
{
widgetType: "ContentPane",
params: {widgetId: "top", layoutAlign: "top"},
style: "height: 100px; background: #eeeeee;",
innerHTML: "this is the top"
},
{
widgetType: "ContentPane",
params: {widgetId: "bottom", layoutAlign: "bottom"},
style: "height: 100px; background: #eeeeee;",
innerHTML: "this is the bottom"
},
{
widgetType: "ContentPane",
params: {widgetId: "client", layoutAlign: "client"},
style: "height: 100px; background: #ffffee;",
innerHTML: "this is the client"
}
]
};
// split container layout
var splitLayout = {
widgetType: "SplitContainer",
params: {widgetId: "rootWidget", orientation: "horizontal"},
style: "border: 3px solid grey; width: 95%; height: 400px;",
children: [
{
widgetType: "ContentPane",
params: {widgetId: "left"},
style: "background: #ffeeff;",
innerHTML: "left pane of split container"
},
{
widgetType: "SplitContainer",
params: {
widgetId: "nested", orientation: "vertical"},
children: [
{
widgetType: "ContentPane",
params: {widgetId: "top"},
style: "background: #eeffee;",
innerHTML: "center-top pane of nested split container"
},
{
widgetType: "ContentPane",
params: {widgetId: "bottom"},
style: "background: #eeffee;",
innerHTML: "center-bottom pane of nested split container"
}
]
},
{
widgetType: "ContentPane",
params: {widgetId: "right"},
style: "background: #ffeeff;",
innerHTML: "right pane of split container"
}
]
};
// tab container layout
var tabLayout = {
widgetType: "TabContainer",
params: {widgetId: "rootWidget"},
style: "width: 95%; height: 400px;",
children: [
{
widgetType: "ContentPane",
params: {widgetId: "content", label: "Content tab", href: "doc0.html", executeScripts: true},
style: "background: #ffeeff;"
},
{
widgetType: "SplitContainer",
params: {widgetId: "nestedSplit", label: "Split pane tab", orientation: "vertical"},
children: [
{
widgetType: "ContentPane",
params: {widgetId: "top"},
style: "background: #eeffee;",
innerHTML: "top pane of nested split container"
},
{
widgetType: "ContentPane",
params: {widgetId: "bottom"},
style: "background: #eeffee;",
innerHTML: "bottom pane of nested split container"
}
]
},
{
widgetType: "TabContainer",
params: {widgetId: "nestedTab", label: "Nested tabs"},
children: [
{
widgetType: "ContentPane",
params: {widgetId: "left", label: "Nested Tab #1"},
style: "background: #eeffee;",
innerHTML: "tab 1 of nested tabs"
},
{
widgetType: "ContentPane",
params: {
widgetId: "right", label: "Nested Tab #2"},
style: "background: #eeffee;",
innerHTML: "tab 2 of nested tabs"
}
]
}
]
};
// tab container layout
var tabNoLayout = {
widgetType: "TabContainer",
params: {widgetId: "rootWidget", doLayout: false},
children: [
{
widgetType: "ContentPane",
params: {widgetId: "doc0", label: "Doc 0", href: "doc0.html", executeScripts: true},
style: "background: #ffeeff;"
},
{
widgetType: "ContentPane",
params: {widgetId: "doc1", label: "Doc 1", href: "doc1.html", executeScripts: true},
style: "background: #eeffee;"
},
{
widgetType: "ContentPane",
params: {widgetId: "doc2", label: "Doc 2", href: "doc2.html", executeScripts: true},
style: "background: #ffffee;"
}
]
};
// accordion container layout
var accordionLayout = {
widgetType: "AccordionContainer",
params: {widgetId: "rootWidget"},
style: "border: 3px solid grey; width: 95%; height: 400px;",
children: [
{
widgetType: "ContentPane",
params: {widgetId: "one", label: "Pane #1"},
style: "background: #ffeeff;",
innerHTML: "first pane contents"
},
{
widgetType: "ContentPane",
params: {widgetId: "two", label: "Pane #2"},
style: "background: #ffeeff;",
innerHTML: "second pane contents"
},
{
widgetType: "ContentPane",
params: {widgetId: "three", label: "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){
setCssText(node, widgetJson.style);
}
if(widgetJson.innerHTML){
node.innerHTML=widgetJson.innerHTML;
}
// create the widget
var widget = dojo.widget.createWidget(widgetJson.widgetType, widgetJson.params, node);
// add it's children (recursively)
if(widgetJson.children){
dojo.lang.forEach(widgetJson.children,
function(child){ widget.addChild(createWidgetHierarchy(child)); });
}
return widget;
}
// set the cssText of a node
function setCssText(node, cssText){
// make opera sing
if(dojo.lang.isUndefined(node.style.cssText)){
node.setAttribute("style", cssText);
}else{
node.style.cssText= cssText;
}
}
// create the widgets specified in layout and add them to widget "rootWidget"
function create(layout){
// erase old widget hierarchy (if it exists)
var rootWidget = dojo.widget.byId("rootWidget");
if(rootWidget){
rootWidget.destroy();
}
// 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>";
dojo.lang.forEach(dojo.widget.manager.getAllWidgets(), function(widget){
html += "<tr><td>" + widget.widgetId + "</td><td>";
html += "<button onclick='removeFromParent(\"" + widget.widgetId + "\");'> destroy </button> ";
if(/Container/.test(widget.widgetType)){
html += "<button onclick='addChild(\"" + widget.widgetId + "\");'> 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 = dojo.widget.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 = dojo.widget.byId(widget);
// setup input node
var node = document.createElement("div");
setCssText(node, "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 = dojo.widget.createWidget(
"ContentPane",
{
widgetId: "widget_" + cnt,
label: "Widget " + cnt, // necessary if parent is tab
layoutAlign: alignments[cnt%4], // necessary if parent is LayoutContainer
executeScripts: true,
href: hrefs[cnt%3]
},
node
);
cnt++;
// 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 = dojo.widget.byId(widget);
widget.show();
}
// hide a widget
function hide(widget){
widget = dojo.widget.byId(widget);
widget.hide();
}
</script>
<style>
html, body {
height: 100%;
width: 100%;
}
#creator, #current {
border: 3px solid blue;
padding: 10px;
margin: 10px;
}
#wrapper {
border: 3px solid green;
padding: 10px;
margin: 10px;
}
</style>
</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>