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.
364 lines
9.8 KiB
364 lines
9.8 KiB
<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>
|
|
|