/trunk/api/js/dojo1.0/dojox/data/demos/demo_MultiStores.html |
---|
New file |
0,0 → 1,72 |
<!-- |
This file is a demo of multiple dojo.data aware widgets using different datastore implementations for displaying data. |
--> |
<html> |
<head> |
<title>Demo of Multiple Widgets using different Datastores</title> |
<style type="text/css"> |
@import "../../../dijit/themes/tundra/tundra.css"; |
@import "../../../dojo/resources/dojo.css"; |
@import "../../../dijit/tests/css/dijitTests.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.ComboBox"); |
dojo.require("dijit.Tree"); |
dojo.require("dojox.data.OpmlStore"); |
dojo.require("dojo.data.ItemFileReadStore"); |
</script> |
</head> |
<body class="tundra"> |
<h1> |
DEMO: Multiple DataStore implementations with dojo.data aware Widgets |
</h1> |
<hr> |
<h3> |
Description: |
</h3> |
<p> |
This simple demo shows how widgets which know only the dojo.data interfaces can work with data sources of varying formats. In this case an OpmlStore |
and a ItemFileReadStore are used to house the same data in different formats. |
</p> |
<blockquote> |
<!-- |
The store instances used by this demo. |
--> |
<div dojoType="dojo.data.ItemFileReadStore" url="geography.json" jsId="ifrGeoStore"></div> |
<div dojoType="dojox.data.OpmlStore" url="geography.xml" label="text" jsId="opmlGeoStore"></div> |
<h3> |
Widgets using OpmlStore: |
</h3> |
<blockquote> |
<b>ComboBox:</b><br> |
<input dojoType="dijit.form.ComboBox" id="combo1" name="combo1" class="medium" store="opmlGeoStore" searchAttr="text" query="{}"></input> |
<br> |
<br> |
<b>Tree:</b><br> |
<div dojoType="dijit.Tree" id="tree1" label="Continents" store="opmlGeoStore"></div> |
</blockquote> |
<h3> |
Widgets using ItemFileReadStore: |
</h3> |
<blockquote> |
<b>ComboBox:</b><br> |
<input dojoType="dijit.form.ComboBox" id="combo2" name="combo2" class="medium" store="ifrGeoStore" searchAttr="name" query="{}"></input> |
<br> |
<br> |
<b>Tree:</b><br> |
<div dojoType="dijit.Tree" id="tree2" label="Continents" store="ifrGeoStore"></div> |
</blockquote> |
</body> |
</html> |
/trunk/api/js/dojo1.0/dojox/data/demos/demo_PicasaStore.html |
---|
New file |
0,0 → 1,188 |
<!-- |
This file is a demo of the PicasaStore, a simple wrapper to the public feed service |
of Picasa. This just does very basic queries against Picasa and loads the results |
into a list viewing widget. |
--> |
<html> |
<head> |
<title>Demo of PicasaStore</title> |
<style type="text/css"> |
@import "../../../dijit/themes/tundra/tundra.css"; |
@import "../../../dojo/resources/dojo.css"; |
@import "../../../dijit/tests/css/dijitTests.css"; |
@import "./picasaDemo.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.PicasaStore"); |
dojo.require("dojox.data.demos.widgets.PicasaViewList"); |
dojo.require("dojox.data.demos.widgets.PicasaView"); |
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"), |
description: flickrStore.getValue(items[i],"description"), |
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: {}, |
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(countWidget){ |
request.count = countWidget.getValue(); |
} |
if(startWidget){ |
request.query.start = startWidget.getValue(); |
} |
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: PicasaStore 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. |
</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> |
</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>Query:</b> |
</td> |
<td> |
<div dojoType="dijit.form.TextBox" size="50" id="tags" jsId="tagsWidget" value="flower"></div> |
</td> |
</tr> |
<tr> |
<td> |
<b>Number of Pictures:</b> |
</td> |
<td> |
<div |
id="start" |
jsId="startWidget" |
dojoType="dijit.form.NumberSpinner" |
value="1" |
constraints="{min:1,places:0}" |
></div> |
<div |
id="count" |
jsId="countWidget" |
dojoType="dijit.form.NumberSpinner" |
value="20" |
constraints="{min:1,max:100,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.PicasaStore" jsId="flickrStore" label="title"></div> |
<div dojoType="dojox.data.demos.widgets.PicasaViewList" id="flickrViews" jsId="flickrViewsWidget"></div> |
</body> |
</html> |
/trunk/api/js/dojo1.0/dojox/data/demos/geography.xml |
---|
New file |
0,0 → 1,51 |
<?xml version="1.0" encoding="ISO-8859-1"?> |
<opml version="1.0"> |
<head> |
<title>geography.opml</title> |
<dateCreated>2006-11-10</dateCreated> |
<dateModified>2006-11-13</dateModified> |
<ownerName>Magellan, Ferdinand</ownerName> |
</head> |
<body> |
<outline text="Africa" type="continent"> |
<outline text="Egypt" type="country"/> |
<outline text="Kenya" type="country"> |
<outline text="Nairobi" type="city"/> |
<outline text="Mombasa" type="city"/> |
</outline> |
<outline text="Sudan" type="country"> |
<outline text="Khartoum" type="city"/> |
</outline> |
</outline> |
<outline text="Asia" type="continent"> |
<outline text="China" type="country"/> |
<outline text="India" type="country"/> |
<outline text="Russia" type="country"/> |
<outline text="Mongolia" type="country"/> |
</outline> |
<outline text="Australia" type="continent" population="21 million"> |
<outline text="Australia" type="country" population="21 million"/> |
</outline> |
<outline text="Europe" type="continent"> |
<outline text="Germany" type="country"/> |
<outline text="France" type="country"/> |
<outline text="Spain" type="country"/> |
<outline text="Italy" type="country"/> |
</outline> |
<outline text="North America" type="continent"> |
<outline text="Mexico" type="country" population="108 million" area="1,972,550 sq km"> |
<outline text="Mexico City" type="city" population="19 million" timezone="-6 UTC"/> |
<outline text="Guadalajara" type="city" population="4 million" timezone="-6 UTC"/> |
</outline> |
<outline text="Canada" type="country" population="33 million" area="9,984,670 sq km"> |
<outline text="Ottawa" type="city" population="0.9 million" timezone="-5 UTC"/> |
<outline text="Toronto" type="city" population="2.5 million" timezone="-5 UTC"/> |
</outline> |
<outline text="United States of America" type="country"/> |
</outline> |
<outline text="South America" type="continent"> |
<outline text="Brazil" type="country" population="186 million"/> |
<outline text="Argentina" type="country" population="40 million"/> |
</outline> |
</body> |
</opml> |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/China/data.json |
---|
New file |
0,0 → 1,4 |
{ |
name:'China', |
type:'country' |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/Italy/data.json |
---|
New file |
0,0 → 1,4 |
{ |
name:'Italy', |
type:'country' |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/United States of America/data.json |
---|
New file |
0,0 → 1,4 |
{ |
name:'United States of America', |
type:'country' |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/Brazil/data.json |
---|
New file |
0,0 → 1,5 |
{ |
name:'Brazil', |
type:'country', |
population:'186 million' |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/India/data.json |
---|
New file |
0,0 → 1,4 |
{ |
name:'India', |
type:'country' |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/Mexico/data.json |
---|
New file |
0,0 → 1,10 |
{ |
name:'Mexico', |
type:'country', |
population:'108 million', |
area:'1,972,550 sq km', |
children:[ |
{stub:'Mexico City'}, |
{stub:'Guadalajara'} |
] |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/Mexico/Guadalajara/data.json |
---|
New file |
0,0 → 1,7 |
{ |
name:'Guadalajara', |
type:'city', |
population:'4 million', |
timezone:'-6 UTC' |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/Mexico/Mexico City/data.json |
---|
New file |
0,0 → 1,6 |
{ |
name:'Mexico City', |
type:'city', |
population:'19 million', |
timezone:'-6 UTC' |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/Commonwealth of Australia/data.json |
---|
New file |
0,0 → 1,5 |
{ |
name:'Commonwealth of Australia', |
type:'country', |
population:'21 million' |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/Egypt/data.json |
---|
New file |
0,0 → 1,5 |
{ |
name:'Egypt', |
type:'country' |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/root.json |
---|
New file |
0,0 → 1,39 |
{ |
identifier: 'name', |
label: 'name', |
items: [ |
{ name:'Africa', type:'continent', |
children:[{_reference:'Egypt'}, {_reference:'Kenya'}, {_reference:'Sudan'}] }, |
{ name:'Egypt', type:'stub', parent: 'geography'}, |
{ name:'Kenya', type:'stub', parent: 'geography'}, |
{ name:'Sudan', type:'stub', parent: 'geography'}, |
{ name:'Asia', type:'continent', |
children:[{_reference:'China'}, {_reference:'India'}, {_reference:'Russia'}, {_reference:'Mongolia'}] }, |
{ name:'China', type:'stub', parent: 'geography'}, |
{ name:'India', type:'stub', parent: 'geography'}, |
{ name:'Russia', type:'stub', parent: 'geography'}, |
{ name:'Mongolia', type:'stub', parent: 'geography'}, |
{ name:'Australia', type:'continent', population:'21 million', |
children:{_reference:'Commonwealth of Australia'}}, |
{ name:'Commonwealth of Australia', type:'stub', parent:'geography'}, |
{ name:'Europe', type:'continent', |
children:[{_reference:'Germany'}, {_reference:'France'}, {_reference:'Spain'}, {_reference:'Italy'}] }, |
{ name:'Germany', type:'stub', parent: 'geography'}, |
{ name:'France', type:'stub', parent: 'geography'}, |
{ name:'Spain', type:'stub', parent: 'geography'}, |
{ name:'Italy', type:'stub', parent: 'geography'}, |
{ name:'North America', type:'continent', |
children:[{_reference:'Mexico'}, {_reference:'Canada'}, {_reference:'United States of America'}] }, |
{ name:'Mexico', type:'stub', parent: 'geography'}, |
{ name:'Canada', type:'stub', parent: 'geography'}, |
{ name:'United States of America', type:'stub', parent: 'geography'}, |
{ name:'South America', type:'continent', |
children:[{_reference:'Brazil'}, {_reference:'Argentina'}] }, |
{ name:'Brazil', type:'stub', parent: 'geography'}, |
{ name:'Argentina', type:'stub', parent: 'geography'} |
]} |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/France/data.json |
---|
New file |
0,0 → 1,4 |
{ |
name:'France', |
type:'country' |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/Germany/data.json |
---|
New file |
0,0 → 1,4 |
{ |
name:'Germany', |
type:'country' |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/Mongolia/data.json |
---|
New file |
0,0 → 1,4 |
{ |
name:'Mongolia', |
type:'country' |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/Russia/data.json |
---|
New file |
0,0 → 1,4 |
{ |
name:'Russia', |
type:'country' |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/Kenya/Mombasa/data.json |
---|
New file |
0,0 → 1,5 |
{ |
name:'Mombasa', |
type:'city', |
population: "Unknown" |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/Kenya/data.json |
---|
New file |
0,0 → 1,9 |
{ |
name:'Kenya', |
type:'country', |
children:[ |
{stub:'Nairobi'}, |
{stub:'Mombasa'} |
] |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/Kenya/Nairobi/data.json |
---|
New file |
0,0 → 1,5 |
{ |
name:'Nairobi', |
type:'city', |
population: "Unknown" |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/Canada/Ottawa/data.json |
---|
New file |
0,0 → 1,6 |
{ |
name:'Ottawa', |
type:'city', |
population:'0.9 million', |
timezone:'-5 UTC' |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/Canada/data.json |
---|
New file |
0,0 → 1,10 |
{ |
name:'Canada', |
type:'country', |
population:'33 million', area:'9,984,670 sq km', |
children:[ |
{stub:'Ottawa'}, |
{stub:'Toronto'} |
] |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/Canada/Toronto/data.json |
---|
New file |
0,0 → 1,6 |
{ |
name:'Toronto', |
type:'city', |
population:'2.5 million', |
timezone:'-5 UTC' |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/Argentina/data.json |
---|
New file |
0,0 → 1,5 |
{ |
name:'Argentina', |
type:'country', |
population:'40 million' |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/Spain/data.json |
---|
New file |
0,0 → 1,4 |
{ |
name:'Spain', |
type:'country' |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/Sudan/data.json |
---|
New file |
0,0 → 1,6 |
{ |
name:'Sudan', |
type:'country', |
children:{stub:'Khartoum'} |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/geography/Sudan/Khartoum/data.json |
---|
New file |
0,0 → 1,5 |
{ |
name:'Khartoum', |
type:'city' |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/demo_LazyLoad.html |
---|
New file |
0,0 → 1,66 |
<!-- |
This file is a simple loader for the Lazy Load demo of a Datastore. In this |
Example, a simple extension of ItemFileReadStore that can do rudimentary lazy-loading |
of items into the store is used to showcase how Datastores can hide how data |
is loaded from the widget. As long as the widget implements to the Dojo.data API |
spec, then it should be able to use most datastores as input sources for its |
values. |
--> |
<html> |
<head> |
<title>Demo of Lazy Loading Datastore</title> |
<style type="text/css"> |
@import "../../../dijit/themes/tundra/tundra.css"; |
@import "../../../dojo/resources/dojo.css"; |
@import "../../../dijit/tests/css/dijitTests.css"; |
</style> |
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true, usePlainJson: true"></script> |
<script type="text/javascript"> |
dojo.require("dojo.parser"); |
dojo.require("dojox.data.demos.stores.LazyLoadJSIStore"); |
dojo.require("dijit.Tree"); |
</script> |
</head> |
<body class="tundra"> |
<h1> |
DEMO: Lazy Loading Datastore used by dijit.Tree |
</h1> |
<hr> |
<h3> |
Description: |
</h3> |
<p> |
This simple demo shows how the dijit.Tree widget can work with a Datastore that does lazy-loading of values into the tree. |
In this demo, the Datastore is an extension of ItemFileReadStore that overrides the <i>isItemLoaded()</i> and <i>loadItem()</i> functions of |
with ones that can detect 'stub' items and use the data in the stub item to load the real data for that item when it |
is required. In this demo, the real data is required when one of the tree nodes is expanded. |
</p> |
<p> |
The key thing to note is that all the lazy-loading logic (how to locate the data from the backend and so forth) is encapsulated |
into the store functions. The dijit.Tree widget only knows about and uses the dojo.data.Read API interfaces to call to the store to |
get items, test if child items are fully loaded or not, and to invoke the <i>loadItem()</i> function on items that are not yet fully |
loaded but have been requested to be expanded into view. It has no knowledge of how the store actually goes and gets the data. |
</p> |
<blockquote> |
<!-- |
The store instance used by this demo. |
--> |
<div dojoType="dojox.data.demos.stores.LazyLoadJSIStore" jsId="continentStore" |
url="geography/root.json"></div> |
<!-- |
Display the toplevel tree with items that have an attribute of 'type', |
with value of 'contintent' |
--> |
<b>Continents</b> |
<div dojoType="dijit.Tree" id=tree label="Continents" store="continentStore" query="{type:'continent'}" |
labelAttr="name" typeAttr="type"></div> |
</blockquote> |
</body> |
</html> |
/trunk/api/js/dojo1.0/dojox/data/demos/flickrDemo.css |
---|
New file |
0,0 → 1,35 |
.flickrView { |
padding: 3 3 3 3; |
border-width: 1px; |
border-style: solid; |
border-color: #000000; |
border-collapse: separate; |
width: 100%; |
} |
.flickrView th { |
text-align: left; |
} |
.flickrView tr { |
padding: 3 3 3 3; |
border-width: 1px; |
border-style: solid; |
border-color: #000000; |
} |
.flickrView tr td { |
padding: 3 3 3 3; |
border-width: 1px; |
border-style: solid; |
border-color: #000000; |
} |
.flickrView { |
background-color: #EFEFEF; |
} |
.flickrTitle { |
background-color: #CCCCCC; |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/widgets/FlickrViewList.js |
---|
New file |
0,0 → 1,37 |
if(!dojo._hasResource["dojox.data.demos.widgets.FlickrViewList"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. |
dojo._hasResource["dojox.data.demos.widgets.FlickrViewList"] = true; |
dojo.provide("dojox.data.demos.widgets.FlickrViewList"); |
dojo.require("dijit._Templated"); |
dojo.require("dijit._Widget"); |
dojo.require("dojox.data.demos.widgets.FlickrView"); |
dojo.declare("dojox.data.demos.widgets.FlickrViewList", [dijit._Widget, dijit._Templated], { |
//Simple demo widget that is just a list of FlickrView Widgets. |
templateString:"<div dojoAttachPoint=\"list\"></div>\n\n", |
//Attach points for reference. |
listNode: null, |
postCreate: function(){ |
this.fViewWidgets = []; |
}, |
clearList: function(){ |
while(this.list.firstChild){ |
this.list.removeChild(this.list.firstChild); |
} |
for(var i = 0; i < this.fViewWidgets.length; i++){ |
this.fViewWidgets[i].destroy(); |
} |
this.fViewWidgets = []; |
}, |
addView: function(viewData){ |
var newView = new dojox.data.demos.widgets.FlickrView(viewData); |
this.fViewWidgets.push(newView); |
this.list.appendChild(newView.domNode); |
} |
}); |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/widgets/templates/FlickrViewList.html |
---|
New file |
0,0 → 1,2 |
<div dojoAttachPoint="list"></div> |
/trunk/api/js/dojo1.0/dojox/data/demos/widgets/templates/FlickrView.html |
---|
New file |
0,0 → 1,34 |
<table class="flickrView"> |
<tbody> |
<tr class="flickrTitle"> |
<td> |
<b> |
Title: |
</b> |
</td> |
<td dojoAttachPoint="titleNode"> |
</td> |
</tr> |
<tr> |
<td> |
<b> |
Author: |
</b> |
</td> |
<td dojoAttachPoint="authorNode"> |
</td> |
</tr> |
<tr> |
<td colspan="2"> |
<b> |
Image: |
</b> |
</td> |
</tr> |
<tr> |
<td dojoAttachPoint="imageNode" colspan="2"> |
</td> |
</tr> |
</tbody> |
</table> |
/trunk/api/js/dojo1.0/dojox/data/demos/widgets/templates/PicasaViewList.html |
---|
New file |
0,0 → 1,2 |
<div dojoAttachPoint="list"></div> |
/trunk/api/js/dojo1.0/dojox/data/demos/widgets/templates/PicasaView.html |
---|
New file |
0,0 → 1,35 |
<table class="picasaView"> |
<tbody> |
<tr class="picasaTitle"> |
<td> |
<b> |
Title: |
</b> |
</td> |
<td dojoAttachPoint="titleNode"> |
</td> |
</tr> |
<tr> |
<td> |
<b> |
Author: |
</b> |
</td> |
<td dojoAttachPoint="authorNode"> |
</td> |
</tr> |
<tr> |
<td colspan="2"> |
<b> |
Summary: |
</b> |
<span class="picasaSummary" dojoAttachPoint="descriptionNode"></span> |
</td> |
</tr> |
<tr> |
<td dojoAttachPoint="imageNode" colspan="2"> |
</td> |
</tr> |
</tbody> |
</table> |
/trunk/api/js/dojo1.0/dojox/data/demos/widgets/FlickrView.js |
---|
New file |
0,0 → 1,36 |
if(!dojo._hasResource["dojox.data.demos.widgets.FlickrView"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. |
dojo._hasResource["dojox.data.demos.widgets.FlickrView"] = true; |
dojo.provide("dojox.data.demos.widgets.FlickrView"); |
dojo.require("dijit._Templated"); |
dojo.require("dijit._Widget"); |
dojo.declare("dojox.data.demos.widgets.FlickrView", [dijit._Widget, dijit._Templated], { |
//Simple demo widget for representing a view of a Flickr Item. |
templateString:"<table class=\"flickrView\">\n\t<tbody>\n\t\t<tr class=\"flickrTitle\">\n\t\t\t<td>\n\t\t\t\t<b>\n\t\t\t\t\tTitle:\n\t\t\t\t</b>\n\t\t\t</td>\n\t\t\t<td dojoAttachPoint=\"titleNode\">\n\t\t\t</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>\n\t\t\t\t<b>\n\t\t\t\t\tAuthor:\n\t\t\t\t</b>\n\t\t\t</td>\n\t\t\t<td dojoAttachPoint=\"authorNode\">\n\t\t\t</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td colspan=\"2\">\n\t\t\t\t<b>\n\t\t\t\t\tImage:\n\t\t\t\t</b>\n\t\t\t</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td dojoAttachPoint=\"imageNode\" colspan=\"2\">\n\t\t\t</td>\n\t\t</tr>\n\t</tbody>\n</table>\n\n", |
//Attach points for reference. |
titleNode: null, |
descriptionNode: null, |
imageNode: null, |
authorNode: null, |
title: "", |
author: "", |
imageUrl: "", |
iconUrl: "", |
postCreate: function(){ |
this.titleNode.appendChild(document.createTextNode(this.title)); |
this.authorNode.appendChild(document.createTextNode(this.author)); |
var href = document.createElement("a"); |
href.setAttribute("href", this.imageUrl); |
href.setAttribute("target", "_blank"); |
var imageTag = document.createElement("img"); |
imageTag.setAttribute("src", this.iconUrl); |
href.appendChild(imageTag); |
this.imageNode.appendChild(href); |
} |
}); |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/widgets/PicasaViewList.js |
---|
New file |
0,0 → 1,37 |
if(!dojo._hasResource["dojox.data.demos.widgets.PicasaViewList"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. |
dojo._hasResource["dojox.data.demos.widgets.PicasaViewList"] = true; |
dojo.provide("dojox.data.demos.widgets.PicasaViewList"); |
dojo.require("dijit._Templated"); |
dojo.require("dijit._Widget"); |
dojo.require("dojox.data.demos.widgets.PicasaView"); |
dojo.declare("dojox.data.demos.widgets.PicasaViewList", [dijit._Widget, dijit._Templated], { |
//Simple demo widget that is just a list of PicasaView Widgets. |
templateString:"<div dojoAttachPoint=\"list\"></div>\n\n", |
//Attach points for reference. |
listNode: null, |
postCreate: function(){ |
this.fViewWidgets = []; |
}, |
clearList: function(){ |
while(this.list.firstChild){ |
this.list.removeChild(this.list.firstChild); |
} |
for(var i = 0; i < this.fViewWidgets.length; i++){ |
this.fViewWidgets[i].destroy(); |
} |
this.fViewWidgets = []; |
}, |
addView: function(viewData){ |
var newView = new dojox.data.demos.widgets.PicasaView(viewData); |
this.fViewWidgets.push(newView); |
this.list.appendChild(newView.domNode); |
} |
}); |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/widgets/PicasaView.js |
---|
New file |
0,0 → 1,37 |
if(!dojo._hasResource["dojox.data.demos.widgets.PicasaView"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. |
dojo._hasResource["dojox.data.demos.widgets.PicasaView"] = true; |
dojo.provide("dojox.data.demos.widgets.PicasaView"); |
dojo.require("dijit._Templated"); |
dojo.require("dijit._Widget"); |
dojo.declare("dojox.data.demos.widgets.PicasaView", [dijit._Widget, dijit._Templated], { |
//Simple demo widget for representing a view of a Picasa Item. |
templateString:"<table class=\"picasaView\">\n\t<tbody>\n\t\t<tr class=\"picasaTitle\">\n\t\t\t<td>\n\t\t\t\t<b>\n\t\t\t\t\tTitle:\n\t\t\t\t</b>\n\t\t\t</td>\n\t\t\t<td dojoAttachPoint=\"titleNode\">\n\t\t\t</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>\n\t\t\t\t<b>\n\t\t\t\t\tAuthor:\n\t\t\t\t</b>\n\t\t\t</td>\n\t\t\t<td dojoAttachPoint=\"authorNode\">\n\t\t\t</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td colspan=\"2\">\n\t\t\t\t<b>\n\t\t\t\t\tSummary:\n\t\t\t\t</b>\n\t\t\t\t<span class=\"picasaSummary\" dojoAttachPoint=\"descriptionNode\"></span>\n\t\t\t</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td dojoAttachPoint=\"imageNode\" colspan=\"2\">\n\t\t\t</td>\n\t\t</tr>\n\t</tbody>\n</table>\n\n", |
//Attach points for reference. |
titleNode: null, |
descriptionNode: null, |
imageNode: null, |
authorNode: null, |
title: "", |
author: "", |
imageUrl: "", |
iconUrl: "", |
postCreate: function(){ |
this.titleNode.appendChild(document.createTextNode(this.title)); |
this.authorNode.appendChild(document.createTextNode(this.author)); |
this.descriptionNode.appendChild(document.createTextNode(this.description)); |
var href = document.createElement("a"); |
href.setAttribute("href", this.imageUrl); |
href.setAttribute("target", "_blank"); |
var imageTag = document.createElement("img"); |
imageTag.setAttribute("src", this.iconUrl); |
href.appendChild(imageTag); |
this.imageNode.appendChild(href); |
} |
}); |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/demo_FlickrRestStore.html |
---|
New file |
0,0 → 1,275 |
<!-- |
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> |
/trunk/api/js/dojo1.0/dojox/data/demos/picasaDemo.css |
---|
New file |
0,0 → 1,44 |
.picasaView { |
padding: 3 3 3 3; |
border-width: 1px; |
border-style: solid; |
border-color: #000000; |
border-collapse: separate; |
width: 100%; |
} |
.picasaView th { |
text-align: left; |
} |
.picasaView tr { |
padding: 3 3 3 3; |
border-width: 1px; |
border-style: solid; |
border-color: #000000; |
} |
.picasaView tr td { |
padding: 3 3 3 3; |
border-width: 1px; |
border-style: solid; |
border-color: #000000; |
} |
.picasaView { |
background-color: #EFEFEF; |
float: left; |
width: 250px; |
height: 250px; |
} |
.picasaSummary { |
width: 250px; |
height: 30px; |
overflow: hidden; |
} |
.picasaTitle { |
background-color: #CCCCCC; |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/demo_DataDemoTable.html |
---|
New file |
0,0 → 1,130 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
"http://www.w3.org/TR/html4/strict.dtd"> |
<html> |
<head> |
<title>Dojo Visual Loader Test</title> |
<style type="text/css"> |
@import "../../../dojo/resources/dojo.css"; |
@import "../../../dijit/themes/tundra/tundra.css"; |
@import "../../../dijit/themes/dijit.css"; |
@import "../../../dijit/tests/css/dijitTests.css"; |
.oddRow { background-color: #f2f5f9; } |
.population { text-align: right; } |
</style> |
<script type="text/javascript" src="../../../dojo/dojo.js" |
djConfig="isDebug: false, parseOnLoad: true"></script> |
<script type="text/javascript"> |
dojo.require("dijit.dijit"); |
dojo.require("dojo.parser"); |
dojo.require("dijit.Declaration"); |
dojo.require("dojo.data.ItemFileReadStore"); |
dojo.require("dojox.data.FlickrStore"); |
</script> |
</head> |
<body class="tundra"> |
<span dojoType="dojo.data.ItemFileReadStore" |
jsId="continentStore" |
url="../../../dijit/tests/_data/countries.json"></span> |
<span dojoType="dojox.data.FlickrStore" jsId="flickrStore"></span> |
<h1 class="testTitle">Dojox Data Demo Table</h1> |
<table dojoType="dijit.Declaration" |
widgetClass="demo.Table" class="dojoTabular" |
defaults="{ store: null, query: { query: { name: '*' } }, columns: [ { name: 'Name', attribute: 'name' } ] }"> |
<thead dojoAttachPoint="head"> |
<tr dojoAttachPoint="headRow"></tr> |
</thead> |
<tbody dojoAttachPoint="body"> |
<tr dojoAttachPoint="row"> |
</tr> |
</tbody> |
<script type="dojo/method"> |
dojo.forEach(this.columns, function(item, idx){ |
var icn = item.className||""; |
// add a header for each column |
var tth = document.createElement("th"); |
tth.innerHTML = item.name; |
tth.className = icn; |
dojo.connect(tth, "onclick", dojo.hitch(this, "onSort", idx)); |
this.headRow.appendChild(tth); |
// and fill in the column cell in the template row |
this.row.appendChild(document.createElement("td")); |
this.row.lastChild.className = icn; |
}, this); |
this.runQuery(); |
</script> |
<script type="dojo/method" event="onSort" args="index"> |
var ca = this.columns[index].attribute; |
var qs = this.query.sort; |
// clobber an existing sort arrow |
dojo.query("> th", this.headRow).styles("background", "").styles("paddingRight", ""); |
if(qs && qs[0].attribute == ca){ |
qs[0].descending = !qs[0].descending; |
}else{ |
this.query.sort = [{ |
attribute: ca, |
descending: false |
}]; |
} |
var th = dojo.query("> th", this.headRow)[index]; |
th.style.paddingRight = "16px"; // space for the sort arrow |
th.style.background = "url(\""+dojo.moduleUrl("dijit", "themes/tundra/images/arrow"+(this.query.sort[0].descending ? "Up" : "Down")+((dojo.isIE == 6) ? ".gif" : ".png")) + "\") no-repeat 98% 4px"; |
this.runQuery(); |
</script> |
<script type="dojo/method" event="runQuery"> |
this.query.onBegin = dojo.hitch(this, function(){ dojo.query("tr", this.body).orphan(); }); |
this.query.onItem = dojo.hitch(this, "onItem"); |
this.query.onComplete = dojo.hitch(this, function(){ |
dojo.query("tr:nth-child(odd)", this.body).addClass("oddRow"); |
dojo.query("tr:nth-child(even)", this.body).removeClass("oddRow"); |
}); |
this.store.fetch(this.query); |
</script> |
<script type="dojo/method" event="onItem" args="item"> |
var tr = this.row.cloneNode(true); |
dojo.query("td", tr).forEach(function(n, i, a){ |
var tc = this.columns[i]; |
var tv = this.store.getValue(item, tc.attribute)||""; |
if(tc.format){ tv = tc.format(tv, item, this.store); } |
n.innerHTML = tv; |
}, this); |
this.body.appendChild(tr); |
</script> |
</table> |
<span dojoType="demo.Table" store="continentStore" |
query="{ query: { type: 'country' }, sort: [ { attribute: 'name', descending: true } ] }" |
id="foo"> |
<script type="dojo/method" event="preamble"> |
this.columns = [ |
{ name: "Name", attribute: "name" }, |
{ name: "Population", |
attribute: "population", |
className: "population" |
} |
]; |
</script> |
</span> |
<span dojoType="demo.Table" store="continentStore" |
query="{ query: { name: 'A*' } }"></span> |
<span dojoType="demo.Table" store="flickrStore" |
query="{ query: { tags: '3dny' } }"> |
<script type="dojo/method" event="preamble"> |
this.columns = [ |
{ name: "", attribute: "imageUrlSmall", |
format: function(value, item, store){ |
return (value.length) ? "<img src='"+value+"'>" : ""; |
} |
}, |
{ name: "Title", attribute: "title" } |
]; |
</script> |
</span> |
</body> |
</html> |
/trunk/api/js/dojo1.0/dojox/data/demos/geography.json |
---|
New file |
0,0 → 1,45 |
{ identifier: 'name', |
label: 'name', |
items: [ |
{ name:'Africa', type:'continent', children:[ |
{ name:'Egypt', type:'country' }, |
{ name:'Kenya', type:'country', children:[ |
{ name:'Nairobi', type:'city' }, |
{ name:'Mombasa', type:'city' } ] |
}, |
{ name:'Sudan', type:'country', children: |
{ name:'Khartoum', type:'city' } |
} ] |
}, |
{ name:'Asia', type:'continent', children:[ |
{ name:'China', type:'country' }, |
{ name:'India', type:'country' }, |
{ name:'Russia', type:'country' }, |
{ name:'Mongolia', type:'country' } ] |
}, |
{ name:'Australia', type:'continent', population:'21 million', children: |
{ name:'Commonwealth of Australia', type:'country', population:'21 million'} |
}, |
{ name:'Europe', type:'continent', children:[ |
{ name:'Germany', type:'country' }, |
{ name:'France', type:'country' }, |
{ name:'Spain', type:'country' }, |
{ name:'Italy', type:'country' } ] |
}, |
{ name:'North America', type:'continent', children:[ |
{ name:'Mexico', type:'country', population:'108 million', area:'1,972,550 sq km', children:[ |
{ name:'Mexico City', type:'city', population:'19 million', timezone:'-6 UTC'}, |
{ name:'Guadalajara', type:'city', population:'4 million', timezone:'-6 UTC' } ] |
}, |
{ name:'Canada', type:'country', population:'33 million', area:'9,984,670 sq km', children:[ |
{ name:'Ottawa', type:'city', population:'0.9 million', timezone:'-5 UTC'}, |
{ name:'Toronto', type:'city', population:'2.5 million', timezone:'-5 UTC' }] |
}, |
{ name:'United States of America', type:'country' } ] |
}, |
{ name:'South America', type:'continent', children:[ |
{ name:'Brazil', type:'country', population:'186 million' }, |
{ name:'Argentina', type:'country', population:'40 million' } ] |
} ] |
} |
/trunk/api/js/dojo1.0/dojox/data/demos/demo_FlickrStore.html |
---|
New file |
0,0 → 1,199 |
<!-- |
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("dijit.Tree"); |
dojo.require("dojox.data.FlickrStore"); |
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: {}, |
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(countWidget){ |
request.count = countWidget.getValue(); |
} |
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: 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. |
</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> |
</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> |
<hr/> |
<div dojoType="dojox.data.FlickrStore" jsId="flickrStore" label="title"></div> |
<div dojoType="dojox.data.demos.widgets.FlickrViewList" id="flickrViews" jsId="flickrViewsWidget"></div> |
</body> |
</html> |
/trunk/api/js/dojo1.0/dojox/data/demos/stores/LazyLoadJSIStore.js |
---|
New file |
0,0 → 1,142 |
if(!dojo._hasResource["dojox.data.demos.stores.LazyLoadJSIStore"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. |
dojo._hasResource["dojox.data.demos.stores.LazyLoadJSIStore"] = true; |
dojo.provide("dojox.data.demos.stores.LazyLoadJSIStore"); |
dojo.require("dojo.data.ItemFileReadStore"); |
dojo.declare("dojox.data.demos.stores.LazyLoadJSIStore", dojo.data.ItemFileReadStore, { |
constructor: function(/* object */ keywordParameters){ |
// LazyLoadJSIStore extends ItemFileReadStore to implement an |
// example of lazy-loading/faulting in items on-demand. |
// Note this is certianly not a perfect implementation, it is |
// an example. |
}, |
isItemLoaded: function(/*object*/ item) { |
// summary: |
// Overload of the isItemLoaded function to look for items of type 'stub', which indicate |
// the data hasn't been loaded in yet. |
// |
// item: |
// The item to examine. |
//For this store, if it has the value of stub for its type attribute, |
//then the item basn't been fully loaded yet. It's just a placeholder. |
if(this.getValue(item, "type") === "stub"){ |
return false; |
} |
return true; |
}, |
loadItem: function(keywordArgs){ |
// summary: |
// Overload of the loadItem function to fault in items. This assumes the data for an item is laid out |
// in a RESTful sort of pattern name0/name1/data.json and so on and uses that to load the data. |
// It will also detect stub items in the newly loaded item and insert the stubs into the ItemFileReadStore |
// list so they can also be loaded in on-demand. |
// |
// item: |
// The item to examine. |
var item = keywordArgs.item; |
this._assertIsItem(item); |
//Build the path to the data.json for this item |
//The path consists of where its parent was loaded from |
//plus the item name. |
var itemName = this.getValue(item, "name"); |
var parent = this.getValue(item, "parent"); |
var dataUrl = ""; |
if (parent){ |
dataUrl += (parent + "/"); |
} |
//For this store, all child input data is loaded from a url that ends with data.json |
dataUrl += itemName + "/data.json"; |
//Need a reference to the store to call back to its structures. |
var self = this; |
// Callback for handling a successful load. |
var gotData = function(data){ |
//Now we need to modify the existing item a bit to take it out of stub state |
//Since we extend the store and have knowledge of the internal |
//structure, this can be done here. Now, is we extended |
//a write store, we could call the write APIs to do this too |
//But for a simple demo the diretc modification in the store function |
//is sufficient. |
//Clear off the stub indicators. |
delete item.type; |
delete item.parent; |
//Set up the loaded values in the format ItemFileReadStore uses for attributes. |
for (i in data) { |
if (dojo.isArray(data[i])) { |
item[i] = data[i]; |
}else{ |
item[i] = [data[i]]; |
} |
} |
//Reset the item in the reference. |
self._arrayOfAllItems[item[self._itemNumPropName]] = item; |
//Scan the new values in the item for extra stub items we need to |
//add to the items array of the store so they can be lazy-loaded later... |
var attributes = self.getAttributes(item); |
for(i in attributes){ |
var values = self.getValues(item, attributes[i]); |
for (var j = 0; j < values.length; j++) { |
var value = values[j]; |
if(typeof value === "object"){ |
if(value["stub"] ){ |
//We have a stub reference here, we need to create the stub item |
var stub = { |
type: ["stub"], |
name: [value["stub"]], // |
parent: [itemName] //The child stub item is parented by this item name... |
}; |
if (parent) { |
//Add in any parents to your parent so URL construstruction is accurate. |
stub.parent[0] = parent + "/" + stub.parent[0]; |
} |
//Finalize the addition of the new stub item into the ItemFileReadStore list. |
self._arrayOfAllItems.push(stub); |
stub[self._storeRefPropName] = self; |
stub[self._itemNumPropName] = (self._arrayOfAllItems.length - 1); //Last one pushed in should be the item |
values[j] = stub; //Set the stub item back in its place and replace the stub notation. |
} |
} |
} |
} |
//Done processing! Call the onItem, if any. |
if(keywordArgs.onItem){ |
var scope = keywordArgs.scope ? keywordArgs.scope : dojo.global; |
keywordArgs.onItem.call(scope, item); |
} |
}; |
//Callback for any errors that occur during load. |
var gotError = function(error){ |
//Call the onComplete, if any |
if(keywordArgs.onError){ |
var scope = keywordArgs.scope ? keywordArgs.scope : dojo.global; |
keywordArgs.onError.call(scope, error); |
} |
}; |
//Fire the get and pass the proper callbacks to the deferred. |
var xhrArgs = { |
url: dataUrl, |
handleAs: "json-comment-optional" |
}; |
var d = dojo.xhrGet(xhrArgs); |
d.addCallback(gotData); |
d.addErrback(gotError); |
} |
}); |
} |