diff options
Diffstat (limited to 'includes/js/dojox/wire/demos/markup/demo_ConditionalActions.html')
| -rw-r--r-- | includes/js/dojox/wire/demos/markup/demo_ConditionalActions.html | 221 |
1 files changed, 221 insertions, 0 deletions
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> |