/public/javascripts/dojo/release/dojo/dojox/wire/demos/markup/demo_FlickrStoreWire.html

http://enginey.googlecode.com/ · HTML · 227 lines · 173 code · 18 blank · 36 comment · 0 complexity · d2b56e0ec834b58aea99ecbd13cca385 MD5 · raw file 

    

  1. <!--
    2. 

  2.   This file is a demo of the FlickrStore, a simple wrapper to the public feed service
    3. 

  3.   of Flickr.  This just does very basic queries against Flickr and loads the results
    4. 

  4.   into a list viewing widget.
    5. 

  5. -->
    6. 

  6. <html>
    7. 

  7. <head>
    8. 

  8. 	<title>Demo of FlickrStore</title>
    9. 

  9. 	<style type="text/css">
    10. 

  10. 

  11. 		@import "../../../../dijit/themes/tundra/tundra.css";
    12. 

  12. 		@import "../../../../dojo/resources/dojo.css";
    13. 

  13. 		@import "../../../../dijit/tests/css/dijitTests.css";
    14. 

  14. 		@import "./flickrDemo.css";
    15. 

  15. 	</style>
    16. 

  16. 

  17. 	<script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug: true, parseOnLoad: true"></script>
    18. 

  18. 	<script type="text/javascript">
    19. 

  19. 		dojo.require("dojo.parser");
    20. 

  20. 		dojo.require("dijit.form.TextBox");
    21. 

  21. 		dojo.require("dijit.form.Button");
    22. 

  22. 		dojo.require("dijit.form.ComboBox");
    23. 

  23. 		dojo.require("dijit.form.NumberSpinner");
    24. 

  24. 		dojo.require("dojox.data.FlickrStore");
    25. 

  25. 		dojo.require("dojox.wire.ml.Invocation");
    26. 

  26. 		dojo.require("dojox.wire.ml.Transfer");
    27. 

  27. 		dojo.require("dojox.wire.ml.Data");
    28. 

  28. 		dojo.require("dojox.wire");
    29. 

  29. 		dojo.require("dojox.data.demos.widgets.FlickrViewList");
    30. 

  30. 

  31. 		//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
    32. 

  32. 		// to trap on for triggering other events.
    33. 

  33. 		var dataHolder = {
    34. 

  34. 			//Simple stub datastore request
    35. 

  35. 			request: {query: {}}
    36. 

  36. 		};
    37. 

  37. 

  38. 		//Function to convert the input from a widget into a comma separated list.
    39. 

  39. 		//that is the format of the store parameter.
    40. 

  40. 		var tagsInputConverter = function(tags){
    41. 

  41. 			if(tags && tags !== ""){
    42. 

  42. 				var tagsArray = tags.split(" ");
    43. 

  43. 				tags = "";
    44. 

  44. 				for(var i = 0; i < tagsArray.length; i++){
    45. 

  45. 					tags = tags + tagsArray[i];
    46. 

  46. 					if(i < (tagsArray.length - 1)){
    47. 

  47. 						tags += ","
    48. 

  48. 					}
    49. 

  49. 				}
    50. 

  50. 			}
    51. 

  51. 			return tags
    52. 

  52. 		}
    53. 

  53. 	</script>
    54. 

  54. </head>
    55. 

  55. 

  56. <body class="tundra">
    57. 

  57. 	<h1>
    58. 

  58. 		DEMO:  FlickrStore Search
    59. 

  59. 	</h1>
    60. 

  60. 	<hr>
    61. 

  61. 	<h3>
    62. 

  62. 		Description:
    63. 

  63. 	</h3>
    64. 

  64. 	<p>
    65. 

  65. 		This simple demo shows how services, such as Flickr, can be wrapped by the datastore API.  In this demo, you can search public 
    66. 

  66. 		Flickr images through a simple FlickrStore by specifying a series of tags (separated by spaces) to search on.  The results 
    67. 

  67. 		will be displayed below the search box.  This demo is the same as the example demo provided in dojox/data/demos/demo_FlickrStore.html, 
    68. 

  68. 		except that all the interactions are implemented via Wire instead of a script that runs at dojo.addOnLoad().
    69. 

  69. 	</p>
    70. 

  70. 	<p>
    71. 

  71. 		For fun, search on the 3dny tag!
    72. 

  72. 	</p>
    73. 

  73. 

  74. 	<blockquote>
    75. 

  75. 

  76. 	<!--
    77. 

  77. 		Layout.
    78. 

  78. 	-->
    79. 

  79. 	<table>
    80. 

  80. 		<tbody>
    81. 

  81. 			<tr>
    82. 

  82. 				<td>
    83. 

  83. 					<b>Status:</b>
    84. 

  84. 				</td>
    85. 

  85. 				<td>
    86. 

  86. 					<div dojoType="dijit.form.TextBox" size="50" id="status" jsId="statusWidget" disabled="true"></div>
    87. 

  87. 				</td>
    88. 

  88. 			</tr>
    89. 

  89. 			<tr>
    90. 

  90. 				<td>
    91. 

  91. 					<b>ID:</b>
    92. 

  92. 				</td>
    93. 

  93. 				<td>
    94. 

  94. 					<div dojoType="dijit.form.TextBox" size="50" id="userid" jsId="idWidget"></div>
    95. 

  95. 				</td>
    96. 

  96. 			</tr>
    97. 

  97. 			<tr>
    98. 

  98. 				<td>
    99. 

  99. 					<b>Tags:</b>
    100. 

  100. 				</td>
    101. 

  101. 				<td>
    102. 

  102. 					<div dojoType="dijit.form.TextBox" size="50" id="tags" jsId="tagsWidget" value="3dny"></div>
    103. 

  103. 				</td>
    104. 

  104. 			</tr>
    105. 

  105. 			<tr>
    106. 

  106. 				<td>
    107. 

  107. 					<b>Tagmode:</b>
    108. 

  108. 				</td>
    109. 

  109. 				<td>
    110. 

  110. 					<select id="tagmode"
    111. 

  111. 							jsId="tagmodeWidget"
    112. 

  112. 							dojoType="dijit.form.ComboBox"
    113. 

  113. 							autocomplete="false"
    114. 

  114. 							value="any"
    115. 

  115. 					>
    116. 

  116. 						<option>any</option>
    117. 

  117. 						<option>all</option>
    118. 

  118. 					</select>
    119. 

  119. 				</td>
    120. 

  120. 			</tr>
    121. 

  121. 			<tr>
    122. 

  122. 				<td>
    123. 

  123. 					<b>Number of Pictures:</b>
    124. 

  124. 				</td>
    125. 

  125. 				<td>
    126. 

  126. 					<div   
    127. 

  127. 						id="count"
    128. 

  128. 						jsId="countWidget"
    129. 

  129. 						dojoType="dijit.form.NumberSpinner"
    130. 

  130. 						value="20"
    131. 

  131. 						constraints="{min:1,max:20,places:0}" 
    132. 

  132. 					></div>
    133. 

  133. 				</td>
    134. 

  134. 			</tr>
    135. 

  135. 			<tr>
    136. 

  136. 				<td>
    137. 

  137. 				</td>
    138. 

  138. 				<td>
    139. 

  139. 					<div dojoType="dijit.form.Button" label="Search" id="searchButton" jsId="searchButtonWidget"></div>
    140. 

  140. 				</td>
    141. 

  141. 			</tr>
    142. 

  142. 		</tbody>
    143. 

  143. 	</table>
    144. 

  144.     </blockquote>
    145. 

  145. 	<!--
    146. 

  146. 		The store instance used by this demo.
    147. 

  147. 	-->
    148. 

  148. 	<div dojoType="dojox.data.FlickrStore" jsId="flickrStore" label="title"></div>
    149. 

  149. 	<div dojoType="dojox.data.demos.widgets.FlickrViewList" store="flickrStore" id="flickrViews" jsId="flickrViewsWidget"></div>
    150. 

  150. 

  151. 	<!-------------------------------- Using dojox.wire, declaratively wire up the widgets. --------------------------->
    152. 

  152. 

  153. 	<!--
    154. 

  154. 		This is an example of using the declarative data value definition.
    155. 

  155. 		These are effectively declarative variables to act as placeholders
    156. 

  156. 		for data values.
    157. 

  157. 	-->
    158. 

  158. 	<div dojoType="dojox.wire.ml.Data"
    159. 

  159. 		id="messageData"
    160. 

  160. 		jsId="messageData">
    161. 

  161. 		<div dojoType="dojox.wire.ml.DataProperty"
    162. 

  162. 			name="processingStart"
    163. 

  163. 			value="PROCESSING REQUEST">
    164. 

  164. 		</div>
    165. 

  165. 		<div dojoType="dojox.wire.ml.DataProperty"
    166. 

  166. 			name="processingDone"
    167. 

  167. 			value="PROCESSING COMPLETE">
    168. 

  168. 		</div>
    169. 

  169. 	</div>
    170. 

  170. 

  171. 

  172. 	<!-- 
    173. 

  173. 		When the search button is clicked, do the following in order:
    174. 

  174. 		1.)  Map the widget values over to the request properties.
    175. 

  175. 		2.)  Set the status to processing
    176. 

  176. 		3.)  Invoke the fetch on the  FLickrList to repopulate the table.
    177. 

  177. 	-->
    178. 

  178. 	<div dojoType="dojox.wire.ml.Action"
    179. 

  179. 		trigger="searchButtonWidget"
    180. 

  180. 		triggerEvent="onClick">
    181. 

  181. 		
    182. 

  182. 		<!-- 
    183. 

  183. 			Read in the values from the widgets and bind them to the appropriate data locations
    184. 

  184.             The Transfer tag looks for a getter property before using direct access, so it calls
    185. 

  185.             getValue() to get the data from the widget, which works well for the dijit.form.* widgets.
    186. 

  186. 		-->
    187. 

  187. 		<div dojoType="dojox.wire.ml.Transfer" 
    188. 

  188. 			 source="idWidget.value" 
    189. 

  189. 			 target="dataHolder.request.query.id">
    190. 

  190. 		</div>
    191. 

  191. 

  192. 		<!--
    193. 

  193. 		   For the tags, we need to get the value and then perform a conversion on the result
    194. 

  194. 		   This is done by doing a transfer through a converter.
    195. 

  195. 		-->
    196. 

  196. 		<div dojoType="dojox.wire.ml.Transfer" 
    197. 

  197. 			 source="tagsWidget.value" 
    198. 

  198. 			 target="dataHolder.request.query.tags"
    199. 

  199.              converter="tagsInputConverter">
    200. 

  200. 		</div>
    201. 

  201.         
    202. 

  202. 		<div dojoType="dojox.wire.ml.Transfer" 
    203. 

  203. 			 source="tagmodeWidget.value" 
    204. 

  204. 			 target="dataHolder.request.query.tagmode">
    205. 

  205. 		</div>
    206. 

  206. 

  207. 		<div dojoType="dojox.wire.ml.Transfer" 
    208. 

  208. 			 source="countWidget.value" 
    209. 

  209. 			 target="dataHolder.request.count">
    210. 

  210. 		</div>
    211. 

  211. 

  212. 		<!-- Now invoke the actions in order. -->
    213. 

  213. 		<div dojoType="dojox.wire.ml.Transfer" target="statusWidget.value" source="messageData.processingStart"></div>
    214. 

  214. 		<div dojoType="dojox.wire.ml.Invocation" object="flickrViewsWidget" method="fetch" parameters="dataHolder.request"></div>
    215. 

  215. 	</div>    
    216. 

  216. 

  217. 	<!-- 
    218. 

  218. 		When the fetch processing finishes (onComplete is called), then set status to complete.
    219. 

  219. 	-->
    220. 

  220. 	<div dojoType="dojox.wire.ml.Action"
    221. 

  221. 		trigger="flickrViewsWidget"
    222. 

  222. 		triggerEvent="onComplete">
    223. 

  223. 		<div dojoType="dojox.wire.ml.Transfer" target="statusWidget.value" source="messageData.processingDone"></div>
    224. 

  224. 	</div>    
    225. 

  225. 

  226. </body>
    227. 

  227. </html>
    228.