+++ /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