--- /dev/null
+<!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>
projects / eow / blobdiff