~ubuntu-branches/ubuntu/raring/maas/raring-updates

« back to all changes in this revision

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

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-07-03 17:42:37 UTC
  • mfrom: (1.1.13)
  • Revision ID: package-import@ubuntu.com-20120703174237-p8l0keuuznfg721k
Tags: 0.1+bzr709+dfsg-0ubuntu1
* New Upstream release
* debian/control:
  - Depends on python-celery, python-tempita, libjs-yui3-{full,min},
    libjs-raphael
* debian/maas.install:
  - Install apiclient, celeryconfig.py, maas-import-pxe-files, preseeds_v2.
  - Update to install various files from chroot, rather tha manually copy
    them from the source.
* debian/maas.links: symlink celeryconfig.py
* debian/maas.maas-celery.upstart: Add job.
* debian/rules:
  - Install celery upstart job.
  - Do not install jslibs as packages are now used.
  - Drop copying of maas_local_settings_sample.py as source now ships
    a maas_local_settings.py
* debian/patches:
  - 04-maas-http-fix.patch: Drop. Merged upstream.
  - 01-fix-database-settings.patch: Refreshed.
  - 99_enums_js.patch: Added until creation of enum.js / build process
    is fixed.
* debian/maas.postinst: Update bzr version to correctly handle upgrades.

Show diffs side-by-side

added added

removed removed

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