+++ /dev/null
-<!--
- 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>
projects / eow / blobdiff