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