diff options
Diffstat (limited to 'includes/js/dojox/wire/demos')
15 files changed, 1317 insertions, 0 deletions
diff --git a/includes/js/dojox/wire/demos/TableContainer.css b/includes/js/dojox/wire/demos/TableContainer.css new file mode 100644 index 0000000..fded51f --- /dev/null +++ b/includes/js/dojox/wire/demos/TableContainer.css @@ -0,0 +1,25 @@ +.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; +} diff --git a/includes/js/dojox/wire/demos/TableContainer.css.commented.css b/includes/js/dojox/wire/demos/TableContainer.css.commented.css new file mode 100644 index 0000000..4ee2706 --- /dev/null +++ b/includes/js/dojox/wire/demos/TableContainer.css.commented.css @@ -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; +} + diff --git a/includes/js/dojox/wire/demos/TableContainer.js b/includes/js/dojox/wire/demos/TableContainer.js new file mode 100644 index 0000000..fd4ad73 --- /dev/null +++ b/includes/js/dojox/wire/demos/TableContainer.js @@ -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); + } +}); + +} diff --git a/includes/js/dojox/wire/demos/WidgetRepeater.js b/includes/js/dojox/wire/demos/WidgetRepeater.js new file mode 100644 index 0000000..ad1b8b0 --- /dev/null +++ b/includes/js/dojox/wire/demos/WidgetRepeater.js @@ -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); } + } +}); + +} diff --git a/includes/js/dojox/wire/demos/markup/countries.json b/includes/js/dojox/wire/demos/markup/countries.json new file mode 100644 index 0000000..ad3a07a --- /dev/null +++ b/includes/js/dojox/wire/demos/markup/countries.json @@ -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' } +]} diff --git a/includes/js/dojox/wire/demos/markup/demo_ActionChaining.html b/includes/js/dojox/wire/demos/markup/demo_ActionChaining.html new file mode 100644 index 0000000..596d6ec --- /dev/null +++ b/includes/js/dojox/wire/demos/markup/demo_ActionChaining.html @@ -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> diff --git a/includes/js/dojox/wire/demos/markup/demo_ActionWiring.html b/includes/js/dojox/wire/demos/markup/demo_ActionWiring.html new file mode 100644 index 0000000..995b67f --- /dev/null +++ b/includes/js/dojox/wire/demos/markup/demo_ActionWiring.html @@ -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> diff --git a/includes/js/dojox/wire/demos/markup/demo_BasicChildWire.html b/includes/js/dojox/wire/demos/markup/demo_BasicChildWire.html new file mode 100644 index 0000000..f5973e7 --- /dev/null +++ b/includes/js/dojox/wire/demos/markup/demo_BasicChildWire.html @@ -0,0 +1,78 @@ +<!-- + 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("dijit.form.Button"); + 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> diff --git a/includes/js/dojox/wire/demos/markup/demo_BasicColumnWiring.html b/includes/js/dojox/wire/demos/markup/demo_BasicColumnWiring.html new file mode 100644 index 0000000..48c327e --- /dev/null +++ b/includes/js/dojox/wire/demos/markup/demo_BasicColumnWiring.html @@ -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> diff --git a/includes/js/dojox/wire/demos/markup/demo_ConditionalActions.html b/includes/js/dojox/wire/demos/markup/demo_ConditionalActions.html new file mode 100644 index 0000000..ea0ca64 --- /dev/null +++ b/includes/js/dojox/wire/demos/markup/demo_ConditionalActions.html @@ -0,0 +1,221 @@ +<!-- + This file demonstrates how the dojox.wire code can be used to do declarative + wiring of events. Specifically, it shows how you can wire actions to set values + across to other widgets, but only if certain conditions are met. +--> +<html> +<head> + <title>Conditional Actions Demo</title> + <style type="text/css"> + + @import "../../../../dijit/themes/tundra/tundra.css"; + @import "../../../../dojo/resources/dojo.css"; + @import "../../../../dijit/tests/css/dijitTests.css"; + @import "../TableContainer.css"; + + .splitView { + width: 90%; + height: 90%; + border: 1px solid #bfbfbf; + border-collapse: separate; + } + + b { + float: left; + } + + .rJustified { + float: right; + } + + </style> + + <script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script> + <script type="text/javascript"> + dojo.require("dojo.parser"); + dojo.require("dojo.data.ItemFileReadStore"); + dojo.require("dojox.wire"); + dojo.require("dojox.wire.ml.Invocation"); + dojo.require("dojox.wire.ml.DataStore"); + dojo.require("dojox.wire.ml.Transfer"); + dojo.require("dojox.wire.ml.Data"); + dojo.require("dijit.form.TextBox"); + dojo.require("dijit.form.CheckBox"); + dojo.require("dijit.form.ComboBox"); + </script> +</head> + +<body class="tundra"> + + <!-- Layout --> + <font size="3"><b>Demo of Conditional Actions:</b></font><br/><br/> + This demo shows how you can use actions to read and set widget values, as well as have actions only occur if + if certain conditions are met, such as cloning values as they are typed from the billing address over to the + shipping address if the 'Use Same Address' checkbox is checked true. + <br/> + <br/> + <div dojoType="dojo.data.ItemFileReadStore" url="states.json" jsId="statesStore"></div> + <table width="100%"> + <tr> + <td colspan="2" align="center"> + Use Same Address: <div dojoType="dijit.form.CheckBox" id="useSameAddress" checked="true"></div> + </td> + </tr> + <tr> + <td> + <b>Billing Address</b> + </td> + <td> + <b>Shipping Address</b> + </td> + </tr> + + <tr> + <td> + <b>Name:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="BillingName" name="billingname" value="" size="50"></div> + </td> + <td> + <b>Name:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="ShippingName" name="shippingname" value="" disabled="true" size="50"></div> + </td> + </tr> + <tr> + <td> + <b>Address 1:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="BillingAddress1" name="billingaddress1" value="" size="50"></div> + </td> + <td> + <b>Address 1:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="ShippingAddress1" name="shippingaddress1" value="" disabled="true" size="50"></div> + </td> + </tr> + <tr> + <td> + <b>Address 2:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="BillingAddress2" name="billingaddress2" value="" size="50"></div> + </td> + <td> + <b>Address 2:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="ShippingAddress2" name="shippingaddress2" value="" disabled="true" size="50"></div> + </td> + </tr> + <tr> + <td> + <b>City:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="BillingCity" name="billingcity" value="" size="50"></div> + </td> + <td> + <b>City:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="ShippingCity" name="shippingcity" value="" disabled="true" size="50"></div> + </td> + </tr> + <tr> + <td> + <b>State:</b> <div class="rJustified" dojoType="dijit.form.ComboBox" searchAttr="name" id="BillingState" name="billingstate" value="" store="statesStore" size="46"></div> + </td> + <td> + <b>State:</b> <div class="rJustified" dojoType="dijit.form.ComboBox" searchAttr="name" id="ShippingState" name="shippingstate" value="" store="statesStore" disabled="true" size="46"></div> + </td> + </tr> + <tr> + <td> + <b>Zip code:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="BillingZip" name="billingzip" value="" size="50"></div> + </td> + <td> + <b>Zip code:</b> <div class="rJustified" dojoType="dijit.form.TextBox" id="ShippingZip" name="shippingzip" value="" disabled="true" size="50"></div> + </td> + </tr> + </table> + + + <!-------------------------------- Using dojox.wire, declaratively wire up the widgets. ---------------------------> + + <!-- + This is a simple data map so that the attributes we support modifying on ComboBox, TextField, etc, are lookupable. + since steAttribute(attr, value), replaced the single attribute setDisabled + --> + <div dojoType="dojox.wire.ml.Data" + id="attributesMap"> + <div dojoType="dojox.wire.ml.DataProperty" + name="disabled" + value="disabled"></div> + </div> + + + <!-- + Enable/disable the Right hand side of the shipping address view based on the checkbox events. + --> + <div dojoType="dojox.wire.ml.Action" + trigger="useSameAddress" + triggerEvent="setChecked"> + <!-- + Trigger a setting of the Shipping fields' input state based on the state of the checkbox. + --> + <div dojoType="dojox.wire.ml.Invocation" object="ShippingName" method="setAttribute" parameters="attributesMap.disabled, arguments[0]"></div> + <div dojoType="dojox.wire.ml.Invocation" object="ShippingAddress1" method="setAttribute" parameters="attributesMap.disabled, arguments[0]"></div> + <div dojoType="dojox.wire.ml.Invocation" object="ShippingAddress2" method="setAttribute" parameters="attributesMap.disabled, arguments[0]"></div> + <div dojoType="dojox.wire.ml.Invocation" object="ShippingCity" method="setAttribute" parameters="attributesMap.disabled, arguments[0]"></div> + <div dojoType="dojox.wire.ml.Invocation" object="ShippingState" method="setAttribute" parameters="attributesMap.disabled, arguments[0]"></div> + <div dojoType="dojox.wire.ml.Invocation" object="ShippingZip" method="setAttribute" parameters="attributesMap.disabled, arguments[0]"></div> + </div> + + <!-- + Clone the values of form fields while typing based on the setting of the checkbox. + --> + <div dojoType="dojox.wire.ml.Action" + trigger="BillingName" + triggerEvent="onkeyup"> + <div dojoType="dojox.wire.ml.ActionFilter" required="useSameAddress.checked" requiredValue="true" type="boolean"></div> + <div dojoType="dojox.wire.ml.Transfer" source="BillingName.value" target="ShippingName.value"></div> + </div> + <div dojoType="dojox.wire.ml.Action" + trigger="BillingAddress1" + triggerEvent="onkeyup"> + <div dojoType="dojox.wire.ml.ActionFilter" required="useSameAddress.checked" requiredValue="true" type="boolean"></div> + <div dojoType="dojox.wire.ml.Transfer" source="BillingAddress1.value" target="ShippingAddress1.value"></div> + </div> + <div dojoType="dojox.wire.ml.Action" + trigger="BillingAddress2" + triggerEvent="onkeyup"> + <div dojoType="dojox.wire.ml.ActionFilter" required="useSameAddress.checked" requiredValue="true" type="boolean"></div> + <div dojoType="dojox.wire.ml.Transfer" source="BillingAddress2.value" target="ShippingAddress2.value"></div> + </div> + <div dojoType="dojox.wire.ml.Action" + trigger="BillingCity" + triggerEvent="onkeyup"> + <div dojoType="dojox.wire.ml.ActionFilter" required="useSameAddress.checked" requiredValue="true" type="boolean"></div> + <div dojoType="dojox.wire.ml.Transfer" source="BillingCity.value" target="ShippingCity.value"></div> + </div> + <div dojoType="dojox.wire.ml.Action" + trigger="BillingState" + triggerEvent="onChange"> + <div dojoType="dojox.wire.ml.ActionFilter" required="useSameAddress.checked" requiredValue="true" type="boolean"></div> + <div dojoType="dojox.wire.ml.Transfer" source="BillingState.value" target="ShippingState.value"></div> + </div> + + <div dojoType="dojox.wire.ml.Action" + trigger="BillingZip" + triggerEvent="onkeyup"> + <div dojoType="dojox.wire.ml.ActionFilter" required="useSameAddress.checked" requiredValue="true" type="boolean"></div> + <div dojoType="dojox.wire.ml.Transfer" source="BillingZip.value" target="ShippingZip.value"></div> + </div> + + + <!-- + Clone the values of form fields from billing over to shipping over if the + useSameAddress checkbox is set back to true. + --> + <div dojoType="dojox.wire.ml.Action" + trigger="useSameAddress" + triggerEvent="setChecked"> + <div dojoType="dojox.wire.ml.ActionFilter" required="arguments[0]" requiredValue="true" type="boolean"></div> + + <!-- + Note that this uses the basic 'property' form of copying the property over and setting it. The Wire + code supports both getX and setX functions of setting a property as well as direct access. It first looks + for the getX/setX functions and if present, uses them. If missing, it will just do direct access. Because + of the standard getValue/setValue API of dijit form widgets, transfers work well and are compact. + --> + <div dojoType="dojox.wire.ml.Transfer" source="BillingName.value" target="ShippingName.value"></div> + <div dojoType="dojox.wire.ml.Transfer" source="BillingAddress1.value" target="ShippingAddress1.value"></div> + <div dojoType="dojox.wire.ml.Transfer" source="BillingAddress2.value" target="ShippingAddress2.value"></div> + <div dojoType="dojox.wire.ml.Transfer" source="BillingCity.value" target="ShippingCity.value"></div> + <div dojoType="dojox.wire.ml.Transfer" source="BillingState.value" target="ShippingState.value"></div> + <div dojoType="dojox.wire.ml.Transfer" source="BillingZip.value" target="ShippingZip.value"></div> + </div> + +</body> +</html> diff --git a/includes/js/dojox/wire/demos/markup/demo_FlickrStoreWire.html b/includes/js/dojox/wire/demos/markup/demo_FlickrStoreWire.html new file mode 100644 index 0000000..54068a9 --- /dev/null +++ b/includes/js/dojox/wire/demos/markup/demo_FlickrStoreWire.html @@ -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> diff --git a/includes/js/dojox/wire/demos/markup/demo_TopicWiring.html b/includes/js/dojox/wire/demos/markup/demo_TopicWiring.html new file mode 100644 index 0000000..e091e8b --- /dev/null +++ b/includes/js/dojox/wire/demos/markup/demo_TopicWiring.html @@ -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> diff --git a/includes/js/dojox/wire/demos/markup/flickrDemo.css b/includes/js/dojox/wire/demos/markup/flickrDemo.css new file mode 100644 index 0000000..793d1c6 --- /dev/null +++ b/includes/js/dojox/wire/demos/markup/flickrDemo.css @@ -0,0 +1,29 @@ +.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; +} diff --git a/includes/js/dojox/wire/demos/markup/flickrDemo.css.commented.css b/includes/js/dojox/wire/demos/markup/flickrDemo.css.commented.css new file mode 100644 index 0000000..7e75a5d --- /dev/null +++ b/includes/js/dojox/wire/demos/markup/flickrDemo.css.commented.css @@ -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; +} + diff --git a/includes/js/dojox/wire/demos/markup/states.json b/includes/js/dojox/wire/demos/markup/states.json new file mode 100644 index 0000000..bdaa609 --- /dev/null +++ b/includes/js/dojox/wire/demos/markup/states.json @@ -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"} +]}
\ No newline at end of file |