git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/data/demos/demo_FlickrRestStore.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 FlickrRestStore</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.FlickrRestStore");
  27                 dojo.require("dojox.data.demos.widgets.FlickrViewList");
  28                 dojo.require("dojox.data.demos.widgets.FlickrView");
  29
  30                 function init(){
  31                         var fViewWidgets = [];
  32
  33                         //Set up an onComplete handler for flickrData
  34                         function onComplete(items, request){
  35                                 flickrViewsWidget.clearList();
  36                                 if(items.length > 0){
  37                                         for(var i = 0; i < items.length; i++){
  38                                                 var flickrData = {
  39                                                         title: flickrStore.getValue(items[i],"title"),
  40                                                         author: flickrStore.getValue(items[i],"author"),
  41                                                         iconUrl: flickrStore.getValue(items[i],"imageUrlSmall"),
  42                                                         imageUrl: flickrStore.getValue(items[i],"imageUrl")
  43                                                 }
  44                                                 flickrViewsWidget.addView(flickrData);
  45                                         }
  46                                 }
  47                                 statusWidget.setValue("PROCESSING COMPLETE.");
  48
  49                         }
  50                         //What to do if a search fails...
  51                         function onError(error, request){
  52                                 flickrViewsWidget.clearList();
  53                                 statusWidget.setValue("PROCESSING ERROR.");
  54                         }
  55
  56                         //Function to invoke the search of the FlickrStore
  57                         function invokeSearch(){
  58                                 var request = {
  59                                         query: {
  60                                           apikey: "8c6803164dbc395fb7131c9d54843627"
  61                                         },
  62                                         onComplete: onComplete,
  63                                         onError: onError
  64                                 };
  65
  66                                 if(idWidget){
  67                                         var userid = idWidget.getValue();
  68                                         if(userid && userid !== ""){
  69                                                 request.query.userid = userid;
  70                                         }
  71                                 }
  72                                 if(tagsWidget){
  73                                         var tags = tagsWidget.getValue();
  74                                         if(tags && tags !== ""){
  75                                                 var tagsArray = tags.split(" ");
  76                                                 tags = "";
  77                                                 for(var i = 0; i < tagsArray.length; i++){
  78                                                         tags = tags + tagsArray[i];
  79                                                         if(i < (tagsArray.length - 1)){
  80                                                                 tags += ","
  81                                                         }
  82                                                 }
  83                                                 request.query.tags = tags;
  84                                         }
  85                                 }
  86                                 if(tagmodeWidget){
  87                                         var tagmode = tagmodeWidget.getValue();
  88                                         if(tagmode !== ""){
  89                                                 request.query.tagmode = tagmode;
  90                                         }
  91                                 }
  92
  93                                 if(setIdWidget){
  94                                         var setId = setIdWidget.getValue();
  95                                         if(setId != ""){
  96                                           request.query.setId = setId;
  97                                         }
  98                                 }
  99
 100                                 if(fullTextWidget){
 101                                         var fullText = fullTextWidget.getValue();
 102                                         if(fullText != ""){
 103                                           request.query.text = fullText;
 104                                         }
 105                                 }
 106
 107                                 if(sortTypeWidget && sortDirWidget){
 108                                         var sortType = sortTypeWidget.getValue();
 109                                         var sortDirection = sortDirWidget.getValue();
 110
 111                                         if(sortType != "" && sortDirection != ""){
 112                                                 request.query.sort = [
 113                                                   {
 114                                                         attribute: sortType,
 115                                                         descending: (sortDirection.toLowerCase() == "descending")
 116                                                   }
 117                                                 ];
 118                                         }
 119                                 }
 120
 121                                 if(countWidget){
 122                                         request.count = countWidget.getValue();
 123                                 }
 124                                 if(pageWidget){
 125                                         request.start = request.count * (pageWidget.getValue() -1);
 126                                 }
 127
 128                                 if(statusWidget){
 129                                         statusWidget.setValue("PROCESSING REQUEST");
 130                                 }
 131
 132                                 flickrStore.fetch(request);
 133                         }
 134
 135                         //Lastly, link up the search event.
 136                         var button = dijit.byId("searchButton");
 137                         dojo.connect(button, "onClick", invokeSearch);
 138                 }
 139                 dojo.addOnLoad(init);
 140         </script>
 141 </head>
 142
 143 <body class="tundra">
 144         <h1>
 145                 DEMO:  FlickrRestStore Search
 146         </h1>
 147         <hr>
 148         <h3>
 149                 Description:
 150         </h3>
 151         <p>
 152                 This simple demo shows how services, such as Flickr, can be wrapped by the datastore API.
 153                 In this demo, you can search public Flickr images through a FlickrRestStore by specifying
 154                 a series of tags (separated by spaces) to search on.  The results will be displayed below the search box.
 155         </p>
 156         <p>
 157                 For fun, search on the 3dny tag!
 158         </p>
 159
 160         <blockquote>
 161
 162         <!--
 163                 The store instance used by this demo.
 164         -->
 165         <table>
 166                 <tbody>
 167                         <tr>
 168                                 <td>
 169                                         <b>Status:</b>
 170                                 </td>
 171                                 <td>
 172                                         <div dojoType="dijit.form.TextBox" size="50" id="status" jsId="statusWidget" disabled="true"></div>
 173                                 </td>
 174                                 <td></td>
 175                                 <td></td>
 176                         </tr>
 177                         <tr>
 178                                 <td>
 179                                         <b>User ID:</b>
 180                                 </td>
 181                                 <td>
 182                                         <div dojoType="dijit.form.TextBox" size="50" id="userid" jsId="idWidget" value="44153025@N00"></div>
 183                                 </td>
 184                                 <td>
 185                                         <b>Set ID</b>
 186                                 </td>
 187                                 <td>
 188                                           <div dojoType="dijit.form.TextBox" size="50" id="setid" jsId="setIdWidget"></div>
 189                                 </td>
 190                         </tr>
 191                         <tr>
 192                                 <td>
 193                                         <b>Tags:</b>
 194                                 </td>
 195                                 <td>
 196                                         <div dojoType="dijit.form.TextBox" size="50" id="tags" jsId="tagsWidget" value="rollingstones,kinsale"></div>
 197                                 </td>
 198                                 <td>
 199                                         <b>Full Text</b>
 200                                 </td>
 201                                 <td>
 202                                           <div dojoType="dijit.form.TextBox" size="50" id="fulltext" jsId="fullTextWidget"></div>
 203                                 </td>
 204                         </tr>
 205                         <tr>
 206                                 <td>
 207                                         <b>Tagmode:</b>
 208                                 </td>
 209                                 <td>
 210                                         <select id="tagmode"
 211                                                         jsId="tagmodeWidget"
 212                                                         dojoType="dijit.form.ComboBox"
 213                                                         autocomplete="false"
 214                                                         value="any"
 215                                         >
 216                                                 <option>any</option>
 217                                                 <option>all</option>
 218                                         </select>
 219                                 </td>
 220                                 <td>
 221                                         <b>Sort</b>
 222                                 </td>
 223                                 <td>
 224                                           <select dojoType="dijit.form.ComboBox" size="15" id="sorttype" jsId="sortTypeWidget">
 225                                                 <option>date-posted</option>
 226                                                 <option>date-taken</option>
 227                                                 <option>interestingness</option>
 228                                           </select>
 229                                            <select dojoType="dijit.form.ComboBox" size="15" id="sortdirection" jsId="sortDirWidget">
 230                                                 <option>ascending</option>
 231                                                 <option>descending</option>
 232                                           </select>
 233                                 </td>
 234                         </tr>
 235                         <tr>
 236                                 <td>
 237                                         <b>Number of Pictures:</b>
 238                                 </td>
 239                                 <td>
 240                                         <div
 241                                                 id="count"
 242                                                 jsId="countWidget"
 243                                                 dojoType="dijit.form.NumberSpinner"
 244                                                 value="20"
 245                                                 constraints="{min:1,max:20,places:0}"
 246                                         ></div>
 247                                 </td>
 248                                 <td>
 249                                         <b>Page:</b>
 250                                 </td>
 251                                 <td>
 252                                         <div
 253                                                 id="page"
 254                                                 jsId="pageWidget"
 255                                                 dojoType="dijit.form.NumberSpinner"
 256                                                 value="1"
 257                                                 constraints="{min:1,max:5,places:0}"
 258                                         ></div>
 259                                 </td>
 260                         </tr>
 261                         <tr>
 262                                 <td>
 263                                 </td>
 264                                 <td>
 265                                         <div dojoType="dijit.form.Button" label="Search" id="searchButton" jsId="searchButtonWidget"></div>
 266                                 </td>
 267                         </tr>
 268                 </tbody>
 269         </table>
 270         <hr/>
 271         <div dojoType="dojox.data.FlickrRestStore" jsId="flickrStore" label="title"></div>
 272         <div dojoType="dojox.data.demos.widgets.FlickrViewList" id="flickrViews" jsId="flickrViewsWidget"></div>
 273
 274 </body>
 275 </html>