282 lines
8.3 KiB
HTML
282 lines
8.3 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 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("dojox.data.FlickrStore");
|
||
|
|
dojo.require("dojox.wire.ml.Invocation");
|
||
|
|
dojo.require("dojox.wire.ml.Transfer");
|
||
|
|
dojo.require("dojox.wire.ml.Data");
|
||
|
|
dojo.require("dojox.wire");
|
||
|
|
dojo.require("dojox.data.demos.widgets.FlickrViewList");
|
||
|
|
dojo.require("dojox.data.demos.widgets.FlickrView");
|
||
|
|
|
||
|
|
//Toplevel JS Object to contain a few basics for us, such as the request to pass to the store and a stub onItem and onComplete function
|
||
|
|
// to trap on for triggering other events.
|
||
|
|
var dataHolder = {
|
||
|
|
//Simple stub datastore request
|
||
|
|
request: {query: {}, onItem: function(item, req){}, onComplete: function(items, req){}},
|
||
|
|
|
||
|
|
//Spot to store off data values as they're generated by the declarative binding.
|
||
|
|
result: null
|
||
|
|
};
|
||
|
|
|
||
|
|
//Function to convert the input from a widget into a comma separated list.
|
||
|
|
//that is the format of the store parameter.
|
||
|
|
var tagsInputConverter = function(tags){
|
||
|
|
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 += ","
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return tags
|
||
|
|
}
|
||
|
|
|
||
|
|
</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. This demo is the same as the example demo provided in dojox/data/demos/demo_FlickrStore.html,
|
||
|
|
except that all the interactions are implemented via Wire instead of a script that runs at dojo.addOnLoad().
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
For fun, search on the 3dny tag!
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<blockquote>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
Layout.
|
||
|
|
-->
|
||
|
|
<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>
|
||
|
|
</blockquote>
|
||
|
|
<!--
|
||
|
|
The store instance used by this demo.
|
||
|
|
-->
|
||
|
|
<div dojoType="dojox.data.FlickrStore" jsId="flickrStore" label="title"></div>
|
||
|
|
<div dojoType="dojox.data.demos.widgets.FlickrViewList" id="flickrViews" jsId="flickrViewsWidget"></div>
|
||
|
|
|
||
|
|
<!-------------------------------- Using dojox.wire, declaratively wire up the widgets. --------------------------->
|
||
|
|
|
||
|
|
|
||
|
|
<!--
|
||
|
|
This is an example of using the declarative data value definition.
|
||
|
|
These are effectively declarative variables to act as placeholders
|
||
|
|
for data values.
|
||
|
|
-->
|
||
|
|
<div dojoType="dojox.wire.ml.Data"
|
||
|
|
id="messageData"
|
||
|
|
jsId="messageData">
|
||
|
|
<div dojoType="dojox.wire.ml.DataProperty"
|
||
|
|
name="processingStart"
|
||
|
|
value="PROCESSING REQUEST">
|
||
|
|
</div>
|
||
|
|
<div dojoType="dojox.wire.ml.DataProperty"
|
||
|
|
name="processingDone"
|
||
|
|
value="PROCESSING COMPLETE">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!--
|
||
|
|
When the search button is clicked, do the following in order:
|
||
|
|
1.) Map the widget values over to the request properties.
|
||
|
|
2.) Clear existing rows from table,
|
||
|
|
3.) Set the status to processing
|
||
|
|
4.) Invoke the fetch to repopulate the table.
|
||
|
|
-->
|
||
|
|
<div dojoType="dojox.wire.ml.Action"
|
||
|
|
trigger="searchButtonWidget"
|
||
|
|
triggerEvent="onClick">
|
||
|
|
|
||
|
|
<!--
|
||
|
|
Read in the values from the widgets and bind them to the appropriate data locations
|
||
|
|
For basic properties, you could use transfer directly, but since the text boxes are
|
||
|
|
designed to be accessed through getValue/setValue, it's better to do these as
|
||
|
|
Invocations on widget methods.
|
||
|
|
-->
|
||
|
|
<div dojoType="dojox.wire.ml.Invocation"
|
||
|
|
object="idWidget"
|
||
|
|
method="getValue"
|
||
|
|
result="dataHolder.request.query.id">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!--
|
||
|
|
For the tags, we need to get the value and then perform a conversion on the result
|
||
|
|
This is done by doing an invoke, then a transfer through a converter.
|
||
|
|
-->
|
||
|
|
<div dojoType="dojox.wire.ml.Invocation"
|
||
|
|
object="tagsWidget"
|
||
|
|
method="getValue"
|
||
|
|
result="dataHolder.request.query.tags">
|
||
|
|
</div>
|
||
|
|
<div dojoType="dojox.wire.ml.Transfer"
|
||
|
|
source="dataHolder.request.query.tags"
|
||
|
|
target="dataHolder.request.query.tags"
|
||
|
|
converter="tagsInputConverter">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div dojoType="dojox.wire.ml.Invocation"
|
||
|
|
object="tagmodeWidget"
|
||
|
|
method="getValue"
|
||
|
|
result="dataHolder.request.query.tagmode">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div dojoType="dojox.wire.ml.Invocation"
|
||
|
|
object="countWidget"
|
||
|
|
method="getValue"
|
||
|
|
result="dataHolder.request.count">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Now invoke the actions in order. -->
|
||
|
|
<div dojoType="dojox.wire.ml.Invocation" object="flickrViewsWidget" method="clearList"></div>
|
||
|
|
<div dojoType="dojox.wire.ml.Invocation" object="statusWidget" method="setValue" parameters="messageData.processingStart"></div>
|
||
|
|
<div dojoType="dojox.wire.ml.Invocation" object="flickrStore" method="fetch" parameters="dataHolder.request"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
When the fetch processing finishes (onComplete is called), then set status to complete.
|
||
|
|
-->
|
||
|
|
<div dojoType="dojox.wire.ml.Action"
|
||
|
|
trigger="dataHolder.request"
|
||
|
|
triggerEvent="onComplete">
|
||
|
|
<div dojoType="dojox.wire.ml.Invocation" object="statusWidget" method="setValue" parameters="messageData.processingDone"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!--
|
||
|
|
On the call of the onItem function of 'dataHolder', trigger a binding/mapping of the
|
||
|
|
item's attributes to the requires parameters that are passed into addView. In this case
|
||
|
|
FlikrItemAttribute -> viewItemParam
|
||
|
|
title title
|
||
|
|
imageUrlSmall iconUrl
|
||
|
|
imageUrl imageUrl
|
||
|
|
author author
|
||
|
|
|
||
|
|
Then take the result of the data mapping and pass it into the invoke of the addView function on the
|
||
|
|
FlickerViews widget.
|
||
|
|
-->
|
||
|
|
<div dojoType="dojox.wire.ml.Action"
|
||
|
|
trigger="dataHolder.request" triggerEvent="onItem">
|
||
|
|
<div dojoType="dojox.wire.ml.Transfer"
|
||
|
|
source="arguments[0]" sourceStore="flickrStore"
|
||
|
|
target="dataHolder.result">
|
||
|
|
<!--
|
||
|
|
Map the attributes of the items to the property name defined
|
||
|
|
in the wire on the object in the target
|
||
|
|
-->
|
||
|
|
<div dojoType="dojox.wire.ml.ChildWire"
|
||
|
|
name="title" attribute="title"></div>
|
||
|
|
<div dojoType="dojox.wire.ml.ChildWire"
|
||
|
|
name="imageUrl" attribute="imageUrl"></div>
|
||
|
|
<div dojoType="dojox.wire.ml.ChildWire"
|
||
|
|
name="iconUrl" attribute="imageUrlSmall"></div>
|
||
|
|
<div dojoType="dojox.wire.ml.ChildWire"
|
||
|
|
name="author" attribute="author"></div>
|
||
|
|
</div>
|
||
|
|
<div dojoType="dojox.wire.ml.Invocation"
|
||
|
|
object="flickrViewsWidget" method="addView" parameters='dataHolder.result'>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|