Subversion Repositories Applications.papyrus

Rev

Go to most recent revision | Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
2150 mathias 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 FlickrStore</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.demos.widgets.FlickrViewList");
27 
		dojo.require("dojox.data.demos.widgets.FlickrView");
28 
 
29 
		function init(){
30 
			var fViewWidgets = [];
31 
 
32 
			//Set up an onComplete handler for flickrData
33 
			function onComplete(items, request){
34 
				flickrViewsWidget.clearList();
35 
				if(items.length > 0){
36 
					for(var i = 0; i < items.length; i++){
37 
						var flickrData = {
38 
							title: flickrStore.getValue(items[i],"title"),
39 
							author: flickrStore.getValue(items[i],"author"),
40 
							iconUrl: flickrStore.getValue(items[i],"imageUrlSmall"),
41 
							imageUrl: flickrStore.getValue(items[i],"imageUrl")
42 
						}
43 
						flickrViewsWidget.addView(flickrData);
44 
					}
45 
				}
46 
				statusWidget.setValue("PROCESSING COMPLETE.");
47 
 
48 
			}
49 
			//What to do if a search fails...
50 
			function onError(error, request){
51 
				flickrViewsWidget.clearList();
52 
				statusWidget.setValue("PROCESSING ERROR.");
53 
			}
54 
 
55 
			//Function to invoke the search of the FlickrStore
56 
			function invokeSearch(){
57 
				var request = {
58 
					query: {},
59 
					onComplete: onComplete,
60 
					onError: onError
61 
				};
62 
 
63 
				if(idWidget){
64 
					var userid = idWidget.getValue();
65 
					if(userid && userid !== ""){
66 
						request.query.userid = userid;
67 
					}
68 
				}
69 
				if(tagsWidget){
70 
					var tags = tagsWidget.getValue();
71 
					if(tags && tags !== ""){
72 
						var tagsArray = tags.split(" ");
73 
						tags = "";
74 
						for(var i = 0; i < tagsArray.length; i++){
75 
							tags = tags + tagsArray[i];
76 
							if(i < (tagsArray.length - 1)){
77 
								tags += ","
78 
							}
79 
						}
80 
						request.query.tags = tags;
81 
					}
82 
				}
83 
				if(tagmodeWidget){
84 
					var tagmode = tagmodeWidget.getValue();
85 
					if(tagmode !== ""){
86 
						request.query.tagmode = tagmode;
87 
					}
88 
				}
89 
 
90 
				if(countWidget){
91 
					request.count = countWidget.getValue();
92 
				}
93 
 
94 
				if(statusWidget){
95 
					statusWidget.setValue("PROCESSING REQUEST");
96 
				}
97 
 
98 
				flickrStore.fetch(request);
99 
			}
100 
 
101 
			//Lastly, link up the search event.
102 
			var button = dijit.byId("searchButton");
103 
			dojo.connect(button, "onClick", invokeSearch);
104 
		}
105 
		dojo.addOnLoad(init);
106 
	</script>
107 
</head>
108 
 
109 
<body class="tundra">
110 
	<h1>
111 
		DEMO:  FlickrStore Search
112 
	</h1>
113 
	<hr>
114 
	<h3>
115 
		Description:
116 
	</h3>
117 
	<p>
118 
		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.
119 
	</p>
120 
	<p>
121 
		For fun, search on the 3dny tag!
122 
	</p>
123 
 
124 
	<blockquote>
125 
 
126 
	<!--
127 
		The store instance used by this demo.
128 
	-->
129 
	<table>
130 
		<tbody>
131 
			<tr>
132 
				<td>
133 
					<b>Status:</b>
134 
				</td>
135 
				<td>
136 
					<div dojoType="dijit.form.TextBox" size="50" id="status" jsId="statusWidget" disabled="true"></div>
137 
				</td>
138 
			</tr>
139 
			<tr>
140 
				<td>
141 
					<b>ID:</b>
142 
				</td>
143 
				<td>
144 
					<div dojoType="dijit.form.TextBox" size="50" id="userid" jsId="idWidget"></div>
145 
				</td>
146 
			</tr>
147 
			<tr>
148 
				<td>
149 
					<b>Tags:</b>
150 
				</td>
151 
				<td>
152 
					<div dojoType="dijit.form.TextBox" size="50" id="tags" jsId="tagsWidget" value="3dny"></div>
153 
				</td>
154 
			</tr>
155 
			<tr>
156 
				<td>
157 
					<b>Tagmode:</b>
158 
				</td>
159 
				<td>
160 
					<select id="tagmode"
161 
							jsId="tagmodeWidget"
162 
							dojoType="dijit.form.ComboBox"
163 
							autocomplete="false"
164 
							value="any"
165 
					>
166 
						<option>any</option>
167 
						<option>all</option>
168 
					</select>
169 
				</td>
170 
			</tr>
171 
			<tr>
172 
				<td>
173 
					<b>Number of Pictures:</b>
174 
				</td>
175 
				<td>
176 
					<div
177 
						id="count"
178 
						jsId="countWidget"
179 
						dojoType="dijit.form.NumberSpinner"
180 
						value="20"
181 
						constraints="{min:1,max:20,places:0}"
182 
					></div>
183 
				</td>
184 
			</tr>
185 
			<tr>
186 
				<td>
187 
				</td>
188 
				<td>
189 
					<div dojoType="dijit.form.Button" label="Search" id="searchButton" jsId="searchButtonWidget"></div>
190 
				</td>
191 
			</tr>
192 
		</tbody>
193 
	</table>
194 
	<hr/>
195 
	<div dojoType="dojox.data.FlickrStore" jsId="flickrStore" label="title"></div>
196 
	<div dojoType="dojox.data.demos.widgets.FlickrViewList" id="flickrViews" jsId="flickrViewsWidget"></div>
197 
 
198 
</body>
199 
</html>