1 files changed, 108 insertions, 0 deletions
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>