← Back to branch summary

~ubuntu-branches/ubuntu/precise/whoopsie-daisy/precise-proposed

« back to all changes in this revision

Viewing changes to backend/stats/static/js/yui/docs/datasource/datasource-get.html

  • Committer: Package Import Robot
  • Author(s): Evan Dandrea
  • Date: 2012-04-18 13:04:36 UTC
  • Revision ID: package-import@ubuntu.com-20120418130436-vmt93p8fds516lws
Tags: 0.1.32
Fix failing tests on powerpc and ARM.

Show diffs side-by-side

added added

removed removed

Lines of Context:
backend/stats/static/js/yui/docs/datasource/datasource-get.html
 
1
<!DOCTYPE html>
 
2
<html lang="en">
 
3
<head>
 
4
    <meta charset="utf-8">
 
5
    <title>Example: DataSource.Get</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.Get</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.Get uses the Get Utility to retrieve data, even cross-domain resources, via a dynamically created script node. A <a href="../dataschema/">DataSchema</a> plugin is used to normalize incoming data into a known format for consistency of usage by other components. Please note that your data resource must support a callback mechanism, which is a function wrapper around the returned data. The name of the callback function is passed to the resource via a query string parameter defined by the DataSource.Get attribute <code>scriptCallbackParam</code>.</p>
 
29
</div>
 
30
 
 
31
<div class="example yui3-skin-sam">
 
32
    <form id="demo">
 
33
    <h4>JSON</h4>
 
34
    <h6>Data</h6>
 
35
    <pre>
 
36
{
 
37
    "query":{
 
38
        "count":"10",
 
39
        "created":"2011-06-15T04:36:13Z",
 
40
        "lang":"en-US",
 
41
        "results":{
 
42
            "event":[
 
43
                {
 
44
                 "id": "6826736",
 
45
                 "name": "PGA Fall Expo 2011",
 
46
                 "start_date": "2011-08-01",
 
47
                 "venue_name": "The Venetian Congress and Sands Expo Convention Center",
 
48
                 ...
 
49
                },
 
50
                {
 
51
                 "id": "7228592",
 
52
                 "name": "NAHC 30th Annual Meeting & Exposition",
 
53
                 "start_date": "2011-10-01",
 
54
                 "venue_name": "Mandalay Bay Resort",
 
55
                 ...
 
56
                },
 
57
                {
 
58
                 "id": "7238009",
 
59
                 "name": "Water and Society 2011-First International Conference on Water and Society",
 
60
                 "start_date": "2011-12-05",
 
61
                 "venue_name": "Richard Tam Alumni Center",
 
62
                 ...
 
63
                },
 
64
                ...
 
65
            ]
 
66
        }
 
67
    }
 
68
}
 
69
    </pre>
 
70
 
 
71
    <h6>Schema</h6>
 
72
    <pre>
 
73
{
 
74
    resultListLocator: "query.results.event",
 
75
    resultFields: ["name"]
 
76
}
 
77
    </pre>
 
78
 
 
79
    <h6>Normalized data</h6>
 
80
    <input type="button" id="demo_json" value="Retrieve data">
 
81
    <div id="demo_output_json" class="output"></div>
 
82
</form>
 
83
 
 
84
<script type="text/javascript">
 
85
YUI().use("json-stringify", "node", "datasource-get", "datasource-jsonschema", function (Y) {
 
86
    var myDataSource = new Y.DataSource.Get({
 
87
            source: "http://query.yahooapis.com/v1/public/yql?format=json&"
 
88
        });
 
89
 
 
90
    myDataSource.plug(Y.Plugin.DataSourceJSONSchema, {
 
91
        schema: {
 
92
            resultListLocator: "query.results.event",
 
93
            resultFields: ["name"]
 
94
        }
 
95
    });
 
96
 
 
97
    Y.on("click", function(e){
 
98
        // See what's happening in Las Vegas (woeid 2436704)
 
99
        myDataSource.sendRequest({
 
100
            request: "q=select%20*%20from%20upcoming.events.bestinplace%20where%20woeid=2436704",
 
101
            callback: {
 
102
                success: function(e){
 
103
                    Y.one("#demo_output_json")
 
104
                        .setContent("<pre>" +
 
105
                            Y.JSON.stringify(e.response, null, 4)
 
106
                                .replace(/&/g,"&amp;")
 
107
                                .replace(/</g,"&lt;")
 
108
                                .replace(/>/g,"&gt;") +
 
109
                                "</pre>");
 
110
                },
 
111
                failure: function(e){
 
112
                    Y.one("#demo_output_json")
 
113
                        .setContent("Could not retrieve data: " + e.error.message);
 
114
                }
 
115
            }
 
116
        });
 
117
    }, "#demo_json");
 
118
});
 
119
</script>
 
120
 
 
121
 
 
122
</div>
 
123
 
 
124
<p>Use a DataSourceJSONSchema plugin to parse the data against a schema that you provide:</p>
 
125
 
 
126
<pre class="code prettyprint">YUI().use(&quot;datasource-get&quot;, &quot;datasource-jsonschema&quot;, function(Y) {
 
127
    var myDataSource = new Y.DataSource.Get({
 
128
            source: &quot;http:&#x2F;&#x2F;query.yahooapis.com&#x2F;v1&#x2F;public&#x2F;yql?format=json&amp;&quot;
 
129
        });
 
130
 
 
131
    myDataSource.plug(Y.Plugin.DataSourceJSONSchema, {
 
132
        schema: {
 
133
            resultListLocator: &quot;query.results.result&quot;,
 
134
            resultFields: [&quot;title&quot;]
 
135
        }
 
136
    });
 
137
 
 
138
    myDataSource.sendRequest({
 
139
        request: &quot;q=select%20*%20from%20upcoming.events.bestinplace...&quot;,
 
140
        callback: {
 
141
            success: function (e) { &#x2F;* output to screen *&#x2F; },
 
142
            failure: function (e) { &#x2F;* output to screen *&#x2F; }
 
143
        }
 
144
    });
 
145
 
 
146
});</pre>
 
147
 
 
148
 
 
149
</div>
 
150
            </div>
 
151
        </div>
 
152
 
 
153
        <div class="yui3-u-1-4">
 
154
            <div class="sidebar">
 
155
                
 
156
 
 
157
                
 
158
                    <div class="sidebox">
 
159
                        <div class="hd">
 
160
                            <h2 class="no-toc">Examples</h2>
 
161
                        </div>
 
162
 
 
163
                        <div class="bd">
 
164
                            <ul class="examples">
 
165
                                
 
166
                                    
 
167
                                        <li data-description="The Local DataSource manages retrieval of in-page data, from JavaScript arrays and objects to DOM elements.">
 
168
                                            <a href="datasource-local.html">DataSource.Local</a>
 
169
                                        </li>
 
170
                                    
 
171
                                
 
172
                                    
 
173
                                        <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.">
 
174
                                            <a href="datasource-get.html">DataSource.Get</a>
 
175
                                        </li>
 
176
                                    
 
177
                                
 
178
                                    
 
179
                                        <li data-description="The IO DataSource manages retrieval of data from remote sources, via the IO Utility.">
 
180
                                            <a href="datasource-io.html">DataSource.IO</a>
 
181
                                        </li>
 
182
                                    
 
183
                                
 
184
                                    
 
185
                                        <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">
 
186
                                            <a href="datasource-function.html">DataSource.Function</a>
 
187
                                        </li>
 
188
                                    
 
189
                                
 
190
                                    
 
191
                                        <li data-description="Use the DataSourceCache plugin to enable caching and reduce server calls to remote sources.">
 
192
                                            <a href="datasource-caching.html">DataSource with Caching</a>
 
193
                                        </li>
 
194
                                    
 
195
                                
 
196
                                    
 
197
                                        <li data-description="The DataSourceCache plugin supports offline caching so that cached data persists across browser sessions.">
 
198
                                            <a href="datasource-offlinecache.html">DataSource with Offline Cache</a>
 
199
                                        </li>
 
200
                                    
 
201
                                
 
202
                                    
 
203
                                        <li data-description="Use the Pollable extension to enable polling in your DataSource.">
 
204
                                            <a href="datasource-polling.html">DataSource with Polling</a>
 
205
                                        </li>
 
206
                                    
 
207
                                
 
208
                                    
 
209
                                
 
210
                            </ul>
 
211
                        </div>
 
212
                    </div>
 
213
                
 
214
 
 
215
                
 
216
                    <div class="sidebox">
 
217
                        <div class="hd">
 
218
                            <h2 class="no-toc">Examples That Use This Component</h2>
 
219
                        </div>
 
220
 
 
221
                        <div class="bd">
 
222
                            <ul class="examples">
 
223
                                
 
224
                                    
 
225
                                
 
226
                                    
 
227
                                
 
228
                                    
 
229
                                
 
230
                                    
 
231
                                
 
232
                                    
 
233
                                
 
234
                                    
 
235
                                
 
236
                                    
 
237
                                
 
238
                                    
 
239
                                        <li data-description="How to provide autocomplete suggestions using a DataSource instance.">
 
240
                                            <a href="../autocomplete/ac-datasource.html">Remote Data via DataSource</a>
 
241
                                        </li>
 
242
                                    
 
243
                                
 
244
                            </ul>
 
245
                        </div>
 
246
                    </div>
 
247
                
 
248
            </div>
 
249
        </div>
 
250
    </div>
 
251
</div>
 
252
 
 
253
<script src="../assets/vendor/prettify/prettify-min.js"></script>
 
254
<script>prettyPrint();</script>
 
255
 
 
256
</body>
 
257
</html>