diff options
Diffstat (limited to 'includes/js/dijit/tests/layout/test_LayoutCode.html')
| -rw-r--r-- | includes/js/dijit/tests/layout/test_LayoutCode.html | 383 |
1 files changed, 383 insertions, 0 deletions
diff --git a/includes/js/dijit/tests/layout/test_LayoutCode.html b/includes/js/dijit/tests/layout/test_LayoutCode.html new file mode 100644 index 0000000..9cec35e --- /dev/null +++ b/includes/js/dijit/tests/layout/test_LayoutCode.html @@ -0,0 +1,383 @@ +<!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> |