diff options
Diffstat (limited to 'includes/js/dojox/data/demos/demo_FlickrRestStore.html')
| -rw-r--r-- | includes/js/dojox/data/demos/demo_FlickrRestStore.html | 275 |
1 files changed, 275 insertions, 0 deletions
diff --git a/includes/js/dojox/data/demos/demo_FlickrRestStore.html b/includes/js/dojox/data/demos/demo_FlickrRestStore.html new file mode 100644 index 0000000..a094bc6 --- /dev/null +++ b/includes/js/dojox/data/demos/demo_FlickrRestStore.html @@ -0,0 +1,275 @@ +<!-- + 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 FlickrRestStore</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.FlickrRestStore"); + 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: { + apikey: "8c6803164dbc395fb7131c9d54843627" + }, + 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(setIdWidget){ + var setId = setIdWidget.getValue(); + if(setId != ""){ + request.query.setId = setId; + } + } + + if(fullTextWidget){ + var fullText = fullTextWidget.getValue(); + if(fullText != ""){ + request.query.text = fullText; + } + } + + if(sortTypeWidget && sortDirWidget){ + var sortType = sortTypeWidget.getValue(); + var sortDirection = sortDirWidget.getValue(); + + if(sortType != "" && sortDirection != ""){ + request.query.sort = [ + { + attribute: sortType, + descending: (sortDirection.toLowerCase() == "descending") + } + ]; + } + } + + if(countWidget){ + request.count = countWidget.getValue(); + } + if(pageWidget){ + request.start = request.count * (pageWidget.getValue() -1); + } + + 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: FlickrRestStore 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 FlickrRestStore 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> + <td></td> + <td></td> + </tr> + <tr> + <td> + <b>User ID:</b> + </td> + <td> + <div dojoType="dijit.form.TextBox" size="50" id="userid" jsId="idWidget" value="44153025@N00"></div> + </td> + <td> + <b>Set ID</b> + </td> + <td> + <div dojoType="dijit.form.TextBox" size="50" id="setid" jsId="setIdWidget"></div> + </td> + </tr> + <tr> + <td> + <b>Tags:</b> + </td> + <td> + <div dojoType="dijit.form.TextBox" size="50" id="tags" jsId="tagsWidget" value="rollingstones,kinsale"></div> + </td> + <td> + <b>Full Text</b> + </td> + <td> + <div dojoType="dijit.form.TextBox" size="50" id="fulltext" jsId="fullTextWidget"></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> + <td> + <b>Sort</b> + </td> + <td> + <select dojoType="dijit.form.ComboBox" size="15" id="sorttype" jsId="sortTypeWidget"> + <option>date-posted</option> + <option>date-taken</option> + <option>interestingness</option> + </select> + <select dojoType="dijit.form.ComboBox" size="15" id="sortdirection" jsId="sortDirWidget"> + <option>ascending</option> + <option>descending</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> + <td> + <b>Page:</b> + </td> + <td> + <div + id="page" + jsId="pageWidget" + dojoType="dijit.form.NumberSpinner" + value="1" + constraints="{min:1,max:5,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.FlickrRestStore" jsId="flickrStore" label="title"></div> + <div dojoType="dojox.data.demos.widgets.FlickrViewList" id="flickrViews" jsId="flickrViewsWidget"></div> + +</body> +</html> |