New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit

git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
author: mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> 2008-11-13 09:49:11 +0000
committer: mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> 2008-11-13 09:49:11 +0000
commit: e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch)
tree: 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dijit/tests/layout/test_LayoutCode.html
parent: a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
download: semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz
semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2
1 files changed, 383 insertions, 0 deletions
diff --git a/includes/js/dijit/tests/layout/test_LayoutCode.html b/includes/js/dijit/tests/layout/test_LayoutCode.html
new file mode 100644
index 0000000..9cec35e
--- /dev/null
+++ b/includes/js/dijit/tests/layout/test_LayoutCode.html
@@ -0,0 +1,383 @@
+<!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>
author	mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f>	2008-11-13 09:49:11 +0000
committer	mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f>	2008-11-13 09:49:11 +0000
commit	e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch)
tree	95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dijit/tests/layout/test_LayoutCode.html
parent	a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
download	semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2