Subversion Repositories Applications.papyrus

Rev

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("dojox.data.FlickrStore");
25 
		dojo.require("dojox.wire.ml.Invocation");
26 
		dojo.require("dojox.wire.ml.Transfer");
27 
		dojo.require("dojox.wire.ml.Data");
28 
		dojo.require("dojox.wire");
29 
		dojo.require("dojox.data.demos.widgets.FlickrViewList");
30 
		dojo.require("dojox.data.demos.widgets.FlickrView");
31 
 
32 
		//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
33 
		// to trap on for triggering other events.
34 
		var dataHolder = {
35 
			//Simple stub datastore request
36 
			request: {query: {}, onItem: function(item, req){}, onComplete: function(items, req){}},
37 
 
38 
			//Spot to store off data values as they're generated by the declarative binding.
39 
			result: null
40 
		};
41 
 
42 
		//Function to convert the input from a widget into a comma separated list.
43 
		//that is the format of the store parameter.
44 
		var tagsInputConverter = function(tags){
45 
			if(tags && tags !== ""){
46 
				var tagsArray = tags.split(" ");
47 
				tags = "";
48 
				for(var i = 0; i < tagsArray.length; i++){
49 
					tags = tags + tagsArray[i];
50 
					if(i < (tagsArray.length - 1)){
51 
						tags += ","
52 
					}
53 
				}
54 
			}
55 
			return tags
56 
		}
57 
 
58 
	</script>
59 
</head>
60 
 
61 
<body class="tundra">
62 
	<h1>
63 
		DEMO:  FlickrStore Search
64 
	</h1>
65 
	<hr>
66 
	<h3>
67 
		Description:
68 
	</h3>
69 
	<p>
70 
		This simple demo shows how services, such as Flickr, can be wrapped by the datastore API.  In this demo, you can search public
71 
		Flickr images through a simple FlickrStore by specifying a series of tags (separated by spaces) to search on.  The results
72 
		will be displayed below the search box.  This demo is the same as the example demo provided in dojox/data/demos/demo_FlickrStore.html,
73 
		except that all the interactions are implemented via Wire instead of a script that runs at dojo.addOnLoad().
74 
	</p>
75 
	<p>
76 
		For fun, search on the 3dny tag!
77 
	</p>
78 
 
79 
	<blockquote>
80 
 
81 
	<!--
82 
		Layout.
83 
	-->
84 
	<table>
85 
		<tbody>
86 
			<tr>
87 
				<td>
88 
					<b>Status:</b>
89 
				</td>
90 
				<td>
91 
					<div dojoType="dijit.form.TextBox" size="50" id="status" jsId="statusWidget" disabled="true"></div>
92 
				</td>
93 
			</tr>
94 
			<tr>
95 
				<td>
96 
					<b>ID:</b>
97 
				</td>
98 
				<td>
99 
					<div dojoType="dijit.form.TextBox" size="50" id="userid" jsId="idWidget"></div>
100 
				</td>
101 
			</tr>
102 
			<tr>
103 
				<td>
104 
					<b>Tags:</b>
105 
				</td>
106 
				<td>
107 
					<div dojoType="dijit.form.TextBox" size="50" id="tags" jsId="tagsWidget" value="3dny"></div>
108 
				</td>
109 
			</tr>
110 
			<tr>
111 
				<td>
112 
					<b>Tagmode:</b>
113 
				</td>
114 
				<td>
115 
					<select id="tagmode"
116 
							jsId="tagmodeWidget"
117 
							dojoType="dijit.form.ComboBox"
118 
							autocomplete="false"
119 
							value="any"
120 
					>
121 
						<option>any</option>
122 
						<option>all</option>
123 
					</select>
124 
				</td>
125 
			</tr>
126 
			<tr>
127 
				<td>
128 
					<b>Number of Pictures:</b>
129 
				</td>
130 
				<td>
131 
					<div
132 
						id="count"
133 
						jsId="countWidget"
134 
						dojoType="dijit.form.NumberSpinner"
135 
						value="20"
136 
						constraints="{min:1,max:20,places:0}"
137 
					></div>
138 
				</td>
139 
			</tr>
140 
			<tr>
141 
				<td>
142 
				</td>
143 
				<td>
144 
					<div dojoType="dijit.form.Button" label="Search" id="searchButton" jsId="searchButtonWidget"></div>
145 
				</td>
146 
			</tr>
147 
		</tbody>
148 
	</table>
149 
    </blockquote>
150 
	<!--
151 
		The store instance used by this demo.
152 
	-->
153 
	<div dojoType="dojox.data.FlickrStore" jsId="flickrStore" label="title"></div>
154 
	<div dojoType="dojox.data.demos.widgets.FlickrViewList" id="flickrViews" jsId="flickrViewsWidget"></div>
155 
 
156 
	<!-------------------------------- Using dojox.wire, declaratively wire up the widgets. --------------------------->
157 
 
158 
 
159 
	<!--
160 
		This is an example of using the declarative data value definition.
161 
		These are effectively declarative variables to act as placeholders
162 
		for data values.
163 
	-->
164 
	<div dojoType="dojox.wire.ml.Data"
165 
		id="messageData"
166 
		jsId="messageData">
167 
		<div dojoType="dojox.wire.ml.DataProperty"
168 
			name="processingStart"
169 
			value="PROCESSING REQUEST">
170 
		</div>
171 
		<div dojoType="dojox.wire.ml.DataProperty"
172 
			name="processingDone"
173 
			value="PROCESSING COMPLETE">
174 
		</div>
175 
	</div>
176 
 
177 
 
178 
	<!--
179 
		When the search button is clicked, do the following in order:
180 
		1.)  Map the widget values over to the request properties.
181 
		2.)  Clear existing rows from table,
182 
		3.)  Set the status to processing
183 
		4.)  Invoke the fetch to repopulate the table.
184 
	-->
185 
	<div dojoType="dojox.wire.ml.Action"
186 
		trigger="searchButtonWidget"
187 
		triggerEvent="onClick">
188 
 
189 
		<!--
190 
			Read in the values from the widgets and bind them to the appropriate data locations
191 
			For basic properties, you could use transfer directly, but since the text boxes are
192 
			designed to be accessed through getValue/setValue, it's better to do these as
193 
			Invocations on widget methods.
194 
		-->
195 
		<div dojoType="dojox.wire.ml.Invocation"
196 
			 object="idWidget"
197 
			 method="getValue"
198 
			 result="dataHolder.request.query.id">
199 
		</div>
200 
 
201 
 
202 
		<!--
203 
		   For the tags, we need to get the value and then perform a conversion on the result
204 
		   This is done by doing an invoke, then a transfer through a converter.
205 
		-->
206 
		<div dojoType="dojox.wire.ml.Invocation"
207 
			 object="tagsWidget"
208 
			 method="getValue"
209 
			 result="dataHolder.request.query.tags">
210 
		</div>
211 
		<div dojoType="dojox.wire.ml.Transfer"
212 
			source="dataHolder.request.query.tags"
213 
			target="dataHolder.request.query.tags"
214 
			converter="tagsInputConverter">
215 
		</div>
216 
 
217 
		<div dojoType="dojox.wire.ml.Invocation"
218 
			 object="tagmodeWidget"
219 
			 method="getValue"
220 
			 result="dataHolder.request.query.tagmode">
221 
		</div>
222 
 
223 
		<div dojoType="dojox.wire.ml.Invocation"
224 
			 object="countWidget"
225 
			 method="getValue"
226 
			 result="dataHolder.request.count">
227 
		</div>
228 
 
229 
 
230 
		<!-- Now invoke the actions in order. -->
231 
		<div dojoType="dojox.wire.ml.Invocation" object="flickrViewsWidget" method="clearList"></div>
232 
		<div dojoType="dojox.wire.ml.Invocation" object="statusWidget" method="setValue" parameters="messageData.processingStart"></div>
233 
		<div dojoType="dojox.wire.ml.Invocation" object="flickrStore" method="fetch" parameters="dataHolder.request"></div>
234 
	</div>
235 
 
236 
	<!--
237 
		When the fetch processing finishes (onComplete is called), then set status to complete.
238 
	-->
239 
	<div dojoType="dojox.wire.ml.Action"
240 
		trigger="dataHolder.request"
241 
		triggerEvent="onComplete">
242 
		<div dojoType="dojox.wire.ml.Invocation" object="statusWidget" method="setValue" parameters="messageData.processingDone"></div>
243 
	</div>
244 
 
245 
 
246 
	<!--
247 
		On the call of the onItem function of 'dataHolder', trigger a binding/mapping of the
248 
		item's attributes to the requires parameters that are passed into addView.  In this case
249 
		FlikrItemAttribute  ->  viewItemParam
250 
		title                   title
251 
		imageUrlSmall           iconUrl
252 
		imageUrl                imageUrl
253 
		author                  author
254 
 
255 
		Then take the result of the data mapping and pass it into the invoke of the addView function on the
256 
		FlickerViews widget.
257 
	-->
258 
	<div dojoType="dojox.wire.ml.Action"
259 
		trigger="dataHolder.request" triggerEvent="onItem">
260 
		<div dojoType="dojox.wire.ml.Transfer"
261 
			source="arguments[0]" sourceStore="flickrStore"
262 
			target="dataHolder.result">
263 
			<!--
264 
				Map the attributes of the items to the property name defined
265 
				in the wire on the object in the target
266 
			-->
267 
			<div dojoType="dojox.wire.ml.ChildWire"
268 
				name="title" attribute="title"></div>
269 
			<div dojoType="dojox.wire.ml.ChildWire"
270 
				name="imageUrl" attribute="imageUrl"></div>
271 
			<div dojoType="dojox.wire.ml.ChildWire"
272 
				name="iconUrl" attribute="imageUrlSmall"></div>
273 
			<div dojoType="dojox.wire.ml.ChildWire"
274 
				name="author" attribute="author"></div>
275 
		</div>
276 
		<div dojoType="dojox.wire.ml.Invocation"
277 
			object="flickrViewsWidget" method="addView" parameters='dataHolder.result'>
278 
		</div>
279 
	</div>
280 
</body>
281 
</html>