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, 0 insertions, 142 deletions
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> |