PerfectEquation
/
GZ


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
							<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Layout Demo</title>


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