New file |
0,0 → 1,208 |
<!-- |
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("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. ---------------------------> |
|
<!-- |
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="setDisabled" parameters="arguments[0]"></div> |
<div dojoType="dojox.wire.ml.Invocation" object="ShippingAddress1" method="setDisabled" parameters="arguments[0]"></div> |
<div dojoType="dojox.wire.ml.Invocation" object="ShippingAddress2" method="setDisabled" parameters="arguments[0]"></div> |
<div dojoType="dojox.wire.ml.Invocation" object="ShippingCity" method="setDisabled" parameters="arguments[0]"></div> |
<div dojoType="dojox.wire.ml.Invocation" object="ShippingState" method="setDisabled" parameters="arguments[0]"></div> |
<div dojoType="dojox.wire.ml.Invocation" object="ShippingZip" method="setDisabled" parameters="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> |