e44a7e37b6
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
221 lines
9.3 KiB
HTML
221 lines
9.3 KiB
HTML
<!--
|
|
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>
|