git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/data/demos/demo_FlickrStore.html

   1 <!--
   2   This file is a demo of the FlickrStore, a simple wrapper to the public feed service
   3   of Flickr.  This just does very basic queries against Flickr and loads the results
   4   into a list viewing widget.
   5 -->
   6 <html>
   7 <head>
   8         <title>Demo of FlickrStore</title>
   9         <style type="text/css">
  10
  11                 @import "../../../dijit/themes/tundra/tundra.css";
  12                 @import "../../../dojo/resources/dojo.css";
  13                 @import "../../../dijit/tests/css/dijitTests.css";
  14                 @import "./flickrDemo.css";
  15         </style>
  16
  17         <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
  18         <script type="text/javascript">
  19                 dojo.require("dojo.parser");
  20                 dojo.require("dijit.form.TextBox");
  21                 dojo.require("dijit.form.Button");
  22                 dojo.require("dijit.form.ComboBox");
  23                 dojo.require("dijit.form.NumberSpinner");
  24                 dojo.require("dijit.Tree");
  25                 dojo.require("dojox.data.FlickrStore");
  26                 dojo.require("dojox.data.demos.widgets.FlickrViewList");
  27                 dojo.require("dojox.data.demos.widgets.FlickrView");
  28
  29                 function init(){
  30                         var fViewWidgets = [];
  31
  32                         //Set up an onComplete handler for flickrData
  33                         function onComplete(items, request){
  34                                 flickrViewsWidget.clearList();
  35                                 if(items.length > 0){
  36                                         for(var i = 0; i < items.length; i++){
  37                                                 var flickrData = {
  38                                                         title: flickrStore.getValue(items[i],"title"),
  39                                                         author: flickrStore.getValue(items[i],"author"),
  40                                                         iconUrl: flickrStore.getValue(items[i],"imageUrlSmall"),
  41                                                         imageUrl: flickrStore.getValue(items[i],"imageUrl")
  42                                                 }
  43                                                 flickrViewsWidget.addView(flickrData);
  44                                         }
  45                                 }
  46                                 statusWidget.setValue("PROCESSING COMPLETE.");
  47
  48                         }
  49                         //What to do if a search fails...
  50                         function onError(error, request){
  51                                 flickrViewsWidget.clearList();
  52                                 statusWidget.setValue("PROCESSING ERROR.");
  53                         }
  54
  55                         //Function to invoke the search of the FlickrStore
  56                         function invokeSearch(){
  57                                 var request = {
  58                                         query: {},
  59                                         onComplete: onComplete,
  60                                         onError: onError
  61                                 };
  62
  63                                 if(idWidget){
  64                                         var userid = idWidget.getValue();
  65                                         if(userid && userid !== ""){
  66                                                 request.query.userid = userid;
  67                                         }
  68                                 }
  69                                 if(tagsWidget){
  70                                         var tags = tagsWidget.getValue();
  71                                         if(tags && tags !== ""){
  72                                                 var tagsArray = tags.split(" ");
  73                                                 tags = "";
  74                                                 for(var i = 0; i < tagsArray.length; i++){
  75                                                         tags = tags + tagsArray[i];
  76                                                         if(i < (tagsArray.length - 1)){
  77                                                                 tags += ","
  78                                                         }
  79                                                 }
  80                                                 request.query.tags = tags;
  81                                         }
  82                                 }
  83                                 if(tagmodeWidget){
  84                                         var tagmode = tagmodeWidget.getValue();
  85                                         if(tagmode !== ""){
  86                                                 request.query.tagmode = tagmode;
  87                                         }
  88                                 }
  89
  90                                 if(countWidget){
  91                                         request.count = countWidget.getValue();
  92                                 }
  93
  94                                 if(statusWidget){
  95                                         statusWidget.setValue("PROCESSING REQUEST");
  96                                 }
  97
  98                                 flickrStore.fetch(request);
  99                         }
 100
 101                         //Lastly, link up the search event.
 102                         var button = dijit.byId("searchButton");
 103                         dojo.connect(button, "onClick", invokeSearch);
 104                 }
 105                 dojo.addOnLoad(init);
 106         </script>
 107 </head>
 108
 109 <body class="tundra">
 110         <h1>
 111                 DEMO:  FlickrStore Search
 112         </h1>
 113         <hr>
 114         <h3>
 115                 Description:
 116         </h3>
 117         <p>
 118                 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.
 119         </p>
 120         <p>
 121                 For fun, search on the 3dny tag!
 122         </p>
 123
 124         <blockquote>
 125
 126         <!--
 127                 The store instance used by this demo.
 128         -->
 129         <table>
 130                 <tbody>
 131                         <tr>
 132                                 <td>
 133                                         <b>Status:</b>
 134                                 </td>
 135                                 <td>
 136                                         <div dojoType="dijit.form.TextBox" size="50" id="status" jsId="statusWidget" disabled="true"></div>
 137                                 </td>
 138                         </tr>
 139                         <tr>
 140                                 <td>
 141                                         <b>ID:</b>
 142                                 </td>
 143                                 <td>
 144                                         <div dojoType="dijit.form.TextBox" size="50" id="userid" jsId="idWidget"></div>
 145                                 </td>
 146                         </tr>
 147                         <tr>
 148                                 <td>
 149                                         <b>Tags:</b>
 150                                 </td>
 151                                 <td>
 152                                         <div dojoType="dijit.form.TextBox" size="50" id="tags" jsId="tagsWidget" value="3dny"></div>
 153                                 </td>
 154                         </tr>
 155                         <tr>
 156                                 <td>
 157                                         <b>Tagmode:</b>
 158                                 </td>
 159                                 <td>
 160                                         <select id="tagmode"
 161                                                         jsId="tagmodeWidget"
 162                                                         dojoType="dijit.form.ComboBox"
 163                                                         autocomplete="false"
 164                                                         value="any"
 165                                         >
 166                                                 <option>any</option>
 167                                                 <option>all</option>
 168                                         </select>
 169                                 </td>
 170                         </tr>
 171                         <tr>
 172                                 <td>
 173                                         <b>Number of Pictures:</b>
 174                                 </td>
 175                                 <td>
 176                                         <div
 177                                                 id="count"
 178                                                 jsId="countWidget"
 179                                                 dojoType="dijit.form.NumberSpinner"
 180                                                 value="20"
 181                                                 constraints="{min:1,max:20,places:0}"
 182                                         ></div>
 183                                 </td>
 184                         </tr>
 185                         <tr>
 186                                 <td>
 187                                 </td>
 188                                 <td>
 189                                         <div dojoType="dijit.form.Button" label="Search" id="searchButton" jsId="searchButtonWidget"></div>
 190                                 </td>
 191                         </tr>
 192                 </tbody>
 193         </table>
 194         <hr/>
 195         <div dojoType="dojox.data.FlickrStore" jsId="flickrStore" label="title"></div>
 196         <div dojoType="dojox.data.demos.widgets.FlickrViewList" id="flickrViews" jsId="flickrViewsWidget"></div>
 197
 198 </body>
 199 </html>