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

15 files changed, 1317 insertions, 0 deletions

diff --git a/includes/js/dojox/wire/demos/TableContainer.css b/includes/js/dojox/wire/demos/TableContainer.css
new file mode 100644
index 0000000..fded51f
--- /dev/null
+++ b/includes/js/dojox/wire/demos/TableContainer.css
@@ -0,0 +1,25 @@
+.tablecontainer {
+	padding: 3 3 3 3;
+	border-width: 1px;
+	border-style: solid;
+	border-color: #000000;
+	border-collapse: separate;
+}
+.tablecontainer th {
+	text-align: left;
+} 
+.tablecontainer tr {
+	padding: 3 3 3 3;
+	border-width: 1px;
+	border-style: solid;
+	border-color: #000000;
+}
+.tablecontainer tr td {
+	padding: 3 3 3 3;
+	border-width: 1px;
+	border-style: solid;
+	border-color: #000000;
+}
+.alternate {
+	background-color: #EEEEEE;
+}
diff --git a/includes/js/dojox/wire/demos/TableContainer.css.commented.css b/includes/js/dojox/wire/demos/TableContainer.css.commented.css
new file mode 100644
index 0000000..4ee2706
--- /dev/null
+++ b/includes/js/dojox/wire/demos/TableContainer.css.commented.css
@@ -0,0 +1,30 @@
+.tablecontainer {
+	padding: 3 3 3 3;
+	border-width: 1px;
+	border-style: solid;
+	border-color: #000000;
+	border-collapse: separate;
+}
+
+.tablecontainer th {
+	text-align: left;
+} 
+
+.tablecontainer tr {
+	padding: 3 3 3 3;
+	border-width: 1px;
+	border-style: solid;
+	border-color: #000000;
+}
+
+.tablecontainer tr td {
+	padding: 3 3 3 3;
+	border-width: 1px;
+	border-style: solid;
+	border-color: #000000;
+}
+
+.alternate {
+	background-color: #EEEEEE;
+}
+
diff --git a/includes/js/dojox/wire/demos/TableContainer.js b/includes/js/dojox/wire/demos/TableContainer.js
new file mode 100644
index 0000000..fd4ad73
--- /dev/null
+++ b/includes/js/dojox/wire/demos/TableContainer.js
@@ -0,0 +1,68 @@
+if(!dojo._hasResource["dojox.wire.demos.TableContainer"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.wire.demos.TableContainer"] = true;
+dojo.provide("dojox.wire.demos.TableContainer");
+
+dojo.require("dojo.parser");
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated");
+
+dojo.declare("dojox.wire.demos.TableContainer", [ dijit._Widget, dijit._Templated, dijit._Container ], {
+	//	summary:
+	//		Extremely simple 'widget' that is a table generator with an addRow function that takes an array
+	//		as the row to add, where each entry is a cell in the row.  This demo widget is for use with the
+	//		wire demos.
+
+	templateString: "<table class='tablecontainer'><tbody dojoAttachPoint='tableContainer'></tbody></table>",
+	rowCount: 0,
+	headers: "",
+	addRow: function(array){
+		//	summary:
+		//		Function to add in a new row from the elements in the array map to cells in the row.
+		//	array:
+		//		Array of row values to add.
+		try{
+			var row = document.createElement("tr");
+			if((this.rowCount%2) === 0){
+				dojo.addClass(row, "alternate");
+			}
+			this.rowCount++;
+			for(var i in array){
+				var cell = document.createElement("td");
+				var text = document.createTextNode(array[i]);
+				cell.appendChild(text);
+				row.appendChild(cell);
+				
+			}
+			this.tableContainer.appendChild(row);
+		}catch(e){ console.debug(e); }
+	},
+
+	clearTable: function(){
+		//	summary:
+		//		Function to clear all the current rows in the table, except for the header.
+
+		//Always leave the first row, which is the table header.
+		while(this.tableContainer.firstChild.nextSibling){
+			this.tableContainer.removeChild(this.tableContainer.firstChild.nextSibling);
+		}
+		this.rowCount = 0;
+	},
+
+	postCreate: function(){
+		//	summary:
+		//		Widget lifecycle function to handle generation of the header elements in the table.
+		var headers = this.headers.split(",");
+		var tr = document.createElement("tr");
+		for(i in headers){
+			
+			var header = headers[i];
+			var th = document.createElement("th");
+			var text = document.createTextNode(header);
+			th.appendChild(text);
+			tr.appendChild(th);
+		}
+		this.tableContainer.appendChild(tr);
+	}
+});
+
+}
diff --git a/includes/js/dojox/wire/demos/WidgetRepeater.js b/includes/js/dojox/wire/demos/WidgetRepeater.js
new file mode 100644
index 0000000..ad1b8b0
--- /dev/null
+++ b/includes/js/dojox/wire/demos/WidgetRepeater.js
@@ -0,0 +1,33 @@
+if(!dojo._hasResource["dojox.wire.demos.WidgetRepeater"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.wire.demos.WidgetRepeater"] = true;
+dojo.provide("dojox.wire.demos.WidgetRepeater")
+		
+dojo.require("dojo.parser");
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated");
+dojo.require("dijit._Container");
+
+dojo.declare("dojox.wire.demos.WidgetRepeater", [ dijit._Widget, dijit._Templated, dijit._Container ], {
+	//	summary:
+	//		Simple widget that does generation of widgets repetatively, based on calls to 
+	//		the createNew function and contains them as child widgets.
+	templateString: "<div class='WidgetRepeater' dojoAttachPoint='repeaterNode'></div>",
+	widget: null,
+	repeater: null,
+	createNew: function(obj){
+		//	summary:
+		//		Function to handle the creation of a new widget and appending it into the widget tree.
+		//	obj:	
+		//		The parameters to pass to the widget.
+		try{
+			if(dojo.isString(this.widget)){
+				dojo.require(this.widget);
+				this.widget = dojo.getObject(this.widget);
+			}
+			this.addChild(new this.widget(obj));
+			this.repeaterNode.appendChild(document.createElement("br"));
+		}catch(e){ console.debug(e); }
+	}
+});
+
+}
diff --git a/includes/js/dojox/wire/demos/markup/countries.json b/includes/js/dojox/wire/demos/markup/countries.json
new file mode 100644
index 0000000..ad3a07a
--- /dev/null
+++ b/includes/js/dojox/wire/demos/markup/countries.json
@@ -0,0 +1,43 @@
+{ identifier: 'name',
+   items: [
+	 { name:'Africa', type:'continent',
+		 children:[{_reference:'Egypt'}, {_reference:'Kenya'}, {_reference:'Sudan'}] },
+	 { name:'Egypt', type:'country' },
+	 { name:'Kenya', type:'country',
+		 children:[{_reference:'Nairobi'}, {_reference:'Mombasa'}] },
+	 { name:'Nairobi', type:'city' },
+	 { name:'Mombasa', type:'city' },
+	 { name:'Sudan', type:'country',
+		 children:{_reference:'Khartoum'} },
+	 { name:'Khartoum', type:'city' },
+	 { name:'Asia', type:'continent',
+		 children:[{_reference:'China'}, {_reference:'India'}, {_reference:'Russia'}, {_reference:'Mongolia'}] },
+	 { name:'China', type:'country' },
+	 { name:'India', type:'country' },
+	 { name:'Russia', type:'country' },
+	 { name:'Mongolia', type:'country' },
+	 { name:'Australia', type:'continent', population:'21 million',
+		 children:{_reference:'Commonwealth of Australia'}},
+	 { name:'Commonwealth of Australia', type:'country', population:'21 million'},
+	 { name:'Europe', type:'continent',
+		 children:[{_reference:'Germany'}, {_reference:'France'}, {_reference:'Spain'}, {_reference:'Italy'}] },
+	 { name:'Germany', type:'country' },
+	 { name:'France', type:'country' },
+	 { name:'Spain', type:'country' },
+	 { name:'Italy', type:'country' },
+	 { name:'North America', type:'continent',
+		 children:[{_reference:'Mexico'}, {_reference:'Canada'}, {_reference:'United States of America'}] },
+	 { name:'Mexico', type:'country',  population:'108 million', area:'1,972,550 sq km',
+		 children:[{_reference:'Mexico City'}, {_reference:'Guadalajara'}] },
+	 { name:'Mexico City', type:'city', population:'19 million', timezone:'-6 UTC'},
+	 { name:'Guadalajara', type:'city', population:'4 million', timezone:'-6 UTC' },
+	 { name:'Canada', type:'country',  population:'33 million', area:'9,984,670 sq km',
+		 children:[{_reference:'Ottawa'}, {_reference:'Toronto'}] },
+	 { name:'Ottawa', type:'city', population:'0.9 million', timezone:'-5 UTC'},
+	 { name:'Toronto', type:'city', population:'2.5 million', timezone:'-5 UTC' },
+	 { name:'United States of America', type:'country' },
+	 { name:'South America', type:'continent',
+		 children:[{_reference:'Brazil'}, {_reference:'Argentina'}] },
+	 { name:'Brazil', type:'country', population:'186 million' },
+	 { name:'Argentina', type:'country', population:'40 million' }
+]}
diff --git a/includes/js/dojox/wire/demos/markup/demo_ActionChaining.html b/includes/js/dojox/wire/demos/markup/demo_ActionChaining.html
new file mode 100644
index 0000000..596d6ec
--- /dev/null
+++ b/includes/js/dojox/wire/demos/markup/demo_ActionChaining.html
@@ -0,0 +1,108 @@
+<!--
+	This file demonstrates how the dojox.wire code can be used to do declarative
+	wiring of events.  Specifically, it shows how you can chain actions together
+	in a sequence.  In this case the setting of a value on one textbox triggers a 
+	copy over to another textbox.  That in turn triggers yet another copy to another
+	text box.
+-->
+<html>
+<head>
+	<title>Sample Action Chaining</title>
+	<style type="text/css">
+
+		@import "../../../../dijit/themes/tundra/tundra.css";
+		@import "../../../../dojo/resources/dojo.css";
+		@import "../../../../dijit/tests/css/dijitTests.css";
+		@import "../TableContainer.css";
+
+		.splitView {
+			width: 90%;
+			height: 90%;
+			border: 1px solid #bfbfbf;
+			border-collapse: separate;
+		}
+	</style>
+
+	<script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
+	<script type="text/javascript">
+		dojo.require("dojo.parser");
+		dojo.require("dojox.wire");
+		dojo.require("dojox.wire.ml.Invocation");
+		dojo.require("dojox.wire.ml.DataStore");
+		dojo.require("dojox.wire.ml.Transfer");
+		dojo.require("dojox.wire.ml.Data");
+		dojo.require("dijit.form.TextBox");
+	</script>
+</head>
+
+<body class="tundra">
+
+	<!-- Layout -->
+	<font size="3"><b>Demo of Chaining Actions:</b></font><br/><br/>
+	This demo shows how you can chain actions together to fire in a sequence.  
+	Such as the completion of setting one value on a widget triggers the setting of another value on the widget
+	<br/>
+	<br/>
+	<table>
+		<tr>
+			<td>
+				<div dojoType="dijit.form.TextBox" id="inputField" value="" size="50"></div>
+			</td>
+		</tr>
+		<tr>
+			<td>
+				<div dojoType="dijit.form.TextBox" id="targetField1" value="" disabled="true" size="50"></div>
+			</td>
+		</tr>
+		<tr>
+			<td>
+				<div dojoType="dijit.form.TextBox" id="targetField2" value="" disabled="true" size="50"></div>
+			</td>
+		</tr>
+	</table>
+
+
+	<!-------------------------------- Using dojox.wire, declaratively wire up the widgets. --------------------------->
+
+	<!--
+		This is an example of using the declarative data value definition.
+		These are effectively declarative variables to act as placeholders
+		for data values.
+	-->
+	<div dojoType="dojox.wire.ml.Data"
+		id="data">
+		<div dojoType="dojox.wire.ml.DataProperty"
+			name="tempData"
+			value="">
+		</div>
+	</div>
+
+	<!-- 
+		Whenever a key is entered into the textbox, copy the value somewhere, then invoke a method on another widget, in this case
+		on just another text box.
+	-->
+	<div dojoType="dojox.wire.ml.Action"
+		id="action1"
+		trigger="inputField"
+		triggerEvent="onkeyup">
+		<div dojoType="dojox.wire.ml.Invocation" object="inputField"    method="getValue" result="data.tempData"></div>
+		<div dojoType="dojox.wire.ml.Invocation" id="targetCopy" object="targetField1"  method="setValue" parameters="data.tempData"></div>
+	</div>    
+
+	<!-- 
+		Whenever the primary cloning invocation completes, invoke a secondary cloning action.
+	-->
+	<div dojoType="dojox.wire.ml.Action"
+		id="action2"
+		trigger="targetCopy"
+		triggerEvent="onComplete">
+		<!--
+			Note that this uses the basic 'property' form of copying the property over and setting it.  The Wire
+			code supports both getX and setX functions of setting a property as well as direct access.  It first looks
+			for the getX/setX functions and if present, uses them.  If missing, it will just do direct access.  Because
+			of the standard getValue/setValue API of dijit form widgets, these transfers work really well and are very compact.   
+		-->
+		<div dojoType="dojox.wire.ml.Transfer" source="targetField1.value" target="targetField2.value"></div>
+	</div>    
+</body>
+</html>
diff --git a/includes/js/dojox/wire/demos/markup/demo_ActionWiring.html b/includes/js/dojox/wire/demos/markup/demo_ActionWiring.html
new file mode 100644
index 0000000..995b67f
--- /dev/null
+++ b/includes/js/dojox/wire/demos/markup/demo_ActionWiring.html
@@ -0,0 +1,142 @@
+<!--
+  This file demonstrates how the dojox.wire code can be used to do declarative
+  wiring of events on one item to trigger event on other widgets.  It also shows
+  how you can use the Transfer object to morph data values from one format to 
+  another.  In this specific case, it maps the values from a dojo.data Datastore
+  item into values stored in a JavaScript Array, which is the format required for
+  the addRow method of the demonstration TableContainer.
+
+  Note that this demo expects dojo, digit, and dojox to all be peers in the same directory
+  in order for it to execute.
+-->
+<html>
+<head>
+	<title>Sample declarative data binding</title>
+	<style type="text/css">
+
+		@import "../../../../dijit/themes/tundra/tundra.css";
+		@import "../../../../dojo/resources/dojo.css";
+		@import "../../../../dijit/tests/css/dijitTests.css";
+		@import "../TableContainer.css";
+
+		.splitView {
+			width: 90%;
+			height: 90%;
+			border: 1px solid #bfbfbf;
+			border-collapse: separate;
+		}
+	</style>
+
+	<script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
+	<script type="text/javascript">
+		dojo.require("dojo.parser");
+		dojo.require("dojox.wire.ml.Invocation");
+		dojo.require("dojox.wire.ml.DataStore");
+		dojo.require("dojox.wire.ml.Transfer");
+
+		dojo.require("dijit.layout.SplitContainer");
+		dojo.require("dijit.layout.LayoutContainer");
+		dojo.require("dijit.layout.ContentPane");
+		dojo.require("dijit.form.Button");
+		dojo.require("dijit.form.TextBox");
+
+		dojo.require("dojo.data.ItemFileReadStore");
+		dojo.require("dojox.wire");
+		dojo.require("dojox.wire.demos.TableContainer");
+
+		//Toplevel JS Object to contain a few basics for us, such as the request to pass to the store and a stub onItem function
+		// to trap on for triggering other events.
+		dataHolder = {
+			//Simple object definition to get all items and sort it by the attribute 'type'.
+			request: {query: {name: "*"}, onItem: function(item, req){}, sort: [{attribute: "type"}]},
+			//Spot to store off data values as they're generated by the declarative binding.
+			result: null
+		};
+
+	</script>
+</head>
+
+<body class="tundra">
+
+	<!-- The following is the basic layout.  A split container with a button and a text field.  Data will be displayed on the right. -->
+	<div dojoType="dijit.layout.SplitContainer"
+		orientation="horizontal"
+		sizerWidth="7"
+		activeSizing="true"
+		class="splitView">
+		<div dojoType="dijit.layout.ContentPane" sizeMin="50" sizeShare="50">
+			<font size="3"><b>Demo Searcher (Searches on Attribute 'name'):</b></font><br/><br/>
+			<b>Usage:</b><br/>
+			Enter the name you want to search the store for.  Wildcards * (multiple character), and ? (single character), are allowed.
+			<br/>
+			<br/>
+			<table style="width: 90%;">
+				<tr>
+					<td align="left">
+						<div dojoType="dijit.form.Button" jsId="searchButton">Search Datastore</div>
+					</td>
+					<td align="right">
+						<div dojoType="dijit.form.TextBox" jsId="inputField" value="*"></div>
+					</td>
+				</tr>
+			</table>
+		</div>
+		<div dojoType="dijit.layout.ContentPane" sizeMin="50" sizeShare="50">
+			<div class="dataTable" dojoType="dojox.wire.demos.TableContainer" jsId="dataTable" headers="Name,Location Type"></div>
+		</div>
+	</div>
+
+
+	<!-------------------------------- Using dojox.wire, declaratively wire up the widgets. --------------------------->
+
+	<!-- The store that is queried in this demo -->    
+	<div dojoType="dojo.data.ItemFileReadStore"
+		jsId="DataStore1"
+		url="countries.json">
+	</div>
+
+	<!-- 
+		When the search button is clicked, clear existing rows from table, 
+		Then invoke the fetch to repopulate the table.
+	-->
+	<div dojoType="dojox.wire.ml.Action"
+		trigger="searchButton"
+		triggerEvent="onClick">
+		<div dojoType="dojox.wire.ml.Invocation" object="dataTable"  method="clearTable"></div>
+		<div dojoType="dojox.wire.ml.Invocation" object="DataStore1" method="fetch" parameters="dataHolder.request"></div>
+	</div>    
+
+	<!-- 
+		Link existing of the text box to transfering the search string to the query param.
+		We are wiring the value of TextBox value of the widget to the name property of our request
+		object.  The copy of values to the search should occur on each keyup event (each keypress)
+	 -->
+	<div dojoType="dojox.wire.ml.Transfer"
+		trigger="inputField" triggerEvent="onkeyup"
+		source="inputField.textbox.value" 
+		target="dataHolder.request.query.name">
+	</div>
+
+	<!-- 
+	  On the call of the onItem function of 'dataHolder', trigger a binding/mapping of the
+	  item's attribute 'name' and 'type' attributes to specific columns in an array.  Note here that since
+	  sourceStore is set, it treats the arguments as items from that store and accesses the attributes
+	  appropriately.  In this case 'name' becomes array entry 0, type, array entry 1, and so on.
+
+	  Then take the result of the data mapping and pass it into the invoke of the addRow function on the
+	  TableContainer widget.
+	-->  
+	<div dojoType="dojox.wire.ml.Action"
+		trigger="dataHolder.request" triggerEvent="onItem">
+		<div dojoType="dojox.wire.ml.Transfer"
+			source="arguments[0]" sourceStore="DataStore1"
+			target="dataHolder.result">
+			<div dojoType="dojox.wire.ml.ColumnWire" attribute="name"></div>
+			<div dojoType="dojox.wire.ml.ColumnWire" attribute="type"></div>
+		</div>
+		<div dojoType="dojox.wire.ml.Invocation"
+			object="dataTable" method="addRow" parameters='dataHolder.result'>
+		</div>
+	</div>         
+</body>
+</html>
diff --git a/includes/js/dojox/wire/demos/markup/demo_BasicChildWire.html b/includes/js/dojox/wire/demos/markup/demo_BasicChildWire.html
new file mode 100644
index 0000000..f5973e7
--- /dev/null
+++ b/includes/js/dojox/wire/demos/markup/demo_BasicChildWire.html
@@ -0,0 +1,78 @@
+<!--
+	This file demonstrates how the dojox.wire code can be used to do declarative
+	wiring of properties/attributes of some object to the properties/attributes of
+	another object.  It specifically uses the Child (Composite) wire type to perform
+	the mapping.
+
+	Note that this demo expects dojo, digit, and dojox to all be peers in the same directory
+	in order for it to execute.
+-->
+<html>
+	<head>
+	<title>Sample Composite (Child) Wire usage.</title>
+		<style type="text/css">
+			@import "../../../../dijit/themes/tundra/tundra.css";
+			@import "../../../../dojo/resources/dojo.css";
+			@import "../../../../dijit/tests/css/dijitTests.css";
+		</style>
+
+		<script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
+		<script type="text/javascript">
+			dojo.require("dojo.parser");
+			dojo.require("dijit.form.Button");
+			dojo.require("dojo.data.ItemFileReadStore");
+			dojo.require("dojox.wire.ml.Invocation");
+			dojo.require("dojox.wire.ml.DataStore");
+			dojo.require("dojox.wire.ml.Transfer");
+			dojo.require("dojox.wire");
+			dojo.require("dojox.wire.demos.WidgetRepeater");
+
+			dataHolder = {
+				request: {onItem: function(item){}},
+				result: null
+			};
+		</script>
+	</head>
+	<body class="tundra">
+		<!-- 
+			On load of the page, invoke the fetch method of the object 'DataStore1', 
+			get its parameters from the JS object 'sample.request
+		-->     
+		<div dojoType="dojox.wire.ml.Invocation"
+			triggerEvent="onLoad"
+			object="DataStore1" method="fetch" parameters="dataHolder.request">
+		</div>
+
+		<!-- 
+			The store that is queried in this demo 
+		-->    
+		<div dojoType="dojo.data.ItemFileReadStore"
+			jsId="DataStore1"
+			url="countries.json">
+		</div>
+
+		<!--
+			Simple container widget for creating a 'list' of some set of widgets
+			As defined by the widget type it contains.
+		-->
+		<div dojoType="dojox.wire.demos.WidgetRepeater"
+			widget="dijit.form.Button" jsId="r1">
+		</div>
+
+		<!-- 
+			On the call of the onItem function of 'sample', trigger a binding/mapping of the
+			item's attribute 'name' to the target object property: dataHolder.result.caption
+			Then invoke the WidgetRepeater (r1)'s createNew method, using the parameters from
+			dataHolder.result.
+		-->  
+		<div dojoType="dojox.wire.ml.Action"
+			trigger="dataHolder.request" triggerEvent="onItem">
+			<div dojoType="dojox.wire.ml.Transfer"
+				source="arguments[0]" sourceStore="DataStore1"
+				target="dataHolder.result">
+				<div dojoType="dojox.wire.ml.ChildWire" name="label" attribute="name"></div>
+			</div>
+			<div dojoType="dojox.wire.ml.Invocation" object="r1" method="createNew" parameters='dataHolder.result'></div>
+		</div>    
+	</body>
+</html>
diff --git a/includes/js/dojox/wire/demos/markup/demo_BasicColumnWiring.html b/includes/js/dojox/wire/demos/markup/demo_BasicColumnWiring.html
new file mode 100644
index 0000000..48c327e
--- /dev/null
+++ b/includes/js/dojox/wire/demos/markup/demo_BasicColumnWiring.html
@@ -0,0 +1,90 @@
+<!--
+	This file demonstrates how the dojox.wire code can be used to do declarative
+	wiring of events on one item to trigger event on other items.  It also shows
+	how you can use the Transfer object to morph data values from one format to 
+	another.  In this specific case, it maps the values from a dojo.data Datastore
+	item into values stored in a JavaScript Array, which is the format required for
+	the addRow method of the demonstration TableContainer.
+
+	Note that this demo expects dojo, digit, and dojox to all be peers in the same directory
+	in order for it to execute.
+-->
+<html>
+<head>
+	<title>Sample Declarative Data Binding using ColumnWire</title>
+	<style type="text/css">
+		@import "../../../../dijit/themes/tundra/tundra.css";
+		@import "../../../../dojo/resources/dojo.css";
+		@import "../../../../dijit/tests/css/dijitTests.css";
+		@import "../TableContainer.css";
+	</style>
+
+	<script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
+	<script type="text/javascript">
+		dojo.require("dojo.parser");
+		dojo.require("dojox.wire.ml.Invocation");
+		dojo.require("dojox.wire.ml.DataStore");
+		dojo.require("dojox.wire.ml.Transfer");
+
+		dojo.require("dijit._Widget");
+		dojo.require("dijit._Templated");
+		dojo.require("dojo.data.ItemFileReadStore");
+		dojo.require("dojox.wire");
+		dojo.require("dojox.wire.demos.TableContainer");
+
+		//Toplevel JS Object to contain a few basics for us, such as the request to pass to the store and a stub onItem function
+		// to trap on for triggering other events.
+		dataHolder = {
+			//Simple object definition to get all items and sort it by the attribute 'type'.
+			request: {onItem: function(item){}, sort: [{attribute: "type"}]},
+			//Spot to store off data values as they're generated by the declarative binding.
+			result: null
+		};
+	</script>
+</head>
+
+<body class="tundra">
+	<!-- 
+		The store that is queried in this demo 
+	-->    
+	<div dojoType="dojo.data.ItemFileReadStore"
+		jsId="DataStore1"
+		url="countries.json">
+	</div>
+
+	<!-- 
+		On load of the page, invoke the fetch method of the object 'DataStore1', 
+		get its parameters from the JS object 'sample.request
+	-->     
+	<div dojoType="dojox.wire.ml.Invocation"
+		triggerEvent="onLoad"
+		object="DataStore1" method="fetch" parameters="dataHolder.request"></div>
+
+	<!--
+		Simple container widget for creating a 'table from rows defined by an array
+	-->    
+	<div dojoType="dojox.wire.demos.TableContainer" jsId="r1" headers="Name,Location Type"></div>
+
+	<!-- 
+		On the call of the onItem function of 'dataHolder', trigger a binding/mapping of the
+		item's attribute 'name' and 'type' attributes to specific columns in an array.  Note here that since
+		sourceStore is set, it treats the arguments as items from that store and accesses the attributes
+		appropriately.  In this case 'name' becomes array entry 0, type, array entry 1, and so on.
+
+		Then take the result of the data mapping and pass it into the invoke of the addRow function on the
+		TableContainer widget.
+	-->  
+	<div dojoType="dojox.wire.ml.Action"
+		trigger="dataHolder.request" triggerEvent="onItem">
+		<div dojoType="dojox.wire.ml.Transfer"
+			source="arguments[0]" sourceStore="DataStore1"
+			target="dataHolder.result">
+			<div dojoType="dojox.wire.ml.ColumnWire" attribute="name"></div>
+			<div dojoType="dojox.wire.ml.ColumnWire" attribute="type"></div>
+		</div>
+		<div dojoType="dojox.wire.ml.Invocation"
+			object="r1" method="addRow" parameters='dataHolder.result'>
+		</div>
+	</div>         
+</body>
+</html>
diff --git a/includes/js/dojox/wire/demos/markup/demo_ConditionalActions.html b/includes/js/dojox/wire/demos/markup/demo_ConditionalActions.html
new file mode 100644
index 0000000..ea0ca64
--- /dev/null
+++ b/includes/js/dojox/wire/demos/markup/demo_ConditionalActions.html
@@ -0,0 +1,221 @@
+<!--
+	This file demonstrates how the dojox.wire code can be used to do declarative
+	wiring of events.  Specifically, it shows how you can wire actions to set values 
+	across to other widgets, but only if certain conditions are met.
+-->
+<html>
+<head>
+	<title>Conditional Actions Demo</title>
+	<style type="text/css">
+
+		@import "../../../../dijit/themes/tundra/tundra.css";
+		@import "../../../../dojo/resources/dojo.css";
+		@import "../../../../dijit/tests/css/dijitTests.css";
+		@import "../TableContainer.css";
+
+		.splitView {
+			width: 90%;
+			height: 90%;
+			border: 1px solid #bfbfbf;
+			border-collapse: separate;
+		}
+
+		b {
+			float: left;
+		}
+
+		.rJustified {
+			float: right;
+		}
+
+	</style>
+
+	<script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
+	<script type="text/javascript">
+		dojo.require("dojo.parser");
+		dojo.require("dojo.data.ItemFileReadStore");
+		dojo.require("dojox.wire");
+		dojo.require("dojox.wire.ml.Invocation");
+		dojo.require("dojox.wire.ml.DataStore");
+		dojo.require("dojox.wire.ml.Transfer");
+		dojo.require("dojox.wire.ml.Data");
+		dojo.require("dijit.form.TextBox");
+		dojo.require("dijit.form.CheckBox");
+		dojo.require("dijit.form.ComboBox");
+	</script>
+</head>
+
+<body class="tundra">
+
+	<!-- Layout -->
+	<font size="3"><b>Demo of Conditional Actions:</b></font><br/><br/>
+	This demo shows how you can use actions to read and set widget values, as well as have actions only occur if 
+	if certain conditions are met, such as cloning values as they are typed from the billing address over to the
+	shipping address if the 'Use Same Address' checkbox is checked true.
+	<br/>
+	<br/>
+	<div dojoType="dojo.data.ItemFileReadStore" url="states.json" jsId="statesStore"></div>
+	<table width="100%">
+		<tr>
+			<td colspan="2" align="center">
+				Use Same Address: <div dojoType="dijit.form.CheckBox" id="useSameAddress" checked="true"></div>
+			</td>
+		</tr>
+		<tr>
+			<td>
+				<b>Billing Address</b>
+			</td>
+			<td>
+				<b>Shipping Address</b>
+			</td>
+		</tr>
+
+		<tr>
+			<td>
+				<b>Name:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="BillingName" name="billingname" value=""  size="50"></div>
+			</td>
+			<td>
+				<b>Name:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="ShippingName" name="shippingname" value="" disabled="true" size="50"></div>
+			</td>
+		</tr>
+		<tr>
+			<td>
+				<b>Address 1:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="BillingAddress1" name="billingaddress1" value=""  size="50"></div>
+			</td>
+			<td>
+				<b>Address 1:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="ShippingAddress1" name="shippingaddress1" value="" disabled="true" size="50"></div>
+			</td>
+		</tr>
+		<tr>
+			<td>
+				<b>Address 2:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="BillingAddress2" name="billingaddress2" value=""  size="50"></div>
+			</td>
+			<td>
+				<b>Address 2:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="ShippingAddress2" name="shippingaddress2" value="" disabled="true" size="50"></div>
+			</td>
+		</tr>
+		<tr>
+			<td>
+				<b>City:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="BillingCity" name="billingcity" value=""  size="50"></div>
+			</td>
+			<td>
+				<b>City:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="ShippingCity" name="shippingcity" value="" disabled="true" size="50"></div>
+			</td>
+		</tr>
+		<tr>
+			<td>
+				<b>State:</b> <div class="rJustified" dojoType="dijit.form.ComboBox" searchAttr="name" id="BillingState" name="billingstate" value=""   store="statesStore" size="46"></div>
+			</td>
+			<td>
+				<b>State:</b> <div class="rJustified" dojoType="dijit.form.ComboBox" searchAttr="name" id="ShippingState" name="shippingstate" value="" store="statesStore" disabled="true" size="46"></div>
+			</td>
+		</tr>
+		<tr>
+			<td>
+				<b>Zip code:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="BillingZip" name="billingzip" value=""  size="50"></div>
+			</td>
+			<td>
+				<b>Zip code:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="ShippingZip" name="shippingzip" value="" disabled="true" size="50"></div>
+			</td>
+		</tr>
+	</table>
+
+
+	<!-------------------------------- Using dojox.wire, declaratively wire up the widgets. --------------------------->
+
+	<!--
+		This is a simple data map so that the attributes we support modifying on ComboBox, TextField, etc, are lookupable.
+		since steAttribute(attr, value), replaced the single attribute setDisabled
+	-->
+	<div dojoType="dojox.wire.ml.Data"
+		id="attributesMap">
+		<div dojoType="dojox.wire.ml.DataProperty"
+			name="disabled"
+			value="disabled"></div>
+	</div>
+
+
+	<!-- 
+		Enable/disable the Right hand side of the shipping address view based on the checkbox events. 
+	-->
+	<div dojoType="dojox.wire.ml.Action"
+		trigger="useSameAddress"
+		triggerEvent="setChecked">
+		<!--
+			Trigger a setting of the Shipping fields' input state based on the state of the checkbox.
+		-->
+		<div dojoType="dojox.wire.ml.Invocation" object="ShippingName"    method="setAttribute" parameters="attributesMap.disabled, arguments[0]"></div>
+		<div dojoType="dojox.wire.ml.Invocation" object="ShippingAddress1"    method="setAttribute" parameters="attributesMap.disabled, arguments[0]"></div>
+		<div dojoType="dojox.wire.ml.Invocation" object="ShippingAddress2"    method="setAttribute" parameters="attributesMap.disabled, arguments[0]"></div>
+		<div dojoType="dojox.wire.ml.Invocation" object="ShippingCity"    method="setAttribute" parameters="attributesMap.disabled, arguments[0]"></div>
+		<div dojoType="dojox.wire.ml.Invocation" object="ShippingState"    method="setAttribute" parameters="attributesMap.disabled, arguments[0]"></div>
+		<div dojoType="dojox.wire.ml.Invocation" object="ShippingZip"    method="setAttribute" parameters="attributesMap.disabled, arguments[0]"></div>
+	</div>    
+
+	<!-- 
+		Clone the values of form fields while typing based on the setting of the checkbox.
+	-->
+	<div dojoType="dojox.wire.ml.Action"
+		trigger="BillingName"
+		triggerEvent="onkeyup">
+		<div dojoType="dojox.wire.ml.ActionFilter" required="useSameAddress.checked" requiredValue="true" type="boolean"></div>        
+		<div dojoType="dojox.wire.ml.Transfer" source="BillingName.value" target="ShippingName.value"></div>
+	</div>    
+	<div dojoType="dojox.wire.ml.Action"
+		trigger="BillingAddress1"
+		triggerEvent="onkeyup">
+		<div dojoType="dojox.wire.ml.ActionFilter" required="useSameAddress.checked" requiredValue="true" type="boolean"></div>        
+		<div dojoType="dojox.wire.ml.Transfer" source="BillingAddress1.value" target="ShippingAddress1.value"></div>
+	</div>    
+	<div dojoType="dojox.wire.ml.Action"
+		trigger="BillingAddress2"
+		triggerEvent="onkeyup">
+		<div dojoType="dojox.wire.ml.ActionFilter" required="useSameAddress.checked" requiredValue="true" type="boolean"></div>        
+		<div dojoType="dojox.wire.ml.Transfer" source="BillingAddress2.value" target="ShippingAddress2.value"></div>
+	</div>
+	<div dojoType="dojox.wire.ml.Action"
+		trigger="BillingCity"
+		triggerEvent="onkeyup">
+		<div dojoType="dojox.wire.ml.ActionFilter" required="useSameAddress.checked" requiredValue="true" type="boolean"></div>        
+		<div dojoType="dojox.wire.ml.Transfer" source="BillingCity.value" target="ShippingCity.value"></div>
+	</div>    
+	<div dojoType="dojox.wire.ml.Action"
+		trigger="BillingState"
+		triggerEvent="onChange">
+		<div dojoType="dojox.wire.ml.ActionFilter" required="useSameAddress.checked" requiredValue="true" type="boolean"></div>        
+		<div dojoType="dojox.wire.ml.Transfer" source="BillingState.value" target="ShippingState.value"></div>
+	</div>    
+
+	<div dojoType="dojox.wire.ml.Action"
+		trigger="BillingZip"
+		triggerEvent="onkeyup">
+		<div dojoType="dojox.wire.ml.ActionFilter" required="useSameAddress.checked" requiredValue="true" type="boolean"></div>        
+		<div dojoType="dojox.wire.ml.Transfer" source="BillingZip.value" target="ShippingZip.value"></div>
+	</div>    
+
+
+	<!-- 
+		Clone the values of form fields from billing over to shipping  over if the 
+		useSameAddress checkbox is set back to true.
+	-->
+	<div dojoType="dojox.wire.ml.Action"
+		trigger="useSameAddress"
+		triggerEvent="setChecked">
+		<div dojoType="dojox.wire.ml.ActionFilter" required="arguments[0]" requiredValue="true" type="boolean"></div>        
+
+		<!--
+			Note that this uses the basic 'property' form of copying the property over and setting it.  The Wire
+			code supports both getX and setX functions of setting a property as well as direct access.  It first looks
+			for the getX/setX functions and if present, uses them.  If missing, it will just do direct access.  Because
+			of the standard getValue/setValue API of dijit form widgets, transfers work well and are compact.   
+		-->
+		<div dojoType="dojox.wire.ml.Transfer" source="BillingName.value" target="ShippingName.value"></div>
+		<div dojoType="dojox.wire.ml.Transfer" source="BillingAddress1.value" target="ShippingAddress1.value"></div>
+		<div dojoType="dojox.wire.ml.Transfer" source="BillingAddress2.value" target="ShippingAddress2.value"></div>
+		<div dojoType="dojox.wire.ml.Transfer" source="BillingCity.value" target="ShippingCity.value"></div>
+		<div dojoType="dojox.wire.ml.Transfer" source="BillingState.value" target="ShippingState.value"></div>
+		<div dojoType="dojox.wire.ml.Transfer" source="BillingZip.value" target="ShippingZip.value"></div>
+	</div>
+
+</body>
+</html>
diff --git a/includes/js/dojox/wire/demos/markup/demo_FlickrStoreWire.html b/includes/js/dojox/wire/demos/markup/demo_FlickrStoreWire.html
new file mode 100644
index 0000000..54068a9
--- /dev/null
+++ b/includes/js/dojox/wire/demos/markup/demo_FlickrStoreWire.html
@@ -0,0 +1,281 @@
+<!--
+  This file is a demo of the FlickrStore, a simple wrapper to the public feed service
+  of Flickr.  This just does very basic queries against Flickr and loads the results
+  into a list viewing widget.
+-->
+<html>
+<head>
+	<title>Demo of FlickrStore</title>
+	<style type="text/css">
+
+		@import "../../../../dijit/themes/tundra/tundra.css";
+		@import "../../../../dojo/resources/dojo.css";
+		@import "../../../../dijit/tests/css/dijitTests.css";
+		@import "./flickrDemo.css";
+	</style>
+
+	<script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
+	<script type="text/javascript">
+		dojo.require("dojo.parser");
+		dojo.require("dijit.form.TextBox");
+		dojo.require("dijit.form.Button");
+		dojo.require("dijit.form.ComboBox");
+		dojo.require("dijit.form.NumberSpinner");
+		dojo.require("dojox.data.FlickrStore");
+		dojo.require("dojox.wire.ml.Invocation");
+		dojo.require("dojox.wire.ml.Transfer");
+		dojo.require("dojox.wire.ml.Data");
+		dojo.require("dojox.wire");
+		dojo.require("dojox.data.demos.widgets.FlickrViewList");
+		dojo.require("dojox.data.demos.widgets.FlickrView");
+
+		//Toplevel JS Object to contain a few basics for us, such as the request to pass to the store and a stub onItem and onComplete function
+		// to trap on for triggering other events.
+		var dataHolder = {
+			//Simple stub datastore request
+			request: {query: {}, onItem: function(item, req){}, onComplete: function(items, req){}},
+			
+			//Spot to store off data values as they're generated by the declarative binding.
+			result: null
+		};
+
+		//Function to convert the input from a widget into a comma separated list.
+		//that is the format of the store parameter.
+		var tagsInputConverter = function(tags){
+			if(tags && tags !== ""){
+				var tagsArray = tags.split(" ");
+				tags = "";
+				for(var i = 0; i < tagsArray.length; i++){
+					tags = tags + tagsArray[i];
+					if(i < (tagsArray.length - 1)){
+						tags += ","
+					}
+				}
+			}
+			return tags
+		}
+
+	</script>
+</head>
+
+<body class="tundra">
+	<h1>
+		DEMO:  FlickrStore Search
+	</h1>
+	<hr>
+	<h3>
+		Description:
+	</h3>
+	<p>
+		This simple demo shows how services, such as Flickr, can be wrapped by the datastore API.  In this demo, you can search public 
+		Flickr images through a simple FlickrStore by specifying a series of tags (separated by spaces) to search on.  The results 
+		will be displayed below the search box.  This demo is the same as the example demo provided in dojox/data/demos/demo_FlickrStore.html, 
+		except that all the interactions are implemented via Wire instead of a script that runs at dojo.addOnLoad().
+	</p>
+	<p>
+		For fun, search on the 3dny tag!
+	</p>
+
+	<blockquote>
+
+	<!--
+		Layout.
+	-->
+	<table>
+		<tbody>
+			<tr>
+				<td>
+					<b>Status:</b>
+				</td>
+				<td>
+					<div dojoType="dijit.form.TextBox" size="50" id="status" jsId="statusWidget" disabled="true"></div>
+				</td>
+			</tr>
+			<tr>
+				<td>
+					<b>ID:</b>
+				</td>
+				<td>
+					<div dojoType="dijit.form.TextBox" size="50" id="userid" jsId="idWidget"></div>
+				</td>
+			</tr>
+			<tr>
+				<td>
+					<b>Tags:</b>
+				</td>
+				<td>
+					<div dojoType="dijit.form.TextBox" size="50" id="tags" jsId="tagsWidget" value="3dny"></div>
+				</td>
+			</tr>
+			<tr>
+				<td>
+					<b>Tagmode:</b>
+				</td>
+				<td>
+					<select id="tagmode"
+							jsId="tagmodeWidget"
+							dojoType="dijit.form.ComboBox"
+							autocomplete="false"
+							value="any"
+					>
+						<option>any</option>
+						<option>all</option>
+					</select>
+				</td>
+			</tr>
+			<tr>
+				<td>
+					<b>Number of Pictures:</b>
+				</td>
+				<td>
+					<div   
+						id="count"
+						jsId="countWidget"
+						dojoType="dijit.form.NumberSpinner"
+						value="20"
+						constraints="{min:1,max:20,places:0}" 
+					></div>
+				</td>
+			</tr>
+			<tr>
+				<td>
+				</td>
+				<td>
+					<div dojoType="dijit.form.Button" label="Search" id="searchButton" jsId="searchButtonWidget"></div>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+    </blockquote>
+	<!--
+		The store instance used by this demo.
+	-->
+	<div dojoType="dojox.data.FlickrStore" jsId="flickrStore" label="title"></div>
+	<div dojoType="dojox.data.demos.widgets.FlickrViewList" id="flickrViews" jsId="flickrViewsWidget"></div>
+
+	<!-------------------------------- Using dojox.wire, declaratively wire up the widgets. --------------------------->
+
+
+	<!--
+		This is an example of using the declarative data value definition.
+		These are effectively declarative variables to act as placeholders
+		for data values.
+	-->
+	<div dojoType="dojox.wire.ml.Data"
+		id="messageData"
+		jsId="messageData">
+		<div dojoType="dojox.wire.ml.DataProperty"
+			name="processingStart"
+			value="PROCESSING REQUEST">
+		</div>
+		<div dojoType="dojox.wire.ml.DataProperty"
+			name="processingDone"
+			value="PROCESSING COMPLETE">
+		</div>
+	</div>
+
+
+	<!-- 
+		When the search button is clicked, do the following in order:
+		1.)  Map the widget values over to the request properties.
+		2.)  Clear existing rows from table, 
+		3.)  Set the status to processing
+		4.)  Invoke the fetch to repopulate the table.
+	-->
+	<div dojoType="dojox.wire.ml.Action"
+		trigger="searchButtonWidget"
+		triggerEvent="onClick">
+		
+		<!-- 
+			Read in the values from the widgets and bind them to the appropriate data locations 
+			For basic properties, you could use transfer directly, but since the text boxes are
+			designed to be accessed through getValue/setValue, it's better to do these as 
+			Invocations on widget methods.
+		-->
+		<div dojoType="dojox.wire.ml.Invocation" 
+			 object="idWidget" 
+			 method="getValue"
+			 result="dataHolder.request.query.id">
+		</div>
+		
+
+		<!--
+		   For the tags, we need to get the value and then perform a conversion on the result
+		   This is done by doing an invoke, then a transfer through a converter.
+		-->
+		<div dojoType="dojox.wire.ml.Invocation" 
+			 object="tagsWidget" 
+			 method="getValue"
+			 result="dataHolder.request.query.tags">
+		</div>
+		<div dojoType="dojox.wire.ml.Transfer"
+			source="dataHolder.request.query.tags"
+			target="dataHolder.request.query.tags"
+			converter="tagsInputConverter">
+		</div>
+
+		<div dojoType="dojox.wire.ml.Invocation" 
+			 object="tagmodeWidget" 
+			 method="getValue"
+			 result="dataHolder.request.query.tagmode">
+		</div>
+
+		<div dojoType="dojox.wire.ml.Invocation" 
+			 object="countWidget" 
+			 method="getValue"
+			 result="dataHolder.request.count">
+		</div>
+
+
+		<!-- Now invoke the actions in order. -->
+		<div dojoType="dojox.wire.ml.Invocation" object="flickrViewsWidget" method="clearList"></div>
+		<div dojoType="dojox.wire.ml.Invocation" object="statusWidget" method="setValue" parameters="messageData.processingStart"></div>
+		<div dojoType="dojox.wire.ml.Invocation" object="flickrStore" method="fetch" parameters="dataHolder.request"></div>
+	</div>    
+
+	<!-- 
+		When the fetch processing finishes (onComplete is called), then set status to complete.
+	-->
+	<div dojoType="dojox.wire.ml.Action"
+		trigger="dataHolder.request"
+		triggerEvent="onComplete">
+		<div dojoType="dojox.wire.ml.Invocation" object="statusWidget" method="setValue" parameters="messageData.processingDone"></div>
+	</div>    
+
+
+	<!-- 
+		On the call of the onItem function of 'dataHolder', trigger a binding/mapping of the
+		item's attributes to the requires parameters that are passed into addView.  In this case
+		FlikrItemAttribute  ->  viewItemParam
+		title                   title
+		imageUrlSmall           iconUrl
+		imageUrl                imageUrl
+		author                  author
+
+		Then take the result of the data mapping and pass it into the invoke of the addView function on the
+		FlickerViews widget.
+	-->  
+	<div dojoType="dojox.wire.ml.Action"
+		trigger="dataHolder.request" triggerEvent="onItem">
+		<div dojoType="dojox.wire.ml.Transfer"
+			source="arguments[0]" sourceStore="flickrStore"
+			target="dataHolder.result">
+			<!-- 
+				Map the attributes of the items to the property name defined 
+				in the wire on the object in the target 
+			-->
+			<div dojoType="dojox.wire.ml.ChildWire"
+				name="title" attribute="title"></div>
+			<div dojoType="dojox.wire.ml.ChildWire"
+				name="imageUrl" attribute="imageUrl"></div>
+			<div dojoType="dojox.wire.ml.ChildWire"
+				name="iconUrl" attribute="imageUrlSmall"></div>
+			<div dojoType="dojox.wire.ml.ChildWire"
+				name="author" attribute="author"></div>
+		</div>
+		<div dojoType="dojox.wire.ml.Invocation"
+			object="flickrViewsWidget" method="addView" parameters='dataHolder.result'>
+		</div>
+	</div>         
+</body>
+</html>
diff --git a/includes/js/dojox/wire/demos/markup/demo_TopicWiring.html b/includes/js/dojox/wire/demos/markup/demo_TopicWiring.html
new file mode 100644
index 0000000..e091e8b
--- /dev/null
+++ b/includes/js/dojox/wire/demos/markup/demo_TopicWiring.html
@@ -0,0 +1,78 @@
+<!--
+	This file demonstrates how the dojox.wire code can be used to do declarative
+	wiring of events.  Specifically, it shows how you can publish and subscribe 
+	to topics.  In this case the setting of a value on one textbox triggers a 
+	publish of that value to a topic.  Another invoke is wired to fire when
+	values are published to that topic which is then displayed in another 
+	textbox.
+-->
+<html>
+<head>
+	<title>Sample Topic Wiring</title>
+	<style type="text/css">
+
+		@import "../../../../dijit/themes/tundra/tundra.css";
+		@import "../../../../dojo/resources/dojo.css";
+		@import "../../../../dijit/tests/css/dijitTests.css";
+		@import "../TableContainer.css";
+
+		.splitView {
+			width: 90%;
+			height: 90%;
+			border: 1px solid #bfbfbf;
+			border-collapse: separate;
+		}
+	</style>
+
+	<script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
+	<script type="text/javascript">
+		dojo.require("dojo.parser");
+		dojo.require("dojox.wire");
+		dojo.require("dojox.wire.ml.Invocation");
+		dojo.require("dojox.wire.ml.DataStore");
+		dojo.require("dojox.wire.ml.Transfer");
+		dojo.require("dojox.wire.ml.Data");
+
+		dojo.require("dijit.form.TextBox");
+	</script>
+</head>
+
+<body class="tundra">
+
+	<!-- Layout -->
+	<font size="3"><b>Demo of Topic Wiring</b></font><br/><br/>
+	This demo shows how you can wire events to publish to a topic as well as recieve topic events
+	<br/>
+	<br/>
+	<table>
+		<tr>
+			<td>
+				<div dojoType="dijit.form.TextBox" jsId="inputField" value="" size="50"></div>
+			</td>
+		</tr>
+		<tr>
+			<td>
+				<div dojoType="dijit.form.TextBox" jsId="targetField1" value="" disabled="true" size="50"></div>
+			</td>
+		</tr>
+	</table>
+
+
+	<!-------------------------------- Using dojox.wire, declaratively wire up the widgets. --------------------------->
+	
+	<!-- 
+		Whenever a key is entered into the textbox, publish the value of it to a topic.
+	-->
+	<div dojoType="dojox.wire.ml.Action"
+		id="action1"
+		trigger="inputField"
+		triggerEvent="onkeyup">
+		<div dojoType="dojox.wire.ml.Invocation" topic="sampleTopic"    parameters="inputField.value"></div>
+	</div>    
+
+	<!-- 
+		Whenever a value is published to a topic, set it as the value of the textbox by calling the setValue function.
+	-->
+	<div dojoType="dojox.wire.ml.Invocation" triggerTopic="sampleTopic" object="targetField1"    method="setValue" parameters="arguments[0]"></div>
+</body>
+</html>
diff --git a/includes/js/dojox/wire/demos/markup/flickrDemo.css b/includes/js/dojox/wire/demos/markup/flickrDemo.css
new file mode 100644
index 0000000..793d1c6
--- /dev/null
+++ b/includes/js/dojox/wire/demos/markup/flickrDemo.css
@@ -0,0 +1,29 @@
+.flickrView {
+	padding: 3 3 3 3;
+	border-width: 1px;
+	border-style: solid;
+	border-color: #000000;
+	border-collapse: separate;
+        width: 100%;
+}
+.flickrView th {
+	text-align: left;
+} 
+.flickrView tr {
+	padding: 3 3 3 3;
+	border-width: 1px;
+	border-style: solid;
+	border-color: #000000;
+}
+.flickrView tr td {
+	padding: 3 3 3 3;
+	border-width: 1px;
+	border-style: solid;
+	border-color: #000000;
+}
+.flickrView {
+	background-color: #EFEFEF;
+}
+.flickrTitle {
+	background-color: #CCCCCC;
+}
diff --git a/includes/js/dojox/wire/demos/markup/flickrDemo.css.commented.css b/includes/js/dojox/wire/demos/markup/flickrDemo.css.commented.css
new file mode 100644
index 0000000..7e75a5d
--- /dev/null
+++ b/includes/js/dojox/wire/demos/markup/flickrDemo.css.commented.css
@@ -0,0 +1,35 @@
+.flickrView {
+	padding: 3 3 3 3;
+	border-width: 1px;
+	border-style: solid;
+	border-color: #000000;
+	border-collapse: separate;
+        width: 100%;
+}
+
+.flickrView th {
+	text-align: left;
+} 
+
+.flickrView tr {
+	padding: 3 3 3 3;
+	border-width: 1px;
+	border-style: solid;
+	border-color: #000000;
+}
+
+.flickrView tr td {
+	padding: 3 3 3 3;
+	border-width: 1px;
+	border-style: solid;
+	border-color: #000000;
+}
+
+.flickrView {
+	background-color: #EFEFEF;
+}
+
+.flickrTitle {
+	background-color: #CCCCCC;
+}
+
diff --git a/includes/js/dojox/wire/demos/markup/states.json b/includes/js/dojox/wire/demos/markup/states.json
new file mode 100644
index 0000000..bdaa609
--- /dev/null
+++ b/includes/js/dojox/wire/demos/markup/states.json
@@ -0,0 +1,56 @@
+{"identifier":"abbreviation",
+"label": "label",
+"items": [
+	{"name":"Alabama", "label":"Alabama","abbreviation":"AL"},
+	{"name":"Alaska", "label":"Alaska","abbreviation":"AK"},
+	{"name":"American Samoa", "label":"American Samoa","abbreviation":"AS"},
+	{"name":"Arizona", "label":"Arizona","abbreviation":"AZ"},
+	{"name":"Arkansas", "label":"Arkansas","abbreviation":"AR"},
+	{"name":"California", "label":"California","abbreviation":"CA"},
+	{"name":"Colorado", "label":"Colorado","abbreviation":"CO"},
+	{"name":"Connecticut", "label":"Connecticut","abbreviation":"CT"},
+	{"name":"Delaware", "label":"Delaware","abbreviation":"DE"},
+	{"name":"Florida", "label":"Florida","abbreviation":"FL"},
+	{"name":"Georgia", "label":"Georgia","abbreviation":"GA"},
+	{"name":"Hawaii", "label":"Hawaii","abbreviation":"HI"},
+	{"name":"Idaho", "label":"Idaho","abbreviation":"ID"},
+	{"name":"Illinois", "label":"Illinois","abbreviation":"IL"},
+	{"name":"Indiana", "label":"Indiana","abbreviation":"IN"},
+	{"name":"Iowa", "label":"Iowa","abbreviation":"IA"},
+	{"name":"Kansas", "label":"Kansas","abbreviation":"KS"},
+	{"name":"Kentucky", "label":"Kentucky","abbreviation":"KY"},
+	{"name":"Louisiana", "label":"Louisiana","abbreviation":"LA"},
+	{"name":"Maine", "label":"Maine","abbreviation":"ME"},
+	{"name":"Marshall Islands", "label":"Marshall Islands","abbreviation":"MH"},
+	{"name":"Maryland", "label":"Maryland","abbreviation":"MD"},
+	{"name":"Massachusetts", "label":"Massachusetts","abbreviation":"MA"},
+	{"name":"Michigan", "label":"Michigan","abbreviation":"MI"},
+	{"name":"Minnesota", "label":"Minnesota","abbreviation":"MN"},
+	{"name":"Mississippi", "label":"Mississippi","abbreviation":"MS"},
+	{"name":"Missouri", "label":"Missouri","abbreviation":"MO"},
+	{"name":"Montana", "label":"Montana","abbreviation":"MT"},
+	{"name":"Nebraska", "label":"Nebraska","abbreviation":"NE"},
+	{"name":"Nevada", "label":"Nevada","abbreviation":"NV"},
+	{"name":"New Hampshire", "label":"New Hampshire","abbreviation":"NH"},
+	{"name":"New Jersey", "label":"New Jersey","abbreviation":"NJ"},
+	{"name":"New Mexico", "label":"New Mexico","abbreviation":"NM"},
+	{"name":"New York", "label":"New York","abbreviation":"NY"},
+	{"name":"North Carolina", "label":"North Carolina","abbreviation":"NC"},
+	{"name":"North Dakota", "label":"North Dakota","abbreviation":"ND"},
+	{"name":"Ohio", "label":"Ohio","abbreviation":"OH"},
+	{"name":"Oklahoma", "label":"Oklahoma","abbreviation":"OK"},
+	{"name":"Oregon", "label":"Oregon","abbreviation":"OR"},
+	{"name":"Pennsylvania", "label":"Pennsylvania","abbreviation":"PA"},
+	{"name":"Rhode Island", "label":"Rhode Island","abbreviation":"RI"},
+	{"name":"South Carolina", "label":"South Carolina","abbreviation":"SC"},
+	{"name":"South Dakota", "label":"South Dakota","abbreviation":"SD"},
+	{"name":"Tennessee", "label":"Tennessee","abbreviation":"TN"},
+	{"name":"Texas", "label":"Texas","abbreviation":"TX"},
+	{"name":"Utah", "label":"Utah","abbreviation":"UT"},
+	{"name":"Vermont", "label":"Vermont","abbreviation":"VT"},
+	{"name":"Virginia", "label":"Virginia","abbreviation":"VA"},
+	{"name":"Washington", "label":"Washington","abbreviation":"WA"},
+	{"name":"West Virginia", "label":"West Virginia","abbreviation":"WV"},
+	{"name":"Wisconsin", "label":"Wisconsin","abbreviation":"WI"},
+	{"name":"Wyoming", "label":"Wyoming","abbreviation":"WY"}
+]}
\ No newline at end of file