1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
5 <title>Programmatic Layout Demo</title>
7 <style type="text/css">
8 @import "../../../dojo/resources/dojo.css";
9 @import "css/dijitTests.css";
12 width: 100%; /* make the body expand to fill the visible window */
14 overflow: hidden; /* erase window level scrollbars */
25 border: 3px solid blue;
30 border: 3px solid green;
36 <script type="text/javascript" src="../../../dojo/dojo.js"
37 djConfig="isDebug: true, parseOnLoad: true"></script>
38 <script type="text/javascript" src="../_testCommon.js"></script>
40 <script type="text/javascript">
41 dojo.require("dijit.layout.LayoutContainer");
42 dojo.require("dijit.layout.AccordionContainer");
43 dojo.require("dijit.layout.ContentPane");
44 dojo.require("dijit.layout.SplitContainer");
45 dojo.require("dijit.layout.TabContainer");
48 dojo.require("dijit.form.ComboBox");
49 dojo.require("dijit.form.Button");
51 dojo.require("dojo.parser"); // scan page for widgets and instantiate them
53 // Simple layout container layout
55 widgetType: "LayoutContainer",
56 params: { id: "rootWidget" },
57 style: "border: 3px solid grey; width: 95%; height: 400px;",
60 widgetType: "ContentPane",
61 params: {id: "left", layoutAlign: "left"},
62 style: "width: 100px; background: #ffeeff;",
63 innerHTML: "this is the left"
66 widgetType: "ContentPane",
67 params: {id: "right", layoutAlign: "right"},
68 style: "width: 100px; background: #ffeeff;",
69 innerHTML: "this is the right"
72 widgetType: "ContentPane",
73 params: {id: "top", layoutAlign: "top"},
74 style: "height: 100px; background: #eeeeee;",
75 innerHTML: "this is the top"
78 widgetType: "ContentPane",
79 params: {id: "bottom", layoutAlign: "bottom"},
80 style: "height: 100px; background: #eeeeee;",
81 innerHTML: "this is the bottom"
84 widgetType: "ContentPane",
85 params: {id: "client", layoutAlign: "client"},
86 style: "height: 100px; background: #ffffee;",
87 innerHTML: "this is the client"
92 // split container layout
94 widgetType: "SplitContainer",
95 params: {id: "rootWidget", orientation: "horizontal"},
96 style: "border: 3px solid grey; width: 95%; height: 400px;",
99 widgetType: "ContentPane",
100 params: {id: "left"},
101 style: "background: #ffeeff;",
102 innerHTML: "left pane of split container"
105 widgetType: "SplitContainer",
107 id: "nested", orientation: "vertical"},
110 widgetType: "ContentPane",
112 style: "background: #eeffee;",
113 innerHTML: "center-top pane of nested split container"
116 widgetType: "ContentPane",
117 params: {id: "bottom"},
118 style: "background: #eeffee;",
119 innerHTML: "center-bottom pane of nested split container"
124 widgetType: "ContentPane",
125 params: {id: "right"},
126 style: "background: #ffeeff;",
127 innerHTML: "right pane of split container"
132 // tab container layout
134 widgetType: "TabContainer",
135 params: {id: "rootWidget"},
136 style: "width: 95%; height: 400px;",
139 widgetType: "ContentPane",
140 params: {id: "content", title: "Content tab", href: "doc0.html", executeScripts: true},
141 style: "background: #ffeeff;"
144 widgetType: "SplitContainer",
145 params: {id: "nestedSplit", title: "Split pane tab", orientation: "vertical"},
148 widgetType: "ContentPane",
150 style: "background: #eeffee;",
151 innerHTML: "top pane of nested split container"
154 widgetType: "ContentPane",
155 params: {id: "bottom"},
156 style: "background: #eeffee;",
157 innerHTML: "bottom pane of nested split container"
162 widgetType: "TabContainer",
163 params: {id: "nestedTab", title: "Nested tabs"},
166 widgetType: "ContentPane",
167 params: {id: "left", title: "Nested Tab #1"},
168 style: "background: #eeffee;",
169 innerHTML: "tab 1 of nested tabs"
172 widgetType: "ContentPane",
174 id: "right", title: "Nested Tab #2"},
175 style: "background: #eeffee;",
176 innerHTML: "tab 2 of nested tabs"
184 // tab container layout
186 widgetType: "TabContainer",
187 params: {id: "rootWidget", doLayout: false},
190 widgetType: "ContentPane",
191 params: {id: "doc0", title: "Doc 0", href: "doc0.html", executeScripts: true},
192 style: "background: #ffeeff;"
195 widgetType: "ContentPane",
196 params: {id: "doc1", title: "Doc 1", href: "doc1.html", executeScripts: true},
197 style: "background: #eeffee;"
200 widgetType: "ContentPane",
201 params: {id: "doc2", title: "Doc 2", href: "doc2.html", executeScripts: true},
202 style: "background: #ffffee;"
208 // accordion container layout
209 var accordionLayout = {
210 widgetType: "AccordionContainer",
211 params: {id: "rootWidget"},
212 style: "border: 3px solid grey; width: 95%; height: 400px;",
215 widgetType: "AccordionPane",
216 params: {id: "one", title: "Pane #1"},
217 style: "background: #ffeeff;",
218 innerHTML: "first pane contents"
221 widgetType: "AccordionPane",
222 params: {id: "two", title: "Pane #2"},
223 style: "background: #ffeeff;",
224 innerHTML: "second pane contents"
227 widgetType: "AccordionPane",
228 params: {id: "three", title: "Pane #3"},
229 style: "background: #ffeeff;",
230 innerHTML: "third pane contents"
235 // Create a widget hierarchy from a JSON structure like
236 // {widgetType: "LayoutContainer", params: { ... }, children: { ... } }
237 function createWidgetHierarchy(widgetJson){
239 var node = document.createElement("div");
240 document.body.appendChild(node); // necessary for tab contianer ???
241 if(widgetJson.style){
242 node.style.cssText = widgetJson.style;
244 if(widgetJson.innerHTML){
245 node.innerHTML=widgetJson.innerHTML;
249 var widget = new dijit.layout[widgetJson.widgetType](widgetJson.params, node);
251 // add its children (recursively)
252 if(widgetJson.children){
253 dojo.forEach(widgetJson.children,
254 function(child){ widget.addChild(createWidgetHierarchy(child)); });
256 widget.startup(); //TODO: this is required now, right?
261 // create the widgets specified in layout and add them to widget "rootWidget"
262 function create(layout){
264 // erase old widget hierarchy (if it exists)
265 var rootWidget = dijit.byId("rootWidget");
267 rootWidget.destroyRecursive();
271 rootWidget = createWidgetHierarchy(layout);
274 var wrapper = dojo.byId("wrapper");
275 wrapper.innerHTML=""; // just to erase the initial HTML message
276 wrapper.appendChild(rootWidget.domNode);
277 // rootWidget.onResized();
279 // make/update the menu of operations on each widget
280 makeOperationTable();
283 // write out a menu of operations on each widget
284 function makeOperationTable(){
285 var html = "<table border=1>";
286 dijit.registry.forEach(function(widget){
287 html += "<tr><td>" + widget.id + "</td><td>";
288 html += "<button onclick='removeFromParent(\"" + widget.id + "\");'> destroy </button> ";
289 if(/Container/.test(widget.declaredClass)){
290 html += "<button onclick='addChild(\"" + widget.id + "\");'> add a child </button> ";
292 html += "</td></tr>";
295 dojo.byId("operations").innerHTML = html;
298 // remove a widget from it's parent and destroy it
299 function removeFromParent(widget){
300 widget = dijit.byId(widget);
302 widget.parent.removeChild(widget);
306 // reset the operation table so this widget is no longer shown
307 makeOperationTable();
310 // add a child to given widget
311 function addChild(widget){
312 widget = dijit.byId(widget);
315 var node = document.createElement("div");
316 node.style.cssText = "height: 70px; width: 150px; overflow: auto; background: #cccccc; border: dotted black 2px;"; // necessary if parent is LayoutContainer
318 var alignments = ["top","bottom","left","right"];
319 var hrefs = ["doc0.html", "doc1.html", "doc2.html"];
320 var child = new dijit.layout.ContentPane(
322 title: "Widget " + cnt, // necessary if parent is tab
323 layoutAlign: alignments[cnt%4], // necessary if parent is LayoutContainer
324 executeScripts: true,
330 if(/AccordionContainer/.test(widget.declaredClass)){
331 var pane = new dijit.layout.AccordionPane({
332 title: "AccordionWidget " + cnt
334 pane.setContent(child);
337 // add it to the parent
338 widget.addChild(child);
340 // reset the operation table so the new widget is shown
341 makeOperationTable();
346 function show(widget){
347 widget = dijit.byId(widget);
352 function hide(widget){
353 widget = dijit.byId(widget);
359 <h1>Test of layout code programmatic creation</h1>
362 <td id="creator" valign="top">
364 <p>Pressing a button will programatically add a hierarchy of widgets</p>
365 <button onClick="create(simpleLayout);">Simple Layout</button>
366 <button onClick="create(splitLayout);">Split Layout</button>
367 <button onClick="create(tabLayout);">Tab Layout</button>
368 <!-- <button onClick="create(tabNoLayout);">Tab Non-Layout</button> -->
369 <button onClick="create(accordionLayout);">Accordion Layout</button>
372 <h4>Current widgets</h4>
373 This pane will let you try certain operations on each of the widgets.
374 <div id="operations" style="height: 200px; overflow: auto;"></div>
380 When you press a button, this will be filled in with the generated widgets