summaryrefslogtreecommitdiff
path: root/includes/js/dojox/wire/demos/markup/demo_ActionChaining.html
blob: 596d6ec45ace178b2835a139f3597bd51e54dfd3 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
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>