Subversion Repositories Applications.papyrus

Rev

Blame | Last modification | View Log | RSS feed 

<!--
        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>