diff options
| author | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
|---|---|---|
| committer | mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> | 2008-11-13 09:49:11 +0000 |
| commit | e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch) | |
| tree | 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/wire/demos/markup/demo_BasicColumnWiring.html | |
| parent | a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff) | |
| download | semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2 | |
New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dojox/wire/demos/markup/demo_BasicColumnWiring.html')
| -rw-r--r-- | includes/js/dojox/wire/demos/markup/demo_BasicColumnWiring.html | 90 |
1 files changed, 90 insertions, 0 deletions
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> |