--- /dev/null
+<!--
+ 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>
projects / eow / blobdiff