diff options
| author |  mensonge | 2008-11-14 15:39:19 +0000 |
|---|---|---|
| committer | mensonge | 2008-11-14 15:39:19 +0000 |
| commit | 1c5685d68f1b73270fb814fe04cbb490eb90ba5f (patch) | |
| tree | 3d3ada08a934b96fc31531f1327690d7edc6f766 /includes/js/dojox/wire/demos/markup | |
| parent | 104d59099e048688c4dbac37d72137006e396558 (diff) | |
| download | scuttle-1c5685d68f1b73270fb814fe04cbb490eb90ba5f.tar.gz scuttle-1c5685d68f1b73270fb814fe04cbb490eb90ba5f.zip | |
Minor fix: Remove DOJO library (60Mo) replaced by link to Google CDN (online DOJO library)
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@159 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dojox/wire/demos/markup')
11 files changed, 0 insertions, 1161 deletions
diff --git a/includes/js/dojox/wire/demos/markup/countries.json b/includes/js/dojox/wire/demos/markup/countries.json deleted file mode 100644 index ad3a07a..0000000 --- a/includes/js/dojox/wire/demos/markup/countries.json +++ /dev/null @@ -1,43 +0,0 @@ -{ 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 deleted file mode 100644 index 596d6ec..0000000 --- a/includes/js/dojox/wire/demos/markup/demo_ActionChaining.html +++ /dev/null @@ -1,108 +0,0 @@ -<!-- - 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 deleted file mode 100644 index 995b67f..0000000 --- a/includes/js/dojox/wire/demos/markup/demo_ActionWiring.html +++ /dev/null @@ -1,142 +0,0 @@ -<!-- - 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 deleted file mode 100644 index f5973e7..0000000 --- a/includes/js/dojox/wire/demos/markup/demo_BasicChildWire.html +++ /dev/null @@ -1,78 +0,0 @@ -<!-- - 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 deleted file mode 100644 index 48c327e..0000000 --- a/includes/js/dojox/wire/demos/markup/demo_BasicColumnWiring.html +++ /dev/null @@ -1,90 +0,0 @@ -<!-- - 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 deleted file mode 100644 index ea0ca64..0000000 --- a/includes/js/dojox/wire/demos/markup/demo_ConditionalActions.html +++ /dev/null @@ -1,221 +0,0 @@ -<!-- - 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 deleted file mode 100644 index 54068a9..0000000 --- a/includes/js/dojox/wire/demos/markup/demo_FlickrStoreWire.html +++ /dev/null @@ -1,281 +0,0 @@ -<!-- - 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 deleted file mode 100644 index e091e8b..0000000 --- a/includes/js/dojox/wire/demos/markup/demo_TopicWiring.html +++ /dev/null @@ -1,78 +0,0 @@ -<!-- - 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 deleted file mode 100644 index 793d1c6..0000000 --- a/includes/js/dojox/wire/demos/markup/flickrDemo.css +++ /dev/null @@ -1,29 +0,0 @@ -.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 deleted file mode 100644 index 7e75a5d..0000000 --- a/includes/js/dojox/wire/demos/markup/flickrDemo.css.commented.css +++ /dev/null @@ -1,35 +0,0 @@ -.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 deleted file mode 100644 index bdaa609..0000000 --- a/includes/js/dojox/wire/demos/markup/states.json +++ /dev/null @@ -1,56 +0,0 @@ -{"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 |