← Back to branch summary

~bcsaller/juju-gui/charmFind

« back to all changes in this revision

Viewing changes to lib/yui/docs/datasource/datasource-function.html

  • Committer: kapil.foss at gmail
  • Date: 2012-07-13 18:45:59 UTC
  • Revision ID: kapil.foss@gmail.com-20120713184559-2xl7be17egsrz0c9
reshape

Show diffs side-by-side

added added

removed removed

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