source: Dev/trunk/src/client/dojox/wire/demos/markup/demo_ActionWiring.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 5.3 KB
Line 
1<!--
2  This file demonstrates how the dojox.wire code can be used to do declarative
3  wiring of events on one item to trigger event on other widgets.  It also shows
4  how you can use the Transfer object to morph data values from one format to
5  another.  In this specific case, it maps the values from a dojo.data Datastore
6  item into values stored in a JavaScript Array, which is the format required for
7  the addRow method of the demonstration TableContainer.
8
9  Note that this demo expects dojo, digit, and dojox to all be peers in the same directory
10  in order for it to execute.
11-->
12<html>
13<head>
14        <title>Sample declarative data binding</title>
15        <style type="text/css">
16
17                @import "../../../../dojo/resources/dojo.css";
18                @import "../../../../dijit/themes/soria/soria.css";
19                @import "../../../../dijit/tests/css/dijitTests.css";
20                @import "../TableContainer.css";
21
22                .splitView {
23                        width: 90%;
24                        height: 90%;
25                        overflow: hidden;
26                }
27        </style>
28
29        <script type="text/javascript" src="../../../../dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
30        <script type="text/javascript">
31                dojo.require("dojo.parser");
32                dojo.require("dojox.wire.ml.Invocation");
33                dojo.require("dojox.wire.ml.DataStore");
34                dojo.require("dojox.wire.ml.Transfer");
35
36                dojo.require("dijit.layout.BorderContainer");
37                dojo.require("dijit.layout.ContentPane");
38                dojo.require("dijit.form.Button");
39                dojo.require("dijit.form.TextBox");
40
41                dojo.require("dojo.data.ItemFileReadStore");
42                dojo.require("dojox.wire");
43                dojo.require("dojox.wire.demos.TableContainer");
44
45                //Toplevel JS Object to contain a few basics for us, such as the request to pass to the store and a stub onItem function
46                // to trap on for triggering other events.
47                dataHolder = {
48                        //Simple object definition to get all items and sort it by the attribute 'type'.
49                        request: {query: {name: "*"}, onItem: function(item, req){}, sort: [{attribute: "type"}]},
50                        //Spot to store off data values as they're generated by the declarative binding.
51                        result: null
52                };
53
54        </script>
55</head>
56
57<body class="soria">
58
59        <!-- The following is the basic layout.  A split container with a button and a text field.  Data will be displayed on the right. -->
60        <div dojoType="dijit.layout.BorderContainer"
61                gutters="true"
62                design="sidebar"
63                class="splitView">
64                <div dojoType="dijit.layout.ContentPane" region="left" style="width: 50%; overflow: auto;">
65                        <font size="3"><b>Demo Searcher (Searches on Attribute 'name'):</b></font><br/><br/>
66                        <b>Usage:</b><br/>
67                        Enter the name you want to search the store for.  Wildcards * (multiple character), and ? (single character), are allowed.
68                        <br/>
69                        <br/>
70                        <table style="width: 90%;">
71                                <tr>
72                                        <td align="left">
73                                                <div dojoType="dijit.form.Button" data-dojo-id="searchButton">Search Datastore</div>
74                                        </td>
75                                        <td align="right">
76                                                <div dojoType="dijit.form.TextBox" data-dojo-id="inputField" value="*" intermediateChanges="true"></div>
77                                        </td>
78                                </tr>
79                        </table>
80                </div>
81                <div dojoType="dijit.layout.ContentPane" region="right" style="width: 50%; overflow: auto;">
82                        <div class="dataTable" dojoType="dojox.wire.demos.TableContainer" data-dojo-id="dataTable" headers="Name,Location Type"></div>
83                </div>
84        </div>
85
86        <!-------------------------------- Using dojox.wire, declaratively wire up the widgets. --------------------------->
87
88        <!-- The store that is queried in this demo -->   
89        <div dojoType="dojo.data.ItemFileReadStore"
90                data-dojo-id="DataStore1"
91                url="countries.json">
92        </div>
93
94        <!--
95                When the search button is clicked, clear existing rows from table,
96                Then invoke the fetch to repopulate the table.
97        -->
98        <div dojoType="dojox.wire.ml.Action"
99                trigger="searchButton"
100                triggerEvent="onClick">
101                <div dojoType="dojox.wire.ml.Invocation" object="dataTable"  method="clearTable"></div>
102                <div dojoType="dojox.wire.ml.Invocation" object="DataStore1" method="fetch" parameters="dataHolder.request"></div>
103        </div>   
104
105        <!--
106                Link existing of the text box to transfering the search string to the query param.
107                We are wiring the value of TextBox value of the widget to the name property of our request
108                object.  The copy of values to the search should occur on each keyup event (each keypress)
109         -->
110        <div dojoType="dojox.wire.ml.Transfer"
111                trigger="inputField" triggerEvent="onChange"
112                source="inputField.textbox.value"
113                target="dataHolder.request.query.name">
114        </div>
115
116        <!--
117          On the call of the onItem function of 'dataHolder', trigger a binding/mapping of the
118          item's attribute 'name' and 'type' attributes to specific columns in an array.  Note here that since
119          sourceStore is set, it treats the arguments as items from that store and accesses the attributes
120          appropriately.  In this case 'name' becomes array entry 0, type, array entry 1, and so on.
121
122          Then take the result of the data mapping and pass it into the invoke of the addRow function on the
123          TableContainer widget.
124        --> 
125        <div dojoType="dojox.wire.ml.Action"
126                trigger="dataHolder.request" triggerEvent="onItem">
127                <div dojoType="dojox.wire.ml.Transfer"
128                        source="arguments[0]" sourceStore="DataStore1"
129                        target="dataHolder.result">
130                        <div dojoType="dojox.wire.ml.ColumnWire" attribute="name"></div>
131                        <div dojoType="dojox.wire.ml.ColumnWire" attribute="type"></div>
132                </div>
133                <div dojoType="dojox.wire.ml.Invocation"
134                        object="dataTable" method="addRow" parameters='dataHolder.result'>
135                </div>
136        </div>         
137</body>
138</html>
Note: See TracBrowser for help on using the repository browser.