html5-parser.patch

Index: dojo/parser.js
===================================================================
--- dojo/parser.js	(revision 22613)
+++ dojo/parser.js	(working copy)
@@ -6,10 +6,40 @@
 dojo.parser = new function(){
 	// summary: The Dom/Widget parsing package
 
-	var d = dojo;
-	this._attrName = d._scopeName + "Type";
-	this._query = "[" + this._attrName + "]";
+	var d = dojo, dataprefix = "data-";
+	
+	function toCamelCase(str){
+		return str.replace(/\-([a-z])/g, function(_, m){
+			return m.toUpperCase();
+		})
+	};
 
+	var hasNativeData = (function(){
+		var n = d.doc.createElement("div");
+		n.setAttribute(dataprefix + "a-b", "c");
+		var r = !!(n.dataset && n.dataset.aB == "c");
+		n = null;
+		return r;
+	})();
+	
+	var getdataset = hasNativeData ? function(n){
+		return n.dataset;
+	} : function(n){
+		var ret = {};
+		for(var i = 0, l = n.attributes.length; i < l; i++){
+			var attr = n.attributes[i], matches = attr.name.match(/^data-(.*)$/);
+			if(matches && matches[1]){
+				ret[toCamelCase(matches[1].toLowerCase())] = attr.value;
+			}
+		}
+		return ret;
+	};
+	
+	var scope = d._scopeName;
+	this._attrName = scope + "Type";
+	this._attrName5 = dataprefix + scope + "type";
+	var undatasetRE = new RegExp("^" + scope + "([A-Z])"); // to convert the camelCased data-dojo-* stuff back to plain attrs
+	
 	function val2type(/*Object*/ value){
 		// summary:
 		//		Returns name of type of given value.
@@ -140,7 +170,7 @@
 		//	|		{
 		//	|			type: "dijit.form.Button",
 		//	|			node: DOMNode,
-		//	|			scripts: [ ... ],	// array of <script type="dojo/..."> children of node
+		//	|			scripts: [ ... ],	// array of [script data-dojo-type="dojo/..."] children of node
 		//	|			inherited: { ... }	// settings inherited from ancestors like dir, theme, etc.
 		//	|		}
 		// mixin: Object?
@@ -155,6 +185,7 @@
 		args = args||{};
 		
 		d.forEach(nodes, function(obj){
+
 			if(!obj){ return; }
 
 			// Get pointers to DOMNode, dojoType string, and clsInfo (metadata about the dojoType), etc.s
@@ -169,7 +200,7 @@
 			}else{
 				// old (backwards compatible) format of nodes[] array, simple array of DOMNodes
 				node = obj;
-				type = dp._attrName in mixin ? mixin[dp._attrName] : node.getAttribute(dp._attrName);
+				type = dp._attrName in mixin ? mixin[dp._attrName] : (node.getAttribute(dp._attrName) || node.getAttribute(dp._attrName5));
 				clsInfo = type && getClassInfo(type);
 				clazz = clsInfo && clsInfo.cls;
 				scripts = (clazz && (clazz._noScript || clazz.prototype._noScript) ? [] : 
@@ -188,11 +219,22 @@
 				// settings for the document itself (or whatever subtree is being parsed)
 				dojo.mixin(params, args.defaults);
 			}
+			
+			var nodedata = getdataset(node);
+			// we can't just mixin(params, nodedata), because nodedata is potentially 'real' dataset info.
+			// eg [span id='bar' data-dojo-thing] converts to dataset.dojoThing when we just want 'thing'
+			if(nodedata){
+				for(var i in nodedata){
+					var k = i.replace(undatasetRE, function(_, m){ return m.toLowerCase(); });
+					params[k] = nodedata[i];
+				}
+			}
+			
 			if(obj.inherited){
 				// settings from dir=rtl or lang=... on a node above this node
 				dojo.mixin(params, obj.inherited);
 			}
-
+			
 			// read parameters (ie, attributes) specified on DOMNode
 			// clsInfo.params lists expected params like {"checked": "boolean", "n": "number"}
 			for(var name in clsInfo.params){
@@ -215,11 +257,11 @@
 				}
 			}
 
-			// Process <script type="dojo/*"> script tags
-			// <script type="dojo/method" event="foo"> tags are added to params, and passed to
+			// Process [script data-dojo-type="dojo/*"] script tags
+			// [script data-dojo-type="dojo/method" event="foo"] tags are added to params, and passed to
 			// the widget on instantiation.
-			// <script type="dojo/method"> tags (with no event) are executed after instantiation
-			// <script type="dojo/connect" event="foo"> tags are dojo.connected after instantiation
+			// [script data-dojo-type="dojo/method"] tags (with no event) are executed after instantiation
+			// [script data-dojo-type="dojo/connect" event="foo"] tags are dojo.connected after instantiation
 			// note: dojo/* script tags cannot exist in self closing widgets, like <input />
 			var connects = [],	// functions to connect after instantiation
 				calls = [];		// functions to call after instantiation
@@ -339,12 +381,12 @@
 			root = rootNode;
 		}
 
-		var attrName = this._attrName;
+		var attrName = this._attrName, attrName5 = this._attrName5;
 		function scan(parent, list){
 			// summary:
 			//		Parent is an Object representing a DOMNode, with or without a dojoType specified.
 			//		Scan parent's children looking for nodes with dojoType specified, storing in list[].
-			//		If parent has a dojoType, also collects <script type=dojo/*> children and stores in parent.scripts[].
+			//		If parent has a dojoType, also collects [script data-dojo-type=dojo/*] children and stores in parent.scripts[].
 			// parent: Object
 			//		Object representing the parent node, like
 			//	|	{
@@ -352,7 +394,7 @@
 			//	|		inherited: {dir: "rtl"},	// dir/lang setting inherited from above node
 			//	|
 			//	|		// attributes only set if node has dojoType specified
-			//	|		scripts: [],			// empty array, put <script type=dojo/*> in here
+			//	|		scripts: [],			// empty array, put [script data-dojo-type=dojo/*] in here
 			//	|		clsInfo: { cls: dijit.form.Button, ...}
 			//	|	}
 			// list: DomNode[]
@@ -367,32 +409,32 @@
 				}
 			});
 
-			// if parent is a widget, then search for <script type=dojo/*> tags and put them in scripts[].
+			// if parent is a widget, then search for [script data-dojo-type=dojo/*] tags and put them in scripts[].
 			var scripts = parent.scripts;
 
 			// unless parent is a widget with the stopParser flag set, continue search for dojoType, recursively
 			var recurse = !parent.clsInfo || !parent.clsInfo.cls.prototype.stopParser;
 
-			// scan parent's children looking for dojoType and <script type=dojo/*>
+			// scan parent's children looking for dojoType and [script data-dojo-type=dojo/*]
 			for(var child = parent.node.firstChild; child; child = child.nextSibling){
 				if(child.nodeType == 1){
-					var type = recurse && child.getAttribute(attrName);
+					var type = recurse && (child.getAttribute(attrName) || child.getAttribute(attrName5));
 					if(type){
 						// if dojoType specified, add to output array of nodes to instantiate
 						var params = {
 							"type": type,
 							clsInfo: getClassInfo(type),	// note: won't find classes declared via dojo.Declaration
 							node: child,
-							scripts: [], // <script> nodes that are parent's children
+							scripts: [], // [script] nodes that are parent's children
 							inherited: inherited // dir & lang attributes inherited from parent
 						};
 						list.push(params);
 
-						// Recurse, collecting <script type="dojo/..."> children, and also looking for
+						// Recurse, collecting [script data-dojo-type="dojo/..."] children, and also looking for
 						// descendant nodes with dojoType specified (unless the widget has the stopParser flag),
 						scan(params, list);
 					}else if(scripts && child.nodeName.toLowerCase() == "script"){
-						// if <script type="dojo/...">, save in scripts[]
+						// if [script data-dojo-type="dojo/..."], save in scripts[]
 						type = child.getAttribute("type");
 						if (type && /^dojo\//i.test(type)) {
 							scripts.push(child);
Index: dojo/_base/_loader/hostenv_browser.js
===================================================================
--- dojo/_base/_loader/hostenv_browser.js	(revision 22613)
+++ dojo/_base/_loader/hostenv_browser.js	(working copy)
@@ -95,7 +95,7 @@
 						d.config.baseUrl = src.substring(0, m.index);
 					}
 					// and find out if we need to modify our behavior
-					var cfg = scripts[i].getAttribute("djConfig");
+					var cfg = (scripts[i].getAttribute("djConfig") || scripts[i].getAttribute("data-dojo-config"));
 					if(cfg){
 						var cfgo = eval("({ "+cfg+" })");
 						for(var x in cfgo){
Index: dijit/tests/test_Dialog-html5.html
===================================================================
--- dijit/tests/test_Dialog-html5.html	(revision 0)
+++ dijit/tests/test_Dialog-html5.html	(revision 0)
@@ -0,0 +1,599 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Dialog Widget Dojo Tests</title>
+
+	<style data-dojo-type="text/css">
+		@import "../../dojo/resources/dojo.css";
+		@import "css/dijitTests.css";
+
+		form { margin-bottom : 0; }
+		table { border: none; }
+		#dialog3_underlay { background-color: #027 }
+		#fifthDlg_underlay { background-color: yellow; }
+	</style>
+
+	<!-- required: a default dijit theme: -->
+	<link id="themeStyles" rel="stylesheet" href="../../dijit/themes/claro/claro.css">
+
+	<!-- required: dojo.js -->
+	<script type="text/javascript" src="../../dojo/dojo.js"
+		data-dojo-config="parseOnLoad: true, isDebug: true"></script>
+
+	<!-- not needed, for testing alternate themes -->
+	<script type="text/javascript" src="_testCommon.js"></script>
+
+
+	<script data-dojo-type="text/javascript">
+		dojo.require("dijit.dijit"); // optimize: load dijit layer
+		dojo.require("dijit.Dialog");
+		dojo.require("dijit.form.Button");
+		dojo.require("dijit.form.TextBox");
+		dojo.require("dijit.form.DateTextBox");
+		dojo.require("dijit.form.TimeTextBox");
+		dojo.require("dijit.form.FilteringSelect");
+		dojo.require("dijit.layout.BorderContainer");
+		dojo.require("dijit.layout.ContentPane");
+		dojo.require("dijit.layout.TabContainer");
+		dojo.require("dijit.InlineEditBox");
+		dojo.require("dijit.Menu");
+		dojo.require("dojo.parser");	// scan page for widgets and instantiate them
+
+		// create a do nothing, only for test widget
+		dojo.declare("dijit.TestWidget",
+			[dijit._Widget, dijit._Templated], {
+			templateString: "<div style='margin: 10px; border: inset #700 4px; padding: 5px;' dojoAttachPoint='containerNode'></div>"
+		});
+
+		// make dojo.toJson() print dates correctly (this feels a bit dirty)
+		Date.prototype.json = function(){ return dojo.date.stamp.toISOString(this, {selector: 'date'});};
+
+		var thirdDlg;
+		function createDialog() {
+			if(!thirdDlg){
+				var pane = dojo.byId('thirdDialog');
+				// should specify a width on dialogs with <p> tags, otherwise they get too wide
+				thirdDlg = new dijit.Dialog({
+					id: "dialog3",
+					title: "Programatic Dialog Creation",
+					style: {width: '300px'}
+				},pane);
+			}
+			setTimeout(function(){ thirdDlg.show(); },"3000");
+		}
+		dojo.addOnLoad(function(){
+			dojo.subscribe("focusNode", function(node){ console.log("focused on " + (node?(node.id||node.tagName):"nothing"));});
+		});
+		function open2Dialogs(){
+			dijit.byId('dialog1').show();
+			setTimeout(dojo.hitch(dijit.byId('fifthDlg'), 'show'), 1000);
+		}
+	</script>
+</head>
+<body class="claro">
+
+	<h1 class="testTitle">Dijit layout.Dialog tests</h1>
+	<button data-dojoType="dijit.form.Button"  id="dialog1button" onclick="dijit.byId('dialog1').show()">Show Dialog</button> |
+
+	<div data-dojoType="dijit.Dialog" id="dialog1" title="First Dialog"
+			aria-describedby="intro"
+			data-dojo-onfocus="console.log('user focus handler')"
+			data-dojo-onblur="console.log('user blur handler')"
+			data-dojo-execute="console.log('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
+			
+		<div id="intro" style="width:30em;">Introductory information spoken by screen reader if aria-describedby is
+		added to the declaration of dialog above with value equal to the id of the container element for this text. This technique
+		will work in Dojo 1.4. </div>
+		<table>
+			<tr>
+				<td><label for="name">Name: </label></td>
+				<td><input data-dojoType=dijit.form.TextBox data-dojo-type="text" name="name" id="name"></td>
+			</tr>
+			<tr>
+				<td><label for="loc">Location: </label></td>
+				<td><input data-dojoType=dijit.form.TextBox data-dojo-type="text" name="loc" id="loc"></td>
+			</tr>
+			<tr>
+				<td><label for="date">Date: </label></td>
+				<td><input data-dojoType=dijit.form.DateTextBox data-dojo-type="text" name="date" id="date"></td>
+			</tr>
+			<tr>
+				<td><label for="time">Time: </label></td>
+				<td><div data-dojoType="dijit.InlineEditBox" data-dojo-editor=dijit.form.TimeTextBox data-dojo-type="text" name="time" id="time" width="100px" style="width:100px;"></div></td>
+			</tr>
+			<tr>
+				<td><label for="desc">Description: </label></td>
+				<td><input data-dojoType=dijit.form.TextBox data-dojo-type="text" name="desc" id="desc"></td>
+			</tr>
+			<tr>
+				<td colspan="2" align="center">
+					<button data-dojoType=dijit.form.Button id="ok" data-dojo-type="submit">OK</button></td>
+			</tr>
+		</table>
+	</div>
+
+
+	<button data-dojoType="dijit.form.Button" onclick="createDialog()" title="shows after 3 second delay, with blue background">Programatic Dialog (3 second delay)</button> |
+
+
+	<div id="thirdDialog" style="display: none;">
+		<form>
+		<input>
+		<br>
+		<button>hello</button>
+		<br>
+		<select>
+			<option>Lorem</option>
+			<option>ipsum</option>
+			<option>dolor</option>
+			<option>sit</option>
+			<option>amet</option>
+		</select>
+		</form>
+		<p>
+		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
+		semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
+		porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
+		Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
+		Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
+		risus.
+		</p>
+	</div>
+
+	<button data-dojoType="dijit.form.Button" onclick="dijit.byId('tabDialog').show()">Show TabContainer Dialog</button> |
+
+	<div data-dojoType="dijit.Dialog" id="tabDialog" title="TabContainer Dialog">
+		<div data-dojoType="dijit.layout.TabContainer" id="tc" style="width: 400px; height: 400px;">
+			<div data-dojoType="dijit.layout.ContentPane" id="cp1" title="First tab">
+				<p>
+					This is the first tab.
+				</p>
+				<p>
+				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
+				semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
+				porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
+				Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
+				Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
+				risus.
+				</p>
+			</div>
+			<div data-dojoType="dijit.layout.ContentPane" id="cp2" title="Second tab">
+				<p>
+					This is the second tab.
+				</p>
+				<p>
+				Make it overflow. <a href="http://www.lipsum.com/">ipsum dolor sit amet</a>, consectetuer adipiscing elit. Aenean
+				semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
+				porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
+				Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
+				Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
+				risus.
+				</p>
+				<p>
+				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
+				semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
+				porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
+				Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
+				Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
+				risus.
+				</p>
+				<p>
+				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
+				semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
+				porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
+				Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
+				Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
+				risus.
+				</p>
+			</div>
+		</div>
+	</div>
+
+	<button data-dojoType="dijit.form.Button" onclick="dijit.byId('fifthDlg').show();">Test slow loading HREF Dialog</button> |
+
+	<div data-dojoType="dijit.Dialog" id="fifthDlg" data-dojo-href="layout/getResponse.php?delay=3000&messId=3"
+		style="width: 300px" data-dojo-title="From HREF (slow network simulated)"></div>
+
+	<button data-dojoType="dijit.form.Button" onclick="dijit.byId('dialog6').show()">Show File Dialog</button>
+
+	<div data-dojoType="dijit.Dialog" id="dialog6" title="File Dialog"
+			onfocus="console.log('user focus handler')"
+			onblur="console.log('user blur handler')"
+			execute="alert('submitted w/args:\n' + dojo.toJson(arguments[0], true));" style="min-width: 350px">
+		<!-- note: style="min-width: 350px" to workaround FF bug where width is too short, see http://bugs.dojotoolkit.org/ticket/5976 -->
+			<label for="afile">ID File: </label>
+			<input data-dojoType=dijit.form.TextBox data-dojo-type="file" name="afile" id="afile">
+	</div>
+
+	<button data-dojoType="dijit.form.Button" onclick="dijit.byId('cantmove').show()">Show Unmovable</button>
+
+	<div data-dojoType="dijit.Dialog" id="cantmove" title="unmovable" draggable="false">
+		<p>You should not be able to <br /> drag this dialog</p>
+	</div>
+
+	<button data-dojoType="dijit.form.Button" onclick="dijit.byId('preventer').show()">Show Close prevention</button>
+
+	<div data-dojoType="dijit.Dialog" id="preventer" title="Confirm Close">
+		I am done entering data:
+		<button data-dojoType="dijit.form.Button" id="preventerOK" data-dojo-type="submit" onClick="return confirm('Are you sure?')">OK</button>
+	</div>
+
+	<button data-dojoType="dijit.form.Button" onclick="dijit.byId('embedded').show()">Dialog w/embedded layout widgets</button> |
+
+	<div data-dojoType="dijit.Dialog" id="embedded" title="Embedded layout widgets"
+		onShow="dojo.attr(this.domNode, 'aria-describedby', 'describe');" >
+		<p id="describe">
+			The pane has some text, plus two embedded layout widgets, which should
+			appear correctly even though the pane is initially hidden.
+		</p>
+		<p>
+			Here's a BorderContainer:
+		</p>
+		<div data-dojoType="dijit.layout.BorderContainer" style="height:200px; width:300px">
+			<div data-dojoType="dijit.layout.ContentPane" region="left" style="width:100px" splitter="true">
+				1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
+				Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
+				vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
+				augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
+				metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
+				ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
+				euismod, magna nulla viverra libero, sit amet lacinia odio diam id
+				risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
+				porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
+				faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
+				consequat quis, varius interdum, nulla. Donec neque tortor,
+				sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
+				ut eros sit amet ante pharetra interdum.
+			</div>
+			<div data-dojoType="dijit.layout.ContentPane" region="center">
+				2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
+				Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
+				vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
+				augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
+				metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
+				ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
+				euismod, magna nulla viverra libero, sit amet lacinia odio diam id
+				risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
+				porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
+				faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
+				consequat quis, varius interdum, nulla. Donec neque tortor,
+				sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
+				ut eros sit amet ante pharetra interdum.
+			</div>
+		</div>
+		<p>
+			And a TabContainer:
+		</p>
+		<div data-dojoType="dijit.layout.TabContainer" style="height:200px; width:300px">
+			<div data-dojoType="dijit.layout.ContentPane" title="Tab 1">
+				1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
+				Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
+				vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
+				augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
+				metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
+				ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
+				euismod, magna nulla viverra libero, sit amet lacinia odio diam id
+				risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
+				porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
+				faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
+				consequat quis, varius interdum, nulla. Donec neque tortor,
+				sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
+				ut eros sit amet ante pharetra interdum.
+			</div>
+			<div data-dojoType="dijit.layout.ContentPane" title="Tab 2">
+				2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
+				Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
+				vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
+				augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
+				metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
+				ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
+				euismod, magna nulla viverra libero, sit amet lacinia odio diam id
+				risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
+				porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
+				faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
+				consequat quis, varius interdum, nulla. Donec neque tortor,
+				sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
+				ut eros sit amet ante pharetra interdum.
+			</div>
+		</div>
+		<p>
+			Text after the widgets.
+		</p>
+	</div>
+	
+	
+	<!-- Action Bar test case -->
+	<button data-dojoType="dijit.form.Button"  id="ABDlg1Btn" onclick="dijit.byId('ABDlg1').show()">Show Dialog With Action Buttons</button>
+	<div data-dojoType="dijit.Dialog" id="ABDlg1" title="ActionBar Dialog 1" 
+			onExecute="console.log('OK button pressed')"
+			onCancel="console.log('Cancel button pressed')"
+			aria-describedby="intro"
+			execute="console.log('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
+		<div class="dijitDialogPaneContentArea">
+			<div id="ABintro1" style="width:30em;">Introductory information spoken by screen reader if aria-describedby is
+			added to the declaration of dialog above with value equal to the id of the container element for this text. This technique
+			will work in Dojo 1.4. </div>
+		</div>
+		
+		
+		<div class="dijitDialogPaneActionBar">
+			<button data-dojoType="dijit.form.Button" data-dojo-type="submit" id="ABdialog1button1">OK</button>
+			<button data-dojoType="dijit.form.Button" data-dojo-type="button" onClick="dijit.byId('ABDlg1').onCancel();" 
+					id="ABdialog1button2">Cancel</button>
+		</div>
+	</div>
+	
+	<button data-dojoType="dijit.form.Button"  id="NABDlgBtn" onclick="dijit.byId('NABDlg').show()">Show Dialog With No Action Buttons</button>
+	<div data-dojoType="dijit.Dialog" id="NABDlg" title="No Action Bar Dialog"
+			aria-describedby="intro"
+			onfocus="console.log('user focus handler')"
+			onblur="console.log('user blur handler')"
+			execute="console.log('submitted w/args:\n' + dojo.toJson(arguments[0], true));">
+				
+		<div class="dijitDialogPaneContentArea">
+			<div id="NABintro" style="width:30em;">Introductory information spoken by screen reader if aria-describedby is
+			added to the declaration of dialog above with value equal to the id of the container element for this text. This technique
+			will work in Dojo 1.4. </div>
+			<table>
+				<tr>
+					<td><label for="name">Name: </label></td>
+					<td><input data-dojoType=dijit.form.TextBox data-dojo-type="text" name="NABname" id="NABname"></td>
+				</tr>
+				<tr>
+					<td><label for="loc">Location: </label></td>
+					<td><input data-dojoType=dijit.form.TextBox data-dojo-type="text" name="NABloc" id="NABloc"></td>
+				</tr>
+				<tr>
+					<td><label for="date">Date: </label></td>
+					<td><input data-dojoType=dijit.form.DateTextBox data-dojo-type="text" name="NABdate" id="NABdate"></td>
+				</tr>
+				<tr>
+					<td><label for="desc">Description: </label></td>
+					<td><input data-dojoType=dijit.form.TextBox data-dojo-type="text" name="NABdesc" id="NABdesc"></td>
+				</tr>
+			</table>
+		</div>
+	</div>
+
+
+	<button data-dojoType="dijit.form.Button"  id="layeredDialogs" onclick="open2Dialogs">Show 2 Dialogs</button>
+
+	<button data-dojoType="dijit.form.Button"  id="iframeDlg" onclick='dijit.byId("dlgFrame").show();'>Show iframe in dialog</button>
+	<div data-dojoType="dijit.Dialog" id="dlgFrame" title="Search">
+		<iframe title="Test IFrame" src="layout/getResponse.php?delay=3000&messId=3" style="width:600px; height: 400px;">
+	</iframe>
+				
+	</div>
+	
+	<p><b><i>(scroll down to see more links to click, for testing positioning / scroll handling)</i></b></p>
+
+	<p>
+	Here's a form.  Try clicking the programatic dialog link, then focusing on the form.
+	After the dialog closes focus should be returned to the form
+	</p>
+
+	<form>
+	<input id="plainInput">
+	<br>
+	<button id="plainButton">hello</button>
+	<br>
+	<select>
+		<option>Lorem</option>
+		<option>ipsum</option>
+		<option>dolor</option>
+		<option>sit</option>
+		<option>amet</option>
+	</select>
+	</form>
+
+
+	<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
+	imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
+	nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
+	massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
+	pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
+	quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
+	felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
+	quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
+	rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
+	semper velit ante id metus. Praesent massa dolor, porttitor sed,
+	pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
+	tortor pharetra congue. Suspendisse pulvinar.
+	</p>
+	<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
+	ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
+	nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
+	lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
+	est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
+	dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
+	nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
+	pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
+	sociosqu ad litora torquent per conubia nostra, per inceptos
+	hymenaeos.
+	</p>
+	<form>
+		<center>
+			<select>
+				<option>1</option>
+				<option>2</option>
+			</select>
+		</center>
+	</form>
+	<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
+	et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
+	ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
+	vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
+	conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
+	luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
+	vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
+	egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
+	felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
+	risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
+	tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
+	turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
+	consectetuer dapibus eros. Aliquam nisl.
+	</p>
+	<div id="reallyWide">[spacer]</div>
+	<p>
+	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
+	semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
+	porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
+	Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
+	Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
+	risus.
+	</p>
+	<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
+	imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
+	nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
+	massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
+	pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
+	quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
+	felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
+	quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
+	rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
+	semper velit ante id metus. Praesent massa dolor, porttitor sed,
+	pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
+	tortor pharetra congue. Suspendisse pulvinar.
+	</p>
+	<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
+	ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
+	nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
+	lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
+	est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
+	dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
+	nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
+	pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
+	sociosqu ad litora torquent per conubia nostra, per inceptos
+	hymenaeos.
+	</p>
+	<form>
+		<center>
+			<select>
+				<option>1</option>
+				<option>2</option>
+			</select>
+		</center>
+	</form>
+	<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
+	et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
+	ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
+	vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
+	conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
+	luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
+	vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
+	egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
+	felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
+	risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
+	tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
+	turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
+	consectetuer dapibus eros. Aliquam nisl.
+	</p>
+
+	<p>
+	<button data-dojoType="dijit.form.Button" onClick="dijit.byId('dialog1').show()">Show Dialog</button> |
+	<!-- showing a dialog from an anchor with inline onclick="" is a solution to page onUnLoad firing
+		but you must return false; alternatively, you can dojo.connect() to the anchor links, and
+		e.preventDefault() on the event object passed. using href="javascript:" inline causes onUnLoad
+		to destroy all widgets in IE6
+	-->
+	<a href="http://dojotoolkit.org" onclick="dijit.byId('dialog1').show(); return false; ">Show Dialog</a>
+	</p>
+
+	<p>
+	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
+	semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
+	porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
+	Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
+	Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
+	risus.
+	</p>
+	<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
+	imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
+	nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
+	massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
+	pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
+	quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
+	felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
+	quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
+	rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
+	semper velit ante id metus. Praesent massa dolor, porttitor sed,
+	pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
+	tortor pharetra congue. Suspendisse pulvinar.
+	</p>
+	<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
+	ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
+	nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
+	lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
+	est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
+	dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
+	nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
+	pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
+	sociosqu ad litora torquent per conubia nostra, per inceptos
+	hymenaeos.
+	</p>
+	<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
+	et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
+	ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
+	vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
+	conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
+	luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
+	vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
+	egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
+	felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
+	risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
+	tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
+	turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
+	consectetuer dapibus eros. Aliquam nisl.
+	</p>
+
+	<p>
+	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
+	semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
+	porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
+	Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
+	Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
+	risus.
+	</p>
+	<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
+	imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
+	nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
+	massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
+	pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
+	quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
+	felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
+	quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
+	rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
+	semper velit ante id metus. Praesent massa dolor, porttitor sed,
+	pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
+	tortor pharetra congue. Suspendisse pulvinar.
+	</p>
+	<p>Vestibulum convallis eros ac justo. Proin dolor. Etiam aliquam. Nam
+	ornare elit vel augue. Suspendisse potenti. Etiam sed mauris eu neque
+	nonummy mollis. Vestibulum vel purus ac pede semper accumsan. Vivamus
+	lobortis, sem vitae nonummy lacinia, nisl est gravida magna, non cursus
+	est quam sed urna. Phasellus adipiscing justo in ipsum. Duis sagittis
+	dolor sit amet magna. Suspendisse suscipit, neque eu dictum auctor,
+	nisi augue tincidunt arcu, non lacinia magna purus nec magna. Praesent
+	pretium sollicitudin sapien. Suspendisse imperdiet. Class aptent taciti
+	sociosqu ad litora torquent per conubia nostra, per inceptos
+	hymenaeos.
+	</p>
+	<p>Mauris pharetra lorem sit amet sapien. Nulla libero metus, tristique
+	et, dignissim a, tempus et, metus. Ut libero. Vivamus tempus purus vel
+	ipsum. Quisque mauris urna, vestibulum commodo, rutrum vitae, ultrices
+	vitae, nisl. Class aptent taciti sociosqu ad litora torquent per
+	conubia nostra, per inceptos hymenaeos. Nulla id erat sit amet odio
+	luctus eleifend. Proin massa libero, ultricies non, tincidunt a,
+	vestibulum non, tellus. Nunc nunc purus, lobortis a, pulvinar at,
+	egestas a, mi. Cras adipiscing velit a mauris. Morbi felis. Etiam at
+	felis. Cras eget eros et justo mattis pulvinar. Nullam at justo id
+	risus porttitor dignissim. Vestibulum sed velit vel metus tincidunt
+	tempus. Nunc euismod nisl id dolor tristique tincidunt. Nullam placerat
+	turpis sed odio. Curabitur in est id nibh tempus ultrices. Aliquam
+	consectetuer dapibus eros. Aliquam nisl.
+	</p>
+
+</body>
+</html>
+
+