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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
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>
|
