Subversion Repositories Applications.papyrus

Compare Revisions

Ignore whitespace Rev 2149 → Rev 2150

/trunk/api/js/dojo1.0/dojox/wire/demos/markup/demo_ConditionalActions.html
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>
/trunk/api/js/dojo1.0/dojox/wire/demos/markup/states.json
New file
0,0 → 1,56
{"identifier":"abbreviation",
"label": "label",
"items": [
{"name":"Alabama", "label":"Alabama","abbreviation":"AL"},
{"name":"Alaska", "label":"Alaska","abbreviation":"AK"},
{"name":"American Samoa", "label":"American Samoa","abbreviation":"AS"},
{"name":"Arizona", "label":"Arizona","abbreviation":"AZ"},
{"name":"Arkansas", "label":"Arkansas","abbreviation":"AR"},
{"name":"California", "label":"California","abbreviation":"CA"},
{"name":"Colorado", "label":"Colorado","abbreviation":"CO"},
{"name":"Connecticut", "label":"Connecticut","abbreviation":"CT"},
{"name":"Delaware", "label":"Delaware","abbreviation":"DE"},
{"name":"Florida", "label":"Florida","abbreviation":"FL"},
{"name":"Georgia", "label":"Georgia","abbreviation":"GA"},
{"name":"Hawaii", "label":"Hawaii","abbreviation":"HI"},
{"name":"Idaho", "label":"Idaho","abbreviation":"ID"},
{"name":"Illinois", "label":"Illinois","abbreviation":"IL"},
{"name":"Indiana", "label":"Indiana","abbreviation":"IN"},
{"name":"Iowa", "label":"Iowa","abbreviation":"IA"},
{"name":"Kansas", "label":"Kansas","abbreviation":"KS"},
{"name":"Kentucky", "label":"Kentucky","abbreviation":"KY"},
{"name":"Louisiana", "label":"Louisiana","abbreviation":"LA"},
{"name":"Maine", "label":"Maine","abbreviation":"ME"},
{"name":"Marshall Islands", "label":"Marshall Islands","abbreviation":"MH"},
{"name":"Maryland", "label":"Maryland","abbreviation":"MD"},
{"name":"Massachusetts", "label":"Massachusetts","abbreviation":"MA"},
{"name":"Michigan", "label":"Michigan","abbreviation":"MI"},
{"name":"Minnesota", "label":"Minnesota","abbreviation":"MN"},
{"name":"Mississippi", "label":"Mississippi","abbreviation":"MS"},
{"name":"Missouri", "label":"Missouri","abbreviation":"MO"},
{"name":"Montana", "label":"Montana","abbreviation":"MT"},
{"name":"Nebraska", "label":"Nebraska","abbreviation":"NE"},
{"name":"Nevada", "label":"Nevada","abbreviation":"NV"},
{"name":"New Hampshire", "label":"New Hampshire","abbreviation":"NH"},
{"name":"New Jersey", "label":"New Jersey","abbreviation":"NJ"},
{"name":"New Mexico", "label":"New Mexico","abbreviation":"NM"},
{"name":"New York", "label":"New York","abbreviation":"NY"},
{"name":"North Carolina", "label":"North Carolina","abbreviation":"NC"},
{"name":"North Dakota", "label":"North Dakota","abbreviation":"ND"},
{"name":"Ohio", "label":"Ohio","abbreviation":"OH"},
{"name":"Oklahoma", "label":"Oklahoma","abbreviation":"OK"},
{"name":"Oregon", "label":"Oregon","abbreviation":"OR"},
{"name":"Pennsylvania", "label":"Pennsylvania","abbreviation":"PA"},
{"name":"Rhode Island", "label":"Rhode Island","abbreviation":"RI"},
{"name":"South Carolina", "label":"South Carolina","abbreviation":"SC"},
{"name":"South Dakota", "label":"South Dakota","abbreviation":"SD"},
{"name":"Tennessee", "label":"Tennessee","abbreviation":"TN"},
{"name":"Texas", "label":"Texas","abbreviation":"TX"},
{"name":"Utah", "label":"Utah","abbreviation":"UT"},
{"name":"Vermont", "label":"Vermont","abbreviation":"VT"},
{"name":"Virginia", "label":"Virginia","abbreviation":"VA"},
{"name":"Washington", "label":"Washington","abbreviation":"WA"},
{"name":"West Virginia", "label":"West Virginia","abbreviation":"WV"},
{"name":"Wisconsin", "label":"Wisconsin","abbreviation":"WI"},
{"name":"Wyoming", "label":"Wyoming","abbreviation":"WY"}
]}
/trunk/api/js/dojo1.0/dojox/wire/demos/markup/countries.json
New file
0,0 → 1,43
{ identifier: 'name',
items: [
{ name:'Africa', type:'continent',
children:[{_reference:'Egypt'}, {_reference:'Kenya'}, {_reference:'Sudan'}] },
{ name:'Egypt', type:'country' },
{ name:'Kenya', type:'country',
children:[{_reference:'Nairobi'}, {_reference:'Mombasa'}] },
{ name:'Nairobi', type:'city' },
{ name:'Mombasa', type:'city' },
{ name:'Sudan', type:'country',
children:{_reference:'Khartoum'} },
{ name:'Khartoum', type:'city' },
{ name:'Asia', type:'continent',
children:[{_reference:'China'}, {_reference:'India'}, {_reference:'Russia'}, {_reference:'Mongolia'}] },
{ name:'China', type:'country' },
{ name:'India', type:'country' },
{ name:'Russia', type:'country' },
{ name:'Mongolia', type:'country' },
{ name:'Australia', type:'continent', population:'21 million',
children:{_reference:'Commonwealth of Australia'}},
{ name:'Commonwealth of Australia', type:'country', population:'21 million'},
{ name:'Europe', type:'continent',
children:[{_reference:'Germany'}, {_reference:'France'}, {_reference:'Spain'}, {_reference:'Italy'}] },
{ name:'Germany', type:'country' },
{ name:'France', type:'country' },
{ name:'Spain', type:'country' },
{ name:'Italy', type:'country' },
{ name:'North America', type:'continent',
children:[{_reference:'Mexico'}, {_reference:'Canada'}, {_reference:'United States of America'}] },
{ name:'Mexico', type:'country', population:'108 million', area:'1,972,550 sq km',
children:[{_reference:'Mexico City'}, {_reference:'Guadalajara'}] },
{ name:'Mexico City', type:'city', population:'19 million', timezone:'-6 UTC'},
{ name:'Guadalajara', type:'city', population:'4 million', timezone:'-6 UTC' },
{ name:'Canada', type:'country', population:'33 million', area:'9,984,670 sq km',
children:[{_reference:'Ottawa'}, {_reference:'Toronto'}] },
{ name:'Ottawa', type:'city', population:'0.9 million', timezone:'-5 UTC'},
{ name:'Toronto', type:'city', population:'2.5 million', timezone:'-5 UTC' },
{ name:'United States of America', type:'country' },
{ name:'South America', type:'continent',
children:[{_reference:'Brazil'}, {_reference:'Argentina'}] },
{ name:'Brazil', type:'country', population:'186 million' },
{ name:'Argentina', type:'country', population:'40 million' }
]}
/trunk/api/js/dojo1.0/dojox/wire/demos/markup/demo_BasicChildWire.html
New file
0,0 → 1,77
<!--
This file demonstrates how the dojox.wire code can be used to do declarative
wiring of properties/attributes of some object to the properties/attributes of
another object. It specifically uses the Child (Composite) wire type to perform
the mapping.
 
Note that this demo expects dojo, digit, and dojox to all be peers in the same directory
in order for it to execute.
-->
<html>
<head>
<title>Sample Composite (Child) Wire usage.</title>
<style type="text/css">
@import "../../../../dijit/themes/tundra/tundra.css";
@import "../../../../dojo/resources/dojo.css";
@import "../../../../dijit/tests/css/dijitTests.css";
</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.ml.Invocation");
dojo.require("dojox.wire.ml.DataStore");
dojo.require("dojox.wire.ml.Transfer");
dojo.require("dojox.wire");
dojo.require("dojox.wire.demos.WidgetRepeater");
 
dataHolder = {
request: {onItem: function(item){}},
result: null
};
</script>
</head>
<body class="tundra">
<!--
On load of the page, invoke the fetch method of the object 'DataStore1',
get its parameters from the JS object 'sample.request
-->
<div dojoType="dojox.wire.ml.Invocation"
triggerEvent="onLoad"
object="DataStore1" method="fetch" parameters="dataHolder.request">
</div>
 
<!--
The store that is queried in this demo
-->
<div dojoType="dojo.data.ItemFileReadStore"
jsId="DataStore1"
url="countries.json">
</div>
 
<!--
Simple container widget for creating a 'list' of some set of widgets
As defined by the widget type it contains.
-->
<div dojoType="dojox.wire.demos.WidgetRepeater"
widget="dijit.form.Button" jsId="r1">
</div>
 
<!--
On the call of the onItem function of 'sample', trigger a binding/mapping of the
item's attribute 'name' to the target object property: dataHolder.result.caption
Then invoke the WidgetRepeater (r1)'s createNew method, using the parameters from
dataHolder.result.
-->
<div dojoType="dojox.wire.ml.Action"
trigger="dataHolder.request" triggerEvent="onItem">
<div dojoType="dojox.wire.ml.Transfer"
source="arguments[0]" sourceStore="DataStore1"
target="dataHolder.result">
<div dojoType="dojox.wire.ml.ChildWire" name="label" attribute="name"></div>
</div>
<div dojoType="dojox.wire.ml.Invocation" object="r1" method="createNew" parameters='dataHolder.result'></div>
</div>
</body>
</html>
/trunk/api/js/dojo1.0/dojox/wire/demos/markup/demo_ActionWiring.html
New file
0,0 → 1,142
<!--
This file demonstrates how the dojox.wire code can be used to do declarative
wiring of events on one item to trigger event on other widgets. It also shows
how you can use the Transfer object to morph data values from one format to
another. In this specific case, it maps the values from a dojo.data Datastore
item into values stored in a JavaScript Array, which is the format required for
the addRow method of the demonstration TableContainer.
 
Note that this demo expects dojo, digit, and dojox to all be peers in the same directory
in order for it to execute.
-->
<html>
<head>
<title>Sample declarative data binding</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;
}
</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.ml.Invocation");
dojo.require("dojox.wire.ml.DataStore");
dojo.require("dojox.wire.ml.Transfer");
 
dojo.require("dijit.layout.SplitContainer");
dojo.require("dijit.layout.LayoutContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
 
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.wire");
dojo.require("dojox.wire.demos.TableContainer");
 
//Toplevel JS Object to contain a few basics for us, such as the request to pass to the store and a stub onItem function
// to trap on for triggering other events.
dataHolder = {
//Simple object definition to get all items and sort it by the attribute 'type'.
request: {query: {name: "*"}, onItem: function(item, req){}, sort: [{attribute: "type"}]},
//Spot to store off data values as they're generated by the declarative binding.
result: null
};
 
</script>
</head>
 
<body class="tundra">
 
<!-- The following is the basic layout. A split container with a button and a text field. Data will be displayed on the right. -->
<div dojoType="dijit.layout.SplitContainer"
orientation="horizontal"
sizerWidth="7"
activeSizing="true"
class="splitView">
<div dojoType="dijit.layout.ContentPane" sizeMin="50" sizeShare="50">
<font size="3"><b>Demo Searcher (Searches on Attribute 'name'):</b></font><br/><br/>
<b>Usage:</b><br/>
Enter the name you want to search the store for. Wildcards * (multiple character), and ? (single character), are allowed.
<br/>
<br/>
<table style="width: 90%;">
<tr>
<td align="left">
<div dojoType="dijit.form.Button" jsId="searchButton">Search Datastore</div>
</td>
<td align="right">
<div dojoType="dijit.form.TextBox" jsId="inputField" value="*"></div>
</td>
</tr>
</table>
</div>
<div dojoType="dijit.layout.ContentPane" sizeMin="50" sizeShare="50">
<div class="dataTable" dojoType="dojox.wire.demos.TableContainer" jsId="dataTable" headers="Name,Location Type"></div>
</div>
</div>
 
 
<!-------------------------------- Using dojox.wire, declaratively wire up the widgets. --------------------------->
 
<!-- The store that is queried in this demo -->
<div dojoType="dojo.data.ItemFileReadStore"
jsId="DataStore1"
url="countries.json">
</div>
 
<!--
When the search button is clicked, clear existing rows from table,
Then invoke the fetch to repopulate the table.
-->
<div dojoType="dojox.wire.ml.Action"
trigger="searchButton"
triggerEvent="onClick">
<div dojoType="dojox.wire.ml.Invocation" object="dataTable" method="clearTable"></div>
<div dojoType="dojox.wire.ml.Invocation" object="DataStore1" method="fetch" parameters="dataHolder.request"></div>
</div>
 
<!--
Link existing of the text box to transfering the search string to the query param.
We are wiring the value of TextBox value of the widget to the name property of our request
object. The copy of values to the search should occur on each keyup event (each keypress)
-->
<div dojoType="dojox.wire.ml.Transfer"
trigger="inputField" triggerEvent="onkeyup"
source="inputField.textbox.value"
target="dataHolder.request.query.name">
</div>
 
<!--
On the call of the onItem function of 'dataHolder', trigger a binding/mapping of the
item's attribute 'name' and 'type' attributes to specific columns in an array. Note here that since
sourceStore is set, it treats the arguments as items from that store and accesses the attributes
appropriately. In this case 'name' becomes array entry 0, type, array entry 1, and so on.
 
Then take the result of the data mapping and pass it into the invoke of the addRow function on the
TableContainer widget.
-->
<div dojoType="dojox.wire.ml.Action"
trigger="dataHolder.request" triggerEvent="onItem">
<div dojoType="dojox.wire.ml.Transfer"
source="arguments[0]" sourceStore="DataStore1"
target="dataHolder.result">
<div dojoType="dojox.wire.ml.ColumnWire" attribute="name"></div>
<div dojoType="dojox.wire.ml.ColumnWire" attribute="type"></div>
</div>
<div dojoType="dojox.wire.ml.Invocation"
object="dataTable" method="addRow" parameters='dataHolder.result'>
</div>
</div>
</body>
</html>
/trunk/api/js/dojo1.0/dojox/wire/demos/markup/demo_ActionChaining.html
New file
0,0 → 1,108
<!--
This file demonstrates how the dojox.wire code can be used to do declarative
wiring of events. Specifically, it shows how you can chain actions together
in a sequence. In this case the setting of a value on one textbox triggers a
copy over to another textbox. That in turn triggers yet another copy to another
text box.
-->
<html>
<head>
<title>Sample Action Chaining</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;
}
</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");
</script>
</head>
 
<body class="tundra">
 
<!-- Layout -->
<font size="3"><b>Demo of Chaining Actions:</b></font><br/><br/>
This demo shows how you can chain actions together to fire in a sequence.
Such as the completion of setting one value on a widget triggers the setting of another value on the widget
<br/>
<br/>
<table>
<tr>
<td>
<div dojoType="dijit.form.TextBox" id="inputField" value="" size="50"></div>
</td>
</tr>
<tr>
<td>
<div dojoType="dijit.form.TextBox" id="targetField1" value="" disabled="true" size="50"></div>
</td>
</tr>
<tr>
<td>
<div dojoType="dijit.form.TextBox" id="targetField2" value="" disabled="true" size="50"></div>
</td>
</tr>
</table>
 
 
<!-------------------------------- Using dojox.wire, declaratively wire up the widgets. --------------------------->
 
<!--
This is an example of using the declarative data value definition.
These are effectively declarative variables to act as placeholders
for data values.
-->
<div dojoType="dojox.wire.ml.Data"
id="data">
<div dojoType="dojox.wire.ml.DataProperty"
name="tempData"
value="">
</div>
</div>
 
<!--
Whenever a key is entered into the textbox, copy the value somewhere, then invoke a method on another widget, in this case
on just another text box.
-->
<div dojoType="dojox.wire.ml.Action"
id="action1"
trigger="inputField"
triggerEvent="onkeyup">
<div dojoType="dojox.wire.ml.Invocation" object="inputField" method="getValue" result="data.tempData"></div>
<div dojoType="dojox.wire.ml.Invocation" id="targetCopy" object="targetField1" method="setValue" parameters="data.tempData"></div>
</div>
 
<!--
Whenever the primary cloning invocation completes, invoke a secondary cloning action.
-->
<div dojoType="dojox.wire.ml.Action"
id="action2"
trigger="targetCopy"
triggerEvent="onComplete">
<!--
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, these transfers work really well and are very compact.
-->
<div dojoType="dojox.wire.ml.Transfer" source="targetField1.value" target="targetField2.value"></div>
</div>
</body>
</html>
/trunk/api/js/dojo1.0/dojox/wire/demos/markup/demo_FlickrStoreWire.html
New file
0,0 → 1,281
<!--
This file is a demo of the FlickrStore, a simple wrapper to the public feed service
of Flickr. This just does very basic queries against Flickr and loads the results
into a list viewing widget.
-->
<html>
<head>
<title>Demo of FlickrStore</title>
<style type="text/css">
 
@import "../../../../dijit/themes/tundra/tundra.css";
@import "../../../../dojo/resources/dojo.css";
@import "../../../../dijit/tests/css/dijitTests.css";
@import "./flickrDemo.css";
</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("dijit.form.TextBox");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.ComboBox");
dojo.require("dijit.form.NumberSpinner");
dojo.require("dojox.data.FlickrStore");
dojo.require("dojox.wire.ml.Invocation");
dojo.require("dojox.wire.ml.Transfer");
dojo.require("dojox.wire.ml.Data");
dojo.require("dojox.wire");
dojo.require("dojox.data.demos.widgets.FlickrViewList");
dojo.require("dojox.data.demos.widgets.FlickrView");
 
//Toplevel JS Object to contain a few basics for us, such as the request to pass to the store and a stub onItem and onComplete function
// to trap on for triggering other events.
var dataHolder = {
//Simple stub datastore request
request: {query: {}, onItem: function(item, req){}, onComplete: function(items, req){}},
//Spot to store off data values as they're generated by the declarative binding.
result: null
};
 
//Function to convert the input from a widget into a comma separated list.
//that is the format of the store parameter.
var tagsInputConverter = function(tags){
if(tags && tags !== ""){
var tagsArray = tags.split(" ");
tags = "";
for(var i = 0; i < tagsArray.length; i++){
tags = tags + tagsArray[i];
if(i < (tagsArray.length - 1)){
tags += ","
}
}
}
return tags
}
 
</script>
</head>
 
<body class="tundra">
<h1>
DEMO: FlickrStore Search
</h1>
<hr>
<h3>
Description:
</h3>
<p>
This simple demo shows how services, such as Flickr, can be wrapped by the datastore API. In this demo, you can search public
Flickr images through a simple FlickrStore by specifying a series of tags (separated by spaces) to search on. The results
will be displayed below the search box. This demo is the same as the example demo provided in dojox/data/demos/demo_FlickrStore.html,
except that all the interactions are implemented via Wire instead of a script that runs at dojo.addOnLoad().
</p>
<p>
For fun, search on the 3dny tag!
</p>
 
<blockquote>
 
<!--
Layout.
-->
<table>
<tbody>
<tr>
<td>
<b>Status:</b>
</td>
<td>
<div dojoType="dijit.form.TextBox" size="50" id="status" jsId="statusWidget" disabled="true"></div>
</td>
</tr>
<tr>
<td>
<b>ID:</b>
</td>
<td>
<div dojoType="dijit.form.TextBox" size="50" id="userid" jsId="idWidget"></div>
</td>
</tr>
<tr>
<td>
<b>Tags:</b>
</td>
<td>
<div dojoType="dijit.form.TextBox" size="50" id="tags" jsId="tagsWidget" value="3dny"></div>
</td>
</tr>
<tr>
<td>
<b>Tagmode:</b>
</td>
<td>
<select id="tagmode"
jsId="tagmodeWidget"
dojoType="dijit.form.ComboBox"
autocomplete="false"
value="any"
>
<option>any</option>
<option>all</option>
</select>
</td>
</tr>
<tr>
<td>
<b>Number of Pictures:</b>
</td>
<td>
<div
id="count"
jsId="countWidget"
dojoType="dijit.form.NumberSpinner"
value="20"
constraints="{min:1,max:20,places:0}"
></div>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div dojoType="dijit.form.Button" label="Search" id="searchButton" jsId="searchButtonWidget"></div>
</td>
</tr>
</tbody>
</table>
</blockquote>
<!--
The store instance used by this demo.
-->
<div dojoType="dojox.data.FlickrStore" jsId="flickrStore" label="title"></div>
<div dojoType="dojox.data.demos.widgets.FlickrViewList" id="flickrViews" jsId="flickrViewsWidget"></div>
 
<!-------------------------------- Using dojox.wire, declaratively wire up the widgets. --------------------------->
 
 
<!--
This is an example of using the declarative data value definition.
These are effectively declarative variables to act as placeholders
for data values.
-->
<div dojoType="dojox.wire.ml.Data"
id="messageData"
jsId="messageData">
<div dojoType="dojox.wire.ml.DataProperty"
name="processingStart"
value="PROCESSING REQUEST">
</div>
<div dojoType="dojox.wire.ml.DataProperty"
name="processingDone"
value="PROCESSING COMPLETE">
</div>
</div>
 
 
<!--
When the search button is clicked, do the following in order:
1.) Map the widget values over to the request properties.
2.) Clear existing rows from table,
3.) Set the status to processing
4.) Invoke the fetch to repopulate the table.
-->
<div dojoType="dojox.wire.ml.Action"
trigger="searchButtonWidget"
triggerEvent="onClick">
<!--
Read in the values from the widgets and bind them to the appropriate data locations
For basic properties, you could use transfer directly, but since the text boxes are
designed to be accessed through getValue/setValue, it's better to do these as
Invocations on widget methods.
-->
<div dojoType="dojox.wire.ml.Invocation"
object="idWidget"
method="getValue"
result="dataHolder.request.query.id">
</div>
 
<!--
For the tags, we need to get the value and then perform a conversion on the result
This is done by doing an invoke, then a transfer through a converter.
-->
<div dojoType="dojox.wire.ml.Invocation"
object="tagsWidget"
method="getValue"
result="dataHolder.request.query.tags">
</div>
<div dojoType="dojox.wire.ml.Transfer"
source="dataHolder.request.query.tags"
target="dataHolder.request.query.tags"
converter="tagsInputConverter">
</div>
 
<div dojoType="dojox.wire.ml.Invocation"
object="tagmodeWidget"
method="getValue"
result="dataHolder.request.query.tagmode">
</div>
 
<div dojoType="dojox.wire.ml.Invocation"
object="countWidget"
method="getValue"
result="dataHolder.request.count">
</div>
 
 
<!-- Now invoke the actions in order. -->
<div dojoType="dojox.wire.ml.Invocation" object="flickrViewsWidget" method="clearList"></div>
<div dojoType="dojox.wire.ml.Invocation" object="statusWidget" method="setValue" parameters="messageData.processingStart"></div>
<div dojoType="dojox.wire.ml.Invocation" object="flickrStore" method="fetch" parameters="dataHolder.request"></div>
</div>
 
<!--
When the fetch processing finishes (onComplete is called), then set status to complete.
-->
<div dojoType="dojox.wire.ml.Action"
trigger="dataHolder.request"
triggerEvent="onComplete">
<div dojoType="dojox.wire.ml.Invocation" object="statusWidget" method="setValue" parameters="messageData.processingDone"></div>
</div>
 
 
<!--
On the call of the onItem function of 'dataHolder', trigger a binding/mapping of the
item's attributes to the requires parameters that are passed into addView. In this case
FlikrItemAttribute -> viewItemParam
title title
imageUrlSmall iconUrl
imageUrl imageUrl
author author
 
Then take the result of the data mapping and pass it into the invoke of the addView function on the
FlickerViews widget.
-->
<div dojoType="dojox.wire.ml.Action"
trigger="dataHolder.request" triggerEvent="onItem">
<div dojoType="dojox.wire.ml.Transfer"
source="arguments[0]" sourceStore="flickrStore"
target="dataHolder.result">
<!--
Map the attributes of the items to the property name defined
in the wire on the object in the target
-->
<div dojoType="dojox.wire.ml.ChildWire"
name="title" attribute="title"></div>
<div dojoType="dojox.wire.ml.ChildWire"
name="imageUrl" attribute="imageUrl"></div>
<div dojoType="dojox.wire.ml.ChildWire"
name="iconUrl" attribute="imageUrlSmall"></div>
<div dojoType="dojox.wire.ml.ChildWire"
name="author" attribute="author"></div>
</div>
<div dojoType="dojox.wire.ml.Invocation"
object="flickrViewsWidget" method="addView" parameters='dataHolder.result'>
</div>
</div>
</body>
</html>
/trunk/api/js/dojo1.0/dojox/wire/demos/markup/demo_TopicWiring.html
New file
0,0 → 1,78
<!--
This file demonstrates how the dojox.wire code can be used to do declarative
wiring of events. Specifically, it shows how you can publish and subscribe
to topics. In this case the setting of a value on one textbox triggers a
publish of that value to a topic. Another invoke is wired to fire when
values are published to that topic which is then displayed in another
textbox.
-->
<html>
<head>
<title>Sample Topic Wiring</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;
}
</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");
</script>
</head>
 
<body class="tundra">
 
<!-- Layout -->
<font size="3"><b>Demo of Topic Wiring</b></font><br/><br/>
This demo shows how you can wire events to publish to a topic as well as recieve topic events
<br/>
<br/>
<table>
<tr>
<td>
<div dojoType="dijit.form.TextBox" jsId="inputField" value="" size="50"></div>
</td>
</tr>
<tr>
<td>
<div dojoType="dijit.form.TextBox" jsId="targetField1" value="" disabled="true" size="50"></div>
</td>
</tr>
</table>
 
 
<!-------------------------------- Using dojox.wire, declaratively wire up the widgets. --------------------------->
<!--
Whenever a key is entered into the textbox, publish the value of it to a topic.
-->
<div dojoType="dojox.wire.ml.Action"
id="action1"
trigger="inputField"
triggerEvent="onkeyup">
<div dojoType="dojox.wire.ml.Invocation" topic="sampleTopic" parameters="inputField.value"></div>
</div>
 
<!--
Whenever a value is published to a topic, set it as the value of the textbox by calling the setValue function.
-->
<div dojoType="dojox.wire.ml.Invocation" triggerTopic="sampleTopic" object="targetField1" method="setValue" parameters="arguments[0]"></div>
</body>
</html>
/trunk/api/js/dojo1.0/dojox/wire/demos/markup/demo_BasicColumnWiring.html
New file
0,0 → 1,90
<!--
This file demonstrates how the dojox.wire code can be used to do declarative
wiring of events on one item to trigger event on other items. It also shows
how you can use the Transfer object to morph data values from one format to
another. In this specific case, it maps the values from a dojo.data Datastore
item into values stored in a JavaScript Array, which is the format required for
the addRow method of the demonstration TableContainer.
 
Note that this demo expects dojo, digit, and dojox to all be peers in the same directory
in order for it to execute.
-->
<html>
<head>
<title>Sample Declarative Data Binding using ColumnWire</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";
</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.ml.Invocation");
dojo.require("dojox.wire.ml.DataStore");
dojo.require("dojox.wire.ml.Transfer");
 
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.wire");
dojo.require("dojox.wire.demos.TableContainer");
 
//Toplevel JS Object to contain a few basics for us, such as the request to pass to the store and a stub onItem function
// to trap on for triggering other events.
dataHolder = {
//Simple object definition to get all items and sort it by the attribute 'type'.
request: {onItem: function(item){}, sort: [{attribute: "type"}]},
//Spot to store off data values as they're generated by the declarative binding.
result: null
};
</script>
</head>
 
<body class="tundra">
<!--
The store that is queried in this demo
-->
<div dojoType="dojo.data.ItemFileReadStore"
jsId="DataStore1"
url="countries.json">
</div>
 
<!--
On load of the page, invoke the fetch method of the object 'DataStore1',
get its parameters from the JS object 'sample.request
-->
<div dojoType="dojox.wire.ml.Invocation"
triggerEvent="onLoad"
object="DataStore1" method="fetch" parameters="dataHolder.request"></div>
 
<!--
Simple container widget for creating a 'table from rows defined by an array
-->
<div dojoType="dojox.wire.demos.TableContainer" jsId="r1" headers="Name,Location Type"></div>
 
<!--
On the call of the onItem function of 'dataHolder', trigger a binding/mapping of the
item's attribute 'name' and 'type' attributes to specific columns in an array. Note here that since
sourceStore is set, it treats the arguments as items from that store and accesses the attributes
appropriately. In this case 'name' becomes array entry 0, type, array entry 1, and so on.
 
Then take the result of the data mapping and pass it into the invoke of the addRow function on the
TableContainer widget.
-->
<div dojoType="dojox.wire.ml.Action"
trigger="dataHolder.request" triggerEvent="onItem">
<div dojoType="dojox.wire.ml.Transfer"
source="arguments[0]" sourceStore="DataStore1"
target="dataHolder.result">
<div dojoType="dojox.wire.ml.ColumnWire" attribute="name"></div>
<div dojoType="dojox.wire.ml.ColumnWire" attribute="type"></div>
</div>
<div dojoType="dojox.wire.ml.Invocation"
object="r1" method="addRow" parameters='dataHolder.result'>
</div>
</div>
</body>
</html>
/trunk/api/js/dojo1.0/dojox/wire/demos/markup/flickrDemo.css
New file
0,0 → 1,35
.flickrView {
padding: 3 3 3 3;
border-width: 1px;
border-style: solid;
border-color: #000000;
border-collapse: separate;
width: 100%;
}
 
.flickrView th {
text-align: left;
}
 
.flickrView tr {
padding: 3 3 3 3;
border-width: 1px;
border-style: solid;
border-color: #000000;
}
 
.flickrView tr td {
padding: 3 3 3 3;
border-width: 1px;
border-style: solid;
border-color: #000000;
}
 
.flickrView {
background-color: #EFEFEF;
}
 
.flickrTitle {
background-color: #CCCCCC;
}
 
/trunk/api/js/dojo1.0/dojox/wire/demos/TableContainer.css
New file
0,0 → 1,30
.tablecontainer {
padding: 3 3 3 3;
border-width: 1px;
border-style: solid;
border-color: #000000;
border-collapse: separate;
}
 
.tablecontainer th {
text-align: left;
}
 
.tablecontainer tr {
padding: 3 3 3 3;
border-width: 1px;
border-style: solid;
border-color: #000000;
}
 
.tablecontainer tr td {
padding: 3 3 3 3;
border-width: 1px;
border-style: solid;
border-color: #000000;
}
 
.alternate {
background-color: #EEEEEE;
}
 
/trunk/api/js/dojo1.0/dojox/wire/demos/TableContainer.js
New file
0,0 → 1,68
if(!dojo._hasResource["dojox.wire.demos.TableContainer"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.wire.demos.TableContainer"] = true;
dojo.provide("dojox.wire.demos.TableContainer");
 
dojo.require("dojo.parser");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
 
dojo.declare("dojox.wire.demos.TableContainer", [ dijit._Widget, dijit._Templated, dijit._Container ], {
// summary:
// Extremely simple 'widget' that is a table generator with an addRow function that takes an array
// as the row to add, where each entry is a cell in the row. This demo widget is for use with the
// wire demos.
 
templateString: "<table class='tablecontainer'><tbody dojoAttachPoint='tableContainer'></tbody></table>",
rowCount: 0,
headers: "",
addRow: function(array){
// summary:
// Function to add in a new row from the elements in the array map to cells in the row.
// array:
// Array of row values to add.
try{
var row = document.createElement("tr");
if((this.rowCount%2) === 0){
dojo.addClass(row, "alternate");
}
this.rowCount++;
for(var i in array){
var cell = document.createElement("td");
var text = document.createTextNode(array[i]);
cell.appendChild(text);
row.appendChild(cell);
}
this.tableContainer.appendChild(row);
}catch(e){ console.debug(e); }
},
 
clearTable: function(){
// summary:
// Function to clear all the current rows in the table, except for the header.
 
//Always leave the first row, which is the table header.
while(this.tableContainer.firstChild.nextSibling){
this.tableContainer.removeChild(this.tableContainer.firstChild.nextSibling);
}
this.rowCount = 0;
},
 
postCreate: function(){
// summary:
// Widget lifecycle function to handle generation of the header elements in the table.
var headers = this.headers.split(",");
var tr = document.createElement("tr");
for(i in headers){
var header = headers[i];
var th = document.createElement("th");
var text = document.createTextNode(header);
th.appendChild(text);
tr.appendChild(th);
}
this.tableContainer.appendChild(tr);
}
});
 
}
/trunk/api/js/dojo1.0/dojox/wire/demos/WidgetRepeater.js
New file
0,0 → 1,33
if(!dojo._hasResource["dojox.wire.demos.WidgetRepeater"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojox.wire.demos.WidgetRepeater"] = true;
dojo.provide("dojox.wire.demos.WidgetRepeater")
dojo.require("dojo.parser");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dijit._Container");
 
dojo.declare("dojox.wire.demos.WidgetRepeater", [ dijit._Widget, dijit._Templated, dijit._Container ], {
// summary:
// Simple widget that does generation of widgets repetatively, based on calls to
// the createNew function and contains them as child widgets.
templateString: "<div class='WidgetRepeater' dojoAttachPoint='repeaterNode'></div>",
widget: null,
repeater: null,
createNew: function(obj){
// summary:
// Function to handle the creation of a new widget and appending it into the widget tree.
// obj:
// The parameters to pass to the widget.
try{
if(dojo.isString(this.widget)){
dojo.require(this.widget);
this.widget = dojo.getObject(this.widget);
}
this.addChild(new this.widget(obj));
this.repeaterNode.appendChild(document.createElement("br"));
}catch(e){ console.debug(e); }
}
});
 
}