Page MenuHomeCode
Files F1128159

demo_FlickrStoreWire.html
No OneTemporary
Actions

demo_FlickrStoreWire.html
View Options

<!--
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>

File Metadata

Mime Type
text/html
Expires
Fri, Jun 20, 04:20 (2 w, 4 d ago)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
27241
Default Alt Text
demo_FlickrStoreWire.html (8 KB)

Event Timeline