source: Dev/trunk/src/client/dojox/wire/demos/markup/demo_ConditionalActions.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 9.3 KB
Line 
1<!--
2        This file demonstrates how the dojox.wire code can be used to do declarative
3        wiring of events.  Specifically, it shows how you can wire actions to set values
4        across to other widgets, but only if certain conditions are met.
5-->
6<html>
7<head>
8        <title>Conditional Actions Demo</title>
9        <style type="text/css">
10
11                @import "../../../../dijit/themes/tundra/tundra.css";
12                @import "../../../../dojo/resources/dojo.css";
13                @import "../../../../dijit/tests/css/dijitTests.css";
14                @import "../TableContainer.css";
15
16                .splitView {
17                        width: 90%;
18                        height: 90%;
19                        border: 1px solid #bfbfbf;
20                        border-collapse: separate;
21                }
22
23                b {
24                        float: left;
25                }
26
27                .rJustified {
28                        float: right;
29                }
30
31        </style>
32
33        <script type="text/javascript" src="../../../../dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
34        <script type="text/javascript">
35                dojo.require("dojo.parser");
36                dojo.require("dojo.data.ItemFileReadStore");
37                dojo.require("dojox.wire");
38                dojo.require("dojox.wire.ml.Invocation");
39                dojo.require("dojox.wire.ml.DataStore");
40                dojo.require("dojox.wire.ml.Transfer");
41                dojo.require("dojox.wire.ml.Data");
42                dojo.require("dijit.form.TextBox");
43                dojo.require("dijit.form.CheckBox");
44                dojo.require("dijit.form.ComboBox");
45        </script>
46</head>
47
48<body class="tundra">
49
50        <!-- Layout -->
51        <font size="3"><b>Demo of Conditional Actions:</b></font><br/><br/>
52        This demo shows how you can use actions to read and set widget values, as well as have actions only occur if
53        if certain conditions are met, such as cloning values as they are typed from the billing address over to the
54        shipping address if the 'Use Same Address' checkbox is checked true.
55        <br/>
56        <br/>
57        <div dojoType="dojo.data.ItemFileReadStore" url="states.json" data-dojo-id="statesStore"></div>
58        <table width="100%">
59                <tr>
60                        <td colspan="2" align="center">
61                                Use Same Address: <div dojoType="dijit.form.CheckBox" id="useSameAddress" checked="true"></div>
62                        </td>
63                </tr>
64                <tr>
65                        <td>
66                                <b>Billing Address</b>
67                        </td>
68                        <td>
69                                <b>Shipping Address</b>
70                        </td>
71                </tr>
72
73                <tr>
74                        <td>
75                                <b>Name:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="BillingName" name="billingname" value=""  size="50" intermediateChanges="true"></div>
76                        </td>
77                        <td>
78                                <b>Name:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="ShippingName" name="shippingname" value="" disabled="true" size="50"></div>
79                        </td>
80                </tr>
81                <tr>
82                        <td>
83                                <b>Address 1:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="BillingAddress1" name="billingaddress1" value=""  size="50" intermediateChanges="true"></div>
84                        </td>
85                        <td>
86                                <b>Address 1:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="ShippingAddress1" name="shippingaddress1" value="" disabled="true" size="50"></div>
87                        </td>
88                </tr>
89                <tr>
90                        <td>
91                                <b>Address 2:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="BillingAddress2" name="billingaddress2" value=""  size="50" intermediateChanges="true"></div>
92                        </td>
93                        <td>
94                                <b>Address 2:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="ShippingAddress2" name="shippingaddress2" value="" disabled="true" size="50"></div>
95                        </td>
96                </tr>
97                <tr>
98                        <td>
99                                <b>City:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="BillingCity" name="billingcity" value=""  size="50" intermediateChanges="true"></div>
100                        </td>
101                        <td>
102                                <b>City:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="ShippingCity" name="shippingcity" value="" disabled="true" size="50"></div>
103                        </td>
104                </tr>
105                <tr>
106                        <td>
107                                <b>State:</b> <div class="rJustified" dojoType="dijit.form.ComboBox" searchAttr="name" id="BillingState" name="billingstate" value=""   store="statesStore" size="46"></div>
108                        </td>
109                        <td>
110                                <b>State:</b> <div class="rJustified" dojoType="dijit.form.ComboBox" searchAttr="name" id="ShippingState" name="shippingstate" value="" store="statesStore" disabled="true" size="46"></div>
111                        </td>
112                </tr>
113                <tr>
114                        <td>
115                                <b>Zip code:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="BillingZip" name="billingzip" value=""  size="50" intermediateChanges="true"></div>
116                        </td>
117                        <td>
118                                <b>Zip code:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="ShippingZip" name="shippingzip" value="" disabled="true" size="50"></div>
119                        </td>
120                </tr>
121        </table>
122
123
124        <!-------------------------------- Using dojox.wire, declaratively wire up the widgets. --------------------------->
125
126        <!--
127                This is a simple data map so that the attributes we support modifying on ComboBox, TextField, etc, are lookupable.
128                since steAttribute(attr, value), replaced the single attribute setDisabled
129        -->
130        <div dojoType="dojox.wire.ml.Data"
131                id="attributesMap">
132                <div dojoType="dojox.wire.ml.DataProperty"
133                        name="disabled"
134                        value="disabled"></div>
135        </div>
136
137
138        <!--
139                Enable/disable the Right hand side of the shipping address view based on the checkbox events.
140        -->
141        <div dojoType="dojox.wire.ml.Action"
142                trigger="useSameAddress"
143                triggerEvent="onChange">
144                <!--
145                        Trigger a setting of the Shipping fields' input state based on the state of the checkbox.
146                -->
147                <div dojoType="dojox.wire.ml.Invocation" object="ShippingName"    method="set" parameters="attributesMap.disabled, arguments[0]"></div>
148                <div dojoType="dojox.wire.ml.Invocation" object="ShippingAddress1"    method="set" parameters="attributesMap.disabled, arguments[0]"></div>
149                <div dojoType="dojox.wire.ml.Invocation" object="ShippingAddress2"    method="set" parameters="attributesMap.disabled, arguments[0]"></div>
150                <div dojoType="dojox.wire.ml.Invocation" object="ShippingCity"    method="set" parameters="attributesMap.disabled, arguments[0]"></div>
151                <div dojoType="dojox.wire.ml.Invocation" object="ShippingState"    method="set" parameters="attributesMap.disabled, arguments[0]"></div>
152                <div dojoType="dojox.wire.ml.Invocation" object="ShippingZip"    method="set" parameters="attributesMap.disabled, arguments[0]"></div>
153        </div>   
154
155        <!--
156                Clone the values of form fields while typing based on the setting of the checkbox.
157        -->
158        <div dojoType="dojox.wire.ml.Action"
159                trigger="BillingName"
160                triggerEvent="onChange">
161                <div dojoType="dojox.wire.ml.ActionFilter" required="useSameAddress.checked" requiredValue="true" type="boolean"></div>       
162                <div dojoType="dojox.wire.ml.Transfer" source="BillingName.value" target="ShippingName.value"></div>
163        </div>   
164        <div dojoType="dojox.wire.ml.Action"
165                trigger="BillingAddress1"
166                triggerEvent="onChange">
167                <div dojoType="dojox.wire.ml.ActionFilter" required="useSameAddress.checked" requiredValue="true" type="boolean"></div>       
168                <div dojoType="dojox.wire.ml.Transfer" source="BillingAddress1.value" target="ShippingAddress1.value"></div>
169        </div>   
170        <div dojoType="dojox.wire.ml.Action"
171                trigger="BillingAddress2"
172                triggerEvent="onChange">
173                <div dojoType="dojox.wire.ml.ActionFilter" required="useSameAddress.checked" requiredValue="true" type="boolean"></div>       
174                <div dojoType="dojox.wire.ml.Transfer" source="BillingAddress2.value" target="ShippingAddress2.value"></div>
175        </div>
176        <div dojoType="dojox.wire.ml.Action"
177                trigger="BillingCity"
178                triggerEvent="onChange">
179                <div dojoType="dojox.wire.ml.ActionFilter" required="useSameAddress.checked" requiredValue="true" type="boolean"></div>       
180                <div dojoType="dojox.wire.ml.Transfer" source="BillingCity.value" target="ShippingCity.value"></div>
181        </div>   
182        <div dojoType="dojox.wire.ml.Action"
183                trigger="BillingState"
184                triggerEvent="onChange">
185                <div dojoType="dojox.wire.ml.ActionFilter" required="useSameAddress.checked" requiredValue="true" type="boolean"></div>       
186                <div dojoType="dojox.wire.ml.Transfer" source="BillingState.value" target="ShippingState.value"></div>
187        </div>   
188
189        <div dojoType="dojox.wire.ml.Action"
190                trigger="BillingZip"
191                triggerEvent="onChange">
192                <div dojoType="dojox.wire.ml.ActionFilter" required="useSameAddress.checked" requiredValue="true" type="boolean"></div>       
193                <div dojoType="dojox.wire.ml.Transfer" source="BillingZip.value" target="ShippingZip.value"></div>
194        </div>   
195
196
197        <!--
198                Clone the values of form fields from billing over to shipping  over if the
199                useSameAddress checkbox is set back to true.
200        -->
201        <div dojoType="dojox.wire.ml.Action"
202                trigger="useSameAddress"
203                triggerEvent="onChange">
204                <div dojoType="dojox.wire.ml.ActionFilter" required="arguments[0]" requiredValue="true" type="boolean"></div>       
205
206                <!--
207                        Note that this uses the basic 'property' form of copying the property over and setting it.  The Wire
208                        code supports both getX and setX functions of setting a property as well as direct access.  It first looks
209                        for the getX/setX functions and if present, uses them.  If missing, it will just do direct access.  Because
210                        of the standard getValue/setValue API of dijit form widgets, transfers work well and are compact.   
211                -->
212                <div dojoType="dojox.wire.ml.Transfer" source="BillingName.value" target="ShippingName.value"></div>
213                <div dojoType="dojox.wire.ml.Transfer" source="BillingAddress1.value" target="ShippingAddress1.value"></div>
214                <div dojoType="dojox.wire.ml.Transfer" source="BillingAddress2.value" target="ShippingAddress2.value"></div>
215                <div dojoType="dojox.wire.ml.Transfer" source="BillingCity.value" target="ShippingCity.value"></div>
216                <div dojoType="dojox.wire.ml.Transfer" source="BillingState.value" target="ShippingState.value"></div>
217                <div dojoType="dojox.wire.ml.Transfer" source="BillingZip.value" target="ShippingZip.value"></div>
218        </div>
219
220</body>
221</html>
Note: See TracBrowser for help on using the repository browser.