diff options
Diffstat (limited to 'includes/js/dojox/wire/demos/markup/demo_ActionWiring.html')
| -rw-r--r-- | includes/js/dojox/wire/demos/markup/demo_ActionWiring.html | 142 |
1 files changed, 142 insertions, 0 deletions
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> |