|
1 <!DOCTYPE html> |
|
2 <html lang="en"> |
|
3 <head> |
|
4 <meta charset="utf-8"> |
|
5 <title>Example: DataSource.Function</title> |
|
6 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
7 <link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
8 <link rel="stylesheet" href="../assets/css/main.css"> |
|
9 <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
10 <link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
11 <script src="../../build/yui/yui-min.js"></script> |
|
12 |
|
13 </head> |
|
14 <body> |
|
15 <!-- |
|
16 <a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
17 --> |
|
18 <div id="doc"> |
|
19 <div id="hd"> |
|
20 <h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
21 </div> |
|
22 |
|
23 |
|
24 <h1>Example: DataSource.Function</h1> |
|
25 <div class="yui3-g"> |
|
26 <div class="yui3-u-3-4"> |
|
27 <div id="main"> |
|
28 <div class="content"><style scoped> |
|
29 /* custom styles for this example */ |
|
30 #demo .output {margin-bottom:1em; padding:10px; border:1px solid #D9D9D9;} |
|
31 </style> |
|
32 |
|
33 <div class="intro"> |
|
34 <p>DataSource.Function allows the implementer to define a JavaScript function that returns data values, for maximum customizeability. A <a href="../dataschema/">DataSchema</a> plugin is used to normalize incoming data into a known format for consistency of usage by other components.</p> |
|
35 </div> |
|
36 |
|
37 <div class="example yui3-skin-sam"> |
|
38 <form id="demo"> |
|
39 <h4>Array</h4> |
|
40 <h6>Data</h6> |
|
41 <pre> |
|
42 [ |
|
43 {name:"abc",id:123}, |
|
44 {name:"def",id:456}, |
|
45 {name:"ghi",id:789} |
|
46 ] |
|
47 </pre> |
|
48 |
|
49 <h6>Schema</h6> |
|
50 <pre> |
|
51 { |
|
52 resultFields: ["name","id"] |
|
53 } |
|
54 </pre> |
|
55 |
|
56 <h6>Normalized data</h6> |
|
57 <input type="button" id="demo_array" value="Retrieve data"> |
|
58 <div id="demo_output_array" class="output"></div> |
|
59 |
|
60 <h4>JSON</h4> |
|
61 <h6>Data</h6> |
|
62 <pre> |
|
63 { |
|
64 "profile":{ |
|
65 "current":160, |
|
66 "target":150 |
|
67 }, |
|
68 "reference": [ |
|
69 { |
|
70 "category":"exercise", |
|
71 "type":"expenditure", |
|
72 "activities":[ |
|
73 {"name":"biking", "calories":550}, |
|
74 {"name":"golf", "calories":1000}, |
|
75 {"name":"running", "calories":650}, |
|
76 {"name":"swimming", "calories":650}, |
|
77 {"name":"walking", "calories":225} |
|
78 ] |
|
79 }, |
|
80 { |
|
81 "category":"nutrition", |
|
82 "type":"intake", |
|
83 "fruit":[ |
|
84 {"name":"apple", "calories":70}, |
|
85 {"name":"banana", "calories":70}, |
|
86 {"name":"orange", "calories":90}, |
|
87 ], |
|
88 "vegetables":[ |
|
89 {"name":"baked potato", "calories":150}, |
|
90 {"name":"broccoli", "calories":50}, |
|
91 {"name":"green beans", "calories":30} |
|
92 ] |
|
93 } |
|
94 ], |
|
95 "program": [ |
|
96 { |
|
97 "category":"exercise", |
|
98 "schedule":[ |
|
99 {"day":"sunday", "activity":"swimming"}, |
|
100 {"day":"monday", "activity":"running"}, |
|
101 {"day":"tuesday", "activity":"biking"}, |
|
102 {"day":"wednesday", "activity":"running"}, |
|
103 {"day":"thursday", "activity":"swimming"}, |
|
104 {"day":"friday", "activity":"running"}, |
|
105 {"day":"saturday", "activity":"golf"} |
|
106 ] |
|
107 }, |
|
108 { |
|
109 "category":"diet", |
|
110 "schedule":[ |
|
111 ] |
|
112 } |
|
113 ] |
|
114 } |
|
115 </pre> |
|
116 |
|
117 <h6>Schema</h6> |
|
118 <pre> |
|
119 { |
|
120 resultListLocator: "reference[1].fruit", |
|
121 resultFields: ["name","calories"] |
|
122 } |
|
123 </pre> |
|
124 |
|
125 <h6>Normalized data</h6> |
|
126 <input type="button" id="demo_json" value="Retrieve data"> |
|
127 <div id="demo_output_json" class="output"></div> |
|
128 </form> |
|
129 |
|
130 <script type="text/javascript"> |
|
131 YUI().use("dump", "node", "datasource-function", "datasource-arrayschema", "datasource-jsonschema", function (Y) { |
|
132 var myFunctionArray = function(request) { |
|
133 return [ |
|
134 {name:"abc",id:123}, |
|
135 {name:"def",id:456}, |
|
136 {name:"ghi",id:789} |
|
137 ]; |
|
138 }, |
|
139 myDataSourceArray = new Y.DataSource.Function({source:myFunctionArray}), |
|
140 myCallbackArray = { |
|
141 success: function(e){ |
|
142 Y.one("#demo_output_array").setHTML(Y.dump(e.response)); |
|
143 }, |
|
144 failure: function(e){ |
|
145 Y.one("#demo_output_array").setHTML("Could not retrieve data: " + e.error.message); |
|
146 } |
|
147 }; |
|
148 |
|
149 myDataSourceArray.plug(Y.Plugin.DataSourceArraySchema, { |
|
150 schema: { |
|
151 resultFields: ["name","id"] |
|
152 } |
|
153 }); |
|
154 |
|
155 Y.on("click", function(e){ |
|
156 myDataSourceArray.sendRequest({callback: myCallbackArray}); |
|
157 }, "#demo_array"); |
|
158 |
|
159 var myFunctionJSON = function(request) { |
|
160 return {"profile":{"current":160,"target":150},"reference": [{"category":"exercise","type":"expenditure","activities":[{"name":"biking", "calories":550},{"name":"golf", "calories":1000},{"name":"running", "calories":650},{"name":"swimming", "calories":650},{"name":"walking", "calories":225}]},{"category":"nutrition","type":"intake","fruit":[{"name":"apple", "calories":70},{"name":"banana", "calories":70},{"name":"orange", "calories":90},],"vegetables":[{"name":"baked potato", "calories":150},{"name":"broccoli", "calories":50},{"name":"green beans", "calories":30}]}],"program": [{"category":"exercise","schedule":[{"day":"sunday", "activity":"swimming"},{"day":"monday", "activity":"running"},{"day":"tuesday", "activity":"biking"},{"day":"wednesday", "activity":"running"},{"day":"thursday", "activity":"swimming"},{"day":"friday", "activity":"running"},{"day":"saturday", "activity":"golf"}]},{"category":"diet","schedule":[]}]}; |
|
161 }, |
|
162 myDataSourceJSON = new Y.DataSource.Function({source:myFunctionJSON}), |
|
163 myCallbackJSON = { |
|
164 success: function(e){ |
|
165 Y.one("#demo_output_json").setHTML(Y.dump(e.response)); |
|
166 }, |
|
167 failure: function(e){ |
|
168 Y.one("#demo_output_json").setHTML("Could not retrieve data: " + e.error.message); |
|
169 } |
|
170 }; |
|
171 |
|
172 myDataSourceJSON.plug(Y.Plugin.DataSourceJSONSchema, { |
|
173 schema: { |
|
174 resultListLocator: "reference[1].fruit", |
|
175 resultFields: ["name","calories"] |
|
176 } |
|
177 }); |
|
178 |
|
179 Y.on("click", function(e){ |
|
180 myDataSourceJSON.sendRequest({callback:myCallbackJSON}); |
|
181 }, "#demo_json"); |
|
182 }); |
|
183 |
|
184 </script> |
|
185 |
|
186 </div> |
|
187 |
|
188 <p>Your custom function can return arbitrary data, so use the appropriate schema plugin to normalize the data into a consistent format. Array data would use a DataSourceArraySchema plugin:</p> |
|
189 |
|
190 <pre class="code prettyprint">YUI().use("datasource-function", "datasource-arrayschema", function(Y) { |
|
191 var myFunction = function(request) { |
|
192 return [ |
|
193 {name:"abc",id:123}, |
|
194 {name:"def",id:456}, |
|
195 {name:"ghi",id:789} |
|
196 ]; |
|
197 }, |
|
198 myDataSource = new Y.DataSource.Function({source:myFunction}), |
|
199 myCallback = { |
|
200 success: function(e){ |
|
201 alert(e.response); |
|
202 }, |
|
203 failure: function(e){ |
|
204 alert("Could not retrieve data: " + e.error.message); |
|
205 } |
|
206 }; |
|
207 |
|
208 myDataSource.plug(Y.Plugin.DataSourceArraySchema, { |
|
209 schema: { |
|
210 resultFields: ["name","id"] |
|
211 } |
|
212 }); |
|
213 |
|
214 myDataSource.sendRequest({callback:myCallback}); |
|
215 });</pre> |
|
216 |
|
217 |
|
218 <p>Whereas JSON data would use a DataSourceJSONSchema plugin:</p> |
|
219 |
|
220 <pre class="code prettyprint">YUI().use("datasource-function", "datasource-jsonschema", function(Y) { |
|
221 var myFunction = function(request) { |
|
222 return { |
|
223 "profile":{ |
|
224 "current":160, |
|
225 "target":150 |
|
226 }, |
|
227 "reference": [ |
|
228 { |
|
229 ... |
|
230 }, |
|
231 { |
|
232 "category":"nutrition", |
|
233 "type":"intake", |
|
234 "fruit":[ |
|
235 {"name":"apple", "calories":70}, |
|
236 {"name":"banana", "calories":70}, |
|
237 {"name":"orange", "calories":90}, |
|
238 ], |
|
239 "vegetables":[ |
|
240 {"name":"baked potato", "calories":150}, |
|
241 {"name":"broccoli", "calories":50}, |
|
242 {"name":"green beans", "calories":30} |
|
243 ] |
|
244 } |
|
245 ], |
|
246 "program": [ |
|
247 ... |
|
248 ] |
|
249 }; |
|
250 }, |
|
251 myDataSource = new Y.DataSource.Function({source:myFunction}), |
|
252 myCallback = { |
|
253 success: function(e){ |
|
254 alert(e.response); |
|
255 }, |
|
256 failure: function(e){ |
|
257 alert("Could not retrieve data: " + e.error.message); |
|
258 } |
|
259 }; |
|
260 |
|
261 myDataSource.plug(Y.Plugin.DataSourceJSONSchema, { |
|
262 schema: { |
|
263 resultListLocator: "reference[1].fruit", |
|
264 resultFields: ["name","calories"] |
|
265 } |
|
266 }); |
|
267 |
|
268 myDataSource.sendRequest({callback:myCallback}); |
|
269 });</pre> |
|
270 |
|
271 |
|
272 </div> |
|
273 </div> |
|
274 </div> |
|
275 |
|
276 <div class="yui3-u-1-4"> |
|
277 <div class="sidebar"> |
|
278 |
|
279 |
|
280 |
|
281 <div class="sidebox"> |
|
282 <div class="hd"> |
|
283 <h2 class="no-toc">Examples</h2> |
|
284 </div> |
|
285 |
|
286 <div class="bd"> |
|
287 <ul class="examples"> |
|
288 |
|
289 |
|
290 <li data-description="The Local DataSource manages retrieval of in-page data, from JavaScript arrays and objects to DOM elements."> |
|
291 <a href="datasource-local.html">DataSource.Local</a> |
|
292 </li> |
|
293 |
|
294 |
|
295 |
|
296 <li data-description="The Get DataSource, which manages retrieval of data from remote sources via the Get Utility, can be useful for accessing data from cross-domain servers without the need for a proxy."> |
|
297 <a href="datasource-get.html">DataSource.Get</a> |
|
298 </li> |
|
299 |
|
300 |
|
301 |
|
302 <li data-description="The IO DataSource manages retrieval of data from remote sources, via the IO Utility."> |
|
303 <a href="datasource-io.html">DataSource.IO</a> |
|
304 </li> |
|
305 |
|
306 |
|
307 |
|
308 <li data-description="The Function DataSource, which manages retrieval of data from a JavaScript function, provides a highly customizeable mechanism for implementer-defined data retrieval algorithms"> |
|
309 <a href="datasource-function.html">DataSource.Function</a> |
|
310 </li> |
|
311 |
|
312 |
|
313 |
|
314 <li data-description="Use the DataSourceCache plugin to enable caching and reduce server calls to remote sources."> |
|
315 <a href="datasource-caching.html">DataSource with Caching</a> |
|
316 </li> |
|
317 |
|
318 |
|
319 |
|
320 <li data-description="The DataSourceCache plugin supports offline caching so that cached data persists across browser sessions."> |
|
321 <a href="datasource-offlinecache.html">DataSource with Offline Cache</a> |
|
322 </li> |
|
323 |
|
324 |
|
325 |
|
326 <li data-description="Use the Pollable extension to enable polling in your DataSource."> |
|
327 <a href="datasource-polling.html">DataSource with Polling</a> |
|
328 </li> |
|
329 |
|
330 |
|
331 |
|
332 |
|
333 </ul> |
|
334 </div> |
|
335 </div> |
|
336 |
|
337 |
|
338 |
|
339 <div class="sidebox"> |
|
340 <div class="hd"> |
|
341 <h2 class="no-toc">Examples That Use This Component</h2> |
|
342 </div> |
|
343 |
|
344 <div class="bd"> |
|
345 <ul class="examples"> |
|
346 |
|
347 |
|
348 |
|
349 |
|
350 |
|
351 |
|
352 |
|
353 |
|
354 |
|
355 |
|
356 |
|
357 |
|
358 |
|
359 |
|
360 |
|
361 |
|
362 <li data-description="How to provide autocomplete suggestions using a DataSource instance."> |
|
363 <a href="../autocomplete/ac-datasource.html">Remote Data via DataSource</a> |
|
364 </li> |
|
365 |
|
366 |
|
367 </ul> |
|
368 </div> |
|
369 </div> |
|
370 |
|
371 </div> |
|
372 </div> |
|
373 </div> |
|
374 </div> |
|
375 |
|
376 <script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
377 <script>prettyPrint();</script> |
|
378 |
|
379 <script> |
|
380 YUI.Env.Tests = { |
|
381 examples: [], |
|
382 project: '../assets', |
|
383 assets: '../assets/datasource', |
|
384 name: 'datasource-function', |
|
385 title: 'DataSource.Function', |
|
386 newWindow: '', |
|
387 auto: false |
|
388 }; |
|
389 YUI.Env.Tests.examples.push('datasource-local'); |
|
390 YUI.Env.Tests.examples.push('datasource-get'); |
|
391 YUI.Env.Tests.examples.push('datasource-io'); |
|
392 YUI.Env.Tests.examples.push('datasource-function'); |
|
393 YUI.Env.Tests.examples.push('datasource-caching'); |
|
394 YUI.Env.Tests.examples.push('datasource-offlinecache'); |
|
395 YUI.Env.Tests.examples.push('datasource-polling'); |
|
396 YUI.Env.Tests.examples.push('ac-datasource'); |
|
397 |
|
398 </script> |
|
399 <script src="../assets/yui/test-runner.js"></script> |
|
400 |
|
401 |
|
402 |
|
403 </body> |
|
404 </html> |