276 lines
6.7 KiB
HTML
276 lines
6.7 KiB
HTML
|
<!--
|
||
|
|
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>
|