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