1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
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>
|
