← Back to branch summary

~ubuntu-branches/ubuntu/precise/maas/precise-security

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/datasource/datasource-function.html

Tags: 1.2+bzr1373+dfsg-0ubuntu1~12.04.4
https://launchpad.net/bugs/1039513
https://launchpad.net/bugs/1158425
* SECURITY UPDATE: failure to authenticate downloaded content (LP: #1039513)
  - debian/patches/CVE-2013-1058.patch: Authenticate downloaded files with
    GnuPG and MD5SUM files. Thanks to Julian Edwards.
  - CVE-2013-1058
* SECURITY UPDATE: configuration options may be loaded from current working
  directory (LP: #1158425)
  - debian/patches/CVE-2013-1057-1-2.patch: Do not load configuration
    options from the current working directory. Thanks to Julian Edwards.
  - CVE-2013-1057

Show diffs side-by-side

added added

removed removed

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