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, 0 insertions, 383 deletions
diff --git a/includes/js/dijit/tests/layout/test_LayoutCode.html b/includes/js/dijit/tests/layout/test_LayoutCode.html deleted file mode 100644 index 9cec35e..0000000 --- a/includes/js/dijit/tests/layout/test_LayoutCode.html +++ /dev/null @@ -1,383 +0,0 @@ -<!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> |