diff options
Diffstat (limited to 'includes/js/dojox/wire/demos/markup/demo_FlickrStoreWire.html')
| -rw-r--r-- | includes/js/dojox/wire/demos/markup/demo_FlickrStoreWire.html | 281 |
1 files changed, 0 insertions, 281 deletions
diff --git a/includes/js/dojox/wire/demos/markup/demo_FlickrStoreWire.html b/includes/js/dojox/wire/demos/markup/demo_FlickrStoreWire.html deleted file mode 100644 index 54068a9..0000000 --- a/includes/js/dojox/wire/demos/markup/demo_FlickrStoreWire.html +++ /dev/null @@ -1,281 +0,0 @@ -<!-- - This file is a demo of the FlickrStore, a simple wrapper to the public feed service - of Flickr. This just does very basic queries against Flickr and loads the results - into a list viewing widget. ---> -<html> -<head> - <title>Demo of FlickrStore</title> - <style type="text/css"> - - @import "../../../../dijit/themes/tundra/tundra.css"; - @import "../../../../dojo/resources/dojo.css"; - @import "../../../../dijit/tests/css/dijitTests.css"; - @import "./flickrDemo.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("dijit.form.TextBox"); - dojo.require("dijit.form.Button"); - dojo.require("dijit.form.ComboBox"); - dojo.require("dijit.form.NumberSpinner"); - dojo.require("dojox.data.FlickrStore"); - dojo.require("dojox.wire.ml.Invocation"); - dojo.require("dojox.wire.ml.Transfer"); - dojo.require("dojox.wire.ml.Data"); - dojo.require("dojox.wire"); - dojo.require("dojox.data.demos.widgets.FlickrViewList"); - dojo.require("dojox.data.demos.widgets.FlickrView"); - - //Toplevel JS Object to contain a few basics for us, such as the request to pass to the store and a stub onItem and onComplete function - // to trap on for triggering other events. - var dataHolder = { - //Simple stub datastore request - request: {query: {}, onItem: function(item, req){}, onComplete: function(items, req){}}, - - //Spot to store off data values as they're generated by the declarative binding. - result: null - }; - - //Function to convert the input from a widget into a comma separated list. - //that is the format of the store parameter. - var tagsInputConverter = function(tags){ - if(tags && tags !== ""){ - var tagsArray = tags.split(" "); - tags = ""; - for(var i = 0; i < tagsArray.length; i++){ - tags = tags + tagsArray[i]; - if(i < (tagsArray.length - 1)){ - tags += "," - } - } - } - return tags - } - - </script> -</head> - -<body class="tundra"> - <h1> - DEMO: FlickrStore Search - </h1> - <hr> - <h3> - Description: - </h3> - <p> - This simple demo shows how services, such as Flickr, can be wrapped by the datastore API. In this demo, you can search public - Flickr images through a simple FlickrStore by specifying a series of tags (separated by spaces) to search on. The results - will be displayed below the search box. This demo is the same as the example demo provided in dojox/data/demos/demo_FlickrStore.html, - except that all the interactions are implemented via Wire instead of a script that runs at dojo.addOnLoad(). - </p> - <p> - For fun, search on the 3dny tag! - </p> - - <blockquote> - - <!-- - Layout. - --> - <table> - <tbody> - <tr> - <td> - <b>Status:</b> - </td> - <td> - <div dojoType="dijit.form.TextBox" size="50" id="status" jsId="statusWidget" disabled="true"></div> - </td> - </tr> - <tr> - <td> - <b>ID:</b> - </td> - <td> - <div dojoType="dijit.form.TextBox" size="50" id="userid" jsId="idWidget"></div> - </td> - </tr> - <tr> - <td> - <b>Tags:</b> - </td> - <td> - <div dojoType="dijit.form.TextBox" size="50" id="tags" jsId="tagsWidget" value="3dny"></div> - </td> - </tr> - <tr> - <td> - <b>Tagmode:</b> - </td> - <td> - <select id="tagmode" - jsId="tagmodeWidget" - dojoType="dijit.form.ComboBox" - autocomplete="false" - value="any" - > - <option>any</option> - <option>all</option> - </select> - </td> - </tr> - <tr> - <td> - <b>Number of Pictures:</b> - </td> - <td> - <div - id="count" - jsId="countWidget" - dojoType="dijit.form.NumberSpinner" - value="20" - constraints="{min:1,max:20,places:0}" - ></div> - </td> - </tr> - <tr> - <td> - </td> - <td> - <div dojoType="dijit.form.Button" label="Search" id="searchButton" jsId="searchButtonWidget"></div> - </td> - </tr> - </tbody> - </table> - </blockquote> - <!-- - The store instance used by this demo. - --> - <div dojoType="dojox.data.FlickrStore" jsId="flickrStore" label="title"></div> - <div dojoType="dojox.data.demos.widgets.FlickrViewList" id="flickrViews" jsId="flickrViewsWidget"></div> - - <!-------------------------------- Using dojox.wire, declaratively wire up the widgets. ---------------------------> - - - <!-- - This is an example of using the declarative data value definition. - These are effectively declarative variables to act as placeholders - for data values. - --> - <div dojoType="dojox.wire.ml.Data" - id="messageData" - jsId="messageData"> - <div dojoType="dojox.wire.ml.DataProperty" - name="processingStart" - value="PROCESSING REQUEST"> - </div> - <div dojoType="dojox.wire.ml.DataProperty" - name="processingDone" - value="PROCESSING COMPLETE"> - </div> - </div> - - - <!-- - When the search button is clicked, do the following in order: - 1.) Map the widget values over to the request properties. - 2.) Clear existing rows from table, - 3.) Set the status to processing - 4.) Invoke the fetch to repopulate the table. - --> - <div dojoType="dojox.wire.ml.Action" - trigger="searchButtonWidget" - triggerEvent="onClick"> - - <!-- - Read in the values from the widgets and bind them to the appropriate data locations - For basic properties, you could use transfer directly, but since the text boxes are - designed to be accessed through getValue/setValue, it's better to do these as - Invocations on widget methods. - --> - <div dojoType="dojox.wire.ml.Invocation" - object="idWidget" - method="getValue" - result="dataHolder.request.query.id"> - </div> - - - <!-- - For the tags, we need to get the value and then perform a conversion on the result - This is done by doing an invoke, then a transfer through a converter. - --> - <div dojoType="dojox.wire.ml.Invocation" - object="tagsWidget" - method="getValue" - result="dataHolder.request.query.tags"> - </div> - <div dojoType="dojox.wire.ml.Transfer" - source="dataHolder.request.query.tags" - target="dataHolder.request.query.tags" - converter="tagsInputConverter"> - </div> - - <div dojoType="dojox.wire.ml.Invocation" - object="tagmodeWidget" - method="getValue" - result="dataHolder.request.query.tagmode"> - </div> - - <div dojoType="dojox.wire.ml.Invocation" - object="countWidget" - method="getValue" - result="dataHolder.request.count"> - </div> - - - <!-- Now invoke the actions in order. --> - <div dojoType="dojox.wire.ml.Invocation" object="flickrViewsWidget" method="clearList"></div> - <div dojoType="dojox.wire.ml.Invocation" object="statusWidget" method="setValue" parameters="messageData.processingStart"></div> - <div dojoType="dojox.wire.ml.Invocation" object="flickrStore" method="fetch" parameters="dataHolder.request"></div> - </div> - - <!-- - When the fetch processing finishes (onComplete is called), then set status to complete. - --> - <div dojoType="dojox.wire.ml.Action" - trigger="dataHolder.request" - triggerEvent="onComplete"> - <div dojoType="dojox.wire.ml.Invocation" object="statusWidget" method="setValue" parameters="messageData.processingDone"></div> - </div> - - - <!-- - On the call of the onItem function of 'dataHolder', trigger a binding/mapping of the - item's attributes to the requires parameters that are passed into addView. In this case - FlikrItemAttribute -> viewItemParam - title title - imageUrlSmall iconUrl - imageUrl imageUrl - author author - - Then take the result of the data mapping and pass it into the invoke of the addView function on the - FlickerViews widget. - --> - <div dojoType="dojox.wire.ml.Action" - trigger="dataHolder.request" triggerEvent="onItem"> - <div dojoType="dojox.wire.ml.Transfer" - source="arguments[0]" sourceStore="flickrStore" - target="dataHolder.result"> - <!-- - Map the attributes of the items to the property name defined - in the wire on the object in the target - --> - <div dojoType="dojox.wire.ml.ChildWire" - name="title" attribute="title"></div> - <div dojoType="dojox.wire.ml.ChildWire" - name="imageUrl" attribute="imageUrl"></div> - <div dojoType="dojox.wire.ml.ChildWire" - name="iconUrl" attribute="imageUrlSmall"></div> - <div dojoType="dojox.wire.ml.ChildWire" - name="author" attribute="author"></div> - </div> - <div dojoType="dojox.wire.ml.Invocation" - object="flickrViewsWidget" method="addView" parameters='dataHolder.result'> - </div> - </div> -</body> -</html> |