/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); } |
} |
}); |
} |