diff options
Diffstat (limited to 'includes/js/dojox/data/demos/demo_FlickrStore.html')
| -rw-r--r-- | includes/js/dojox/data/demos/demo_FlickrStore.html | 199 |
1 files changed, 199 insertions, 0 deletions
diff --git a/includes/js/dojox/data/demos/demo_FlickrStore.html b/includes/js/dojox/data/demos/demo_FlickrStore.html new file mode 100644 index 0000000..5ca48cf --- /dev/null +++ b/includes/js/dojox/data/demos/demo_FlickrStore.html @@ -0,0 +1,199 @@ +<!-- + 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("dijit.Tree"); + dojo.require("dojox.data.FlickrStore"); + dojo.require("dojox.data.demos.widgets.FlickrViewList"); + dojo.require("dojox.data.demos.widgets.FlickrView"); + + function init(){ + var fViewWidgets = []; + + //Set up an onComplete handler for flickrData + function onComplete(items, request){ + flickrViewsWidget.clearList(); + if(items.length > 0){ + for(var i = 0; i < items.length; i++){ + var flickrData = { + title: flickrStore.getValue(items[i],"title"), + author: flickrStore.getValue(items[i],"author"), + iconUrl: flickrStore.getValue(items[i],"imageUrlSmall"), + imageUrl: flickrStore.getValue(items[i],"imageUrl") + } + flickrViewsWidget.addView(flickrData); + } + } + statusWidget.setValue("PROCESSING COMPLETE."); + + } + //What to do if a search fails... + function onError(error, request){ + flickrViewsWidget.clearList(); + statusWidget.setValue("PROCESSING ERROR."); + } + + //Function to invoke the search of the FlickrStore + function invokeSearch(){ + var request = { + query: {}, + onComplete: onComplete, + onError: onError + }; + + if(idWidget){ + var userid = idWidget.getValue(); + if(userid && userid !== ""){ + request.query.userid = userid; + } + } + if(tagsWidget){ + var tags = tagsWidget.getValue(); + 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 += "," + } + } + request.query.tags = tags; + } + } + if(tagmodeWidget){ + var tagmode = tagmodeWidget.getValue(); + if(tagmode !== ""){ + request.query.tagmode = tagmode; + } + } + + if(countWidget){ + request.count = countWidget.getValue(); + } + + if(statusWidget){ + statusWidget.setValue("PROCESSING REQUEST"); + } + + flickrStore.fetch(request); + } + + //Lastly, link up the search event. + var button = dijit.byId("searchButton"); + dojo.connect(button, "onClick", invokeSearch); + } + dojo.addOnLoad(init); + </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. + </p> + <p> + For fun, search on the 3dny tag! + </p> + + <blockquote> + + <!-- + The store instance used by this demo. + --> + <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> + <hr/> + <div dojoType="dojox.data.FlickrStore" jsId="flickrStore" label="title"></div> + <div dojoType="dojox.data.demos.widgets.FlickrViewList" id="flickrViews" jsId="flickrViewsWidget"></div> + +</body> +</html> |