ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Updated

Browse Source
This commit is contained in:
Éric Lemoine
2013-02-20 10:38:25 +01:00
parent 17c3936ab6
commit 5d14b9e2d4
1919 changed files with 559755 additions and 2588 deletions
Download Patch File Download Diff File Expand all files Collapse all files
master/examples/demo_ActionWiring.html
+138
View File
@@ -0,0 +1,138 @@
<!--
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 "../../../../dojo/resources/dojo.css";
@import "../../../../dijit/themes/soria/soria.css";
@import "../../../../dijit/tests/css/dijitTests.css";
@import "../TableContainer.css";
.splitView {
width: 90%;
height: 90%;
overflow: hidden;
}
</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.BorderContainer");
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="soria">
<!-- 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.BorderContainer"
gutters="true"
design="sidebar"
class="splitView">
<div dojoType="dijit.layout.ContentPane" region="left" style="width: 50%; overflow: auto;">
<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="*" intermediateChanges="true"></div>
</td>
</tr>
</table>
</div>
<div dojoType="dijit.layout.ContentPane" region="right" style="width: 50%; overflow: auto;">
<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="onChange"
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>