← Back to branch summary

~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/datatable/datatable-dsio.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:
src/maasserver/static/jslibs/yui/3.4.1/docs/datatable/datatable-dsio.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: DataTable + DataSource.IO + XML Data</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: DataTable + DataSource.IO + XML Data</h1>
15
 
 
16
 
    
17
 
 
18
 
    <div class="yui3-g">
19
 
        <div id="main" class="yui3-u">
20
 
            <div class="content"><div class="intro">
21
 
    <p>This example shows how to populate a DataTable with data from the Yahoo! Local webservice retrieved via a same-domain script. First we create a DataSource.IO instance pointing to data, then using the DataTableDataSource plugin we can load data for Chinese restaurants near our office.</p>
22
 
 
23
 
    <p>In this example, we set the <code>initialRequest</code> value in the DataTableDataSource plugin constructor so that the initial data is loaded first and then the DataTable is rendered in a separate call.</p>
24
 
 
25
 
    <p><strong>Note:</strong> XML parsing currently has known issues on the Android WebKit browser.
26
 
</div>
27
 
 
28
 
<div class="example yui3-skin-sam">
29
 
<style scoped>
30
 
/* custom styles for this example */
31
 
.dt-example {margin:1em;}
32
 
 
33
 
/* css to counter global site css */
34
 
.dt-example th {text-transform:none;}
35
 
.dt-example table {width:auto;}
36
 
.dt-example caption {display:table-caption;}
37
 
</style>
38
 
 
39
 
<div id="chinese" class="dt-example"></div>
40
 
 
41
 
<script type="text/javascript">
42
 
YUI().use("datasource-io", "datasource-xmlschema","datatable-base","datatable-datasource", function (Y) {
43
 
    var cols = ["Title", "Phone", "Rating"];
44
 
    ds = new Y.DataSource.IO({
45
 
        source:"../assets/datatable/ylocal.xml?"})
46
 
        .plug(Y.Plugin.DataSourceXMLSchema, {
47
 
            schema: {
48
 
                resultListLocator: "Result",
49
 
                resultFields: [
50
 
                    {
51
 
                        key:"Title",
52
 
                        locator:"*[local-name() ='Title']"
53
 
                    },
54
 
                    {
55
 
                        key:"Phone",
56
 
                        locator:"*[local-name() ='Phone']"
57
 
                    },
58
 
                    {
59
 
                        key:"Rating",
60
 
                        locator:"*[local-name()='Rating']/*[local-name()='AverageRating']",
61
 
                        // The data contains "NaN" for unrated restaurants
62
 
                        parser: function (val) {
63
 
                            return isNaN(val) ? '(none)' : val;
64
 
                        }
65
 
                    }
66
 
                ]
67
 
            }
68
 
        }),
69
 
    dt = new Y.DataTable.Base({columnset:cols, summary:"Chinese restaurants near 98089", caption:"Table with XML data from same-domain script"})
70
 
        .plug(Y.Plugin.DataTableDataSource, {datasource:ds, initialRequest:"zip=94089&query=chinese"});
71
 
 
72
 
    ds.after("response", function() {
73
 
        dt.render("#chinese")}
74
 
    );
75
 
});
76
 
</script>
77
 
 
78
 
</div>
79
 
 
80
 
<h2>Populating Your DataTable with Remote Data using DataSource.IO</h2>
81
 
 
82
 
<p>Your table can be easily populated with XML data from your back-end by creating a DataSource instance and using the DataTableDataSource plugin to load the data into a DataTable.</p>
83
 
 
84
 
<p>Start with the <code>use()</code> statement:</p>
85
 
 
86
 
<pre class="code prettyprint">YUI().use(&quot;datasource-io&quot;, &quot;datasource-xmlschema&quot;, &quot;datatable-datasource&quot;, function(Y) {
87
 
});</pre>
88
 
 
89
 
 
90
 
<p>Next create a DataSource.IO instance pointing to your data. (Note that in order to point the Yahoo! Local webservice, you would need to bypass cross-domain browser restrictions on XHR by creating a locally served proxy. You do not need to implement such a proxy when your data is accessed from the same domain.) Define the correct schema for the DataSourceJSONSchema plugin. This is a good time to call <code>sendRequest</code> to make sure the data returns as expected.</p>
91
 
 
92
 
<pre class="code prettyprint">var dataSource = new Y.DataSource.IO({
93
 
    source:&quot;ylocal_proxy.php?zip=94089&amp;query=chinese&quot;
94
 
});
95
 
 
96
 
dataSource.plug(Y.Plugin.DataSourceXMLSchema, {
97
 
    schema: {
98
 
        resultListLocator: &quot;Result&quot;,
99
 
        resultFields: [
100
 
            {key:&quot;Title&quot;, locator:&quot;*[local-name() =&#x27;Title&#x27;]&quot;},
101
 
            {key:&quot;Phone&quot;, locator:&quot;*[local-name() =&#x27;Phone&#x27;]&quot;},
102
 
            {key:&quot;Rating&quot;, locator:&quot;*[local-name()=&#x27;Rating&#x27;]&#x2F;*[local-name()=&#x27;AverageRating&#x27;]&quot;}
103
 
        ]
104
 
    }
105
 
});
106
 
 
107
 
dataSource.sendRequest({    
108
 
    callback: {
109
 
        success: function (e) {
110
 
            Y.log(e);
111
 
        }
112
 
    }
113
 
});</pre>
114
 
 
115
 
 
116
 
<p>Now that the DataSource is created properly, define the columns that you want your table to show. These columns map directly to the parameter names returned in the data.</p>
117
 
 
118
 
<pre class="code prettyprint">var cols = [&quot;Title&quot;, &quot;Phone&quot;, &quot;Rating&quot;];</pre>
119
 
 
120
 
 
121
 
<p>Now you are ready to create a DataTable using the columns you have defined. When you plug the instance with the DataTableDataSource plugin, point to your DataSource instance, and set an <code>initialRequest</code> value so that the initial data loads right way. Then call <code>render()</code> after the data response has been processed.</p>
122
 
 
123
 
<pre class="code prettyprint">var cols = [&quot;Title&quot;, &quot;Phone&quot;, &quot;Rating&quot;];
124
 
 
125
 
var dataSource = new Y.DataSource.IO({
126
 
    source:&quot;ylocal_proxy.php?zip=94089&amp;query=chinese&quot;
127
 
});
128
 
 
129
 
dataSource.plug(Y.Plugin.DataSourceXMLSchema, {
130
 
    schema: {
131
 
        resultListLocator: &quot;Result&quot;,
132
 
        resultFields: [
133
 
            {key:&quot;Title&quot;, locator:&quot;*[local-name() =&#x27;Title&#x27;]&quot;},
134
 
            {key:&quot;Phone&quot;, locator:&quot;*[local-name() =&#x27;Phone&#x27;]&quot;},
135
 
            {key:&quot;Rating&quot;, locator:&quot;*[local-name()=&#x27;Rating&#x27;]&#x2F;*[local-name()=&#x27;AverageRating&#x27;]&quot;}
136
 
        ]
137
 
    }
138
 
});
139
 
 
140
 
var table = new Y.DataTable.Base({
141
 
    columnset: cols,
142
 
    summary: &quot;Chinese restaurants near 98089&quot;,
143
 
    caption: &quot;Table with XML data from same-domain script&quot;
144
 
});
145
 
table.plug(Y.Plugin.DataTableDataSource, {
146
 
    datasource: dataSource,
147
 
    initialRequest: &quot;&quot;
148
 
});
149
 
 
150
 
dataSource.after(&quot;response&quot;, function() {
151
 
    table.render(&quot;#pizza&quot;)}
152
 
);</pre>
153
 
 
154
 
 
155
 
<p>One final change you can make is to split the URL between the DataSource <code>source</code> value and the <code>request</code> value sent to the DataTableDataSource plugin. Splitting the URL this way facilitates making future requests to the same DataSource.
156
 
 
157
 
<p>Here's the code to run the whole example:</p>
158
 
 
159
 
<pre class="code prettyprint">YUI().use(&quot;datasource-get&quot;, &quot;datasource-jsonschema&quot;, &quot;datatable-datasource&quot;, function(Y) {
160
 
    var cols = [&quot;Title&quot;, &quot;Phone&quot;, &quot;Rating&quot;];
161
 
 
162
 
    var dataSource = new Y.DataSource.IO({
163
 
        source: &quot;ylocal_proxy.php?&quot;
164
 
    });
165
 
 
166
 
    dataSource.plug(Y.Plugin.DataSourceXMLSchema, {
167
 
        schema: {
168
 
            resultListLocator: &quot;Result&quot;,
169
 
            resultFields: [
170
 
                {key:&quot;Title&quot;, locator:&quot;*[local-name() =&#x27;Title&#x27;]&quot;},
171
 
                {key:&quot;Phone&quot;, locator:&quot;*[local-name() =&#x27;Phone&#x27;]&quot;},
172
 
                {key:&quot;Rating&quot;, locator:&quot;*[local-name()=&#x27;Rating&#x27;]&#x2F;*[local-name()=&#x27;AverageRating&#x27;]&quot;}
173
 
            ]
174
 
        }
175
 
    });
176
 
 
177
 
    var table = new Y.DataTable.Base({
178
 
        columnset: cols,
179
 
        summary: &quot;Chinese restaurants near 98089&quot;,
180
 
        caption: &quot;Table with XML data from same-domain script&quot;
181
 
    });
182
 
    
183
 
    table.plug(Y.Plugin.DataTableDataSource, {
184
 
        datasource: dataSource,
185
 
        initialRequest: &quot;zip=94089&amp;query=chinese&quot;
186
 
    });
187
 
 
188
 
    dataSource.after(&quot;response&quot;, function() {
189
 
        table.render(&quot;#pizza&quot;)}
190
 
    );
191
 
 
192
 
    &#x2F;&#x2F; Make another request later
193
 
    &#x2F;&#x2F;table.datasource.load({request:&quot;zip=94089&amp;query=pizza&quot;});
194
 
});</pre>
195
 
 
196
 
</div>
197
 
        </div>
198
 
 
199
 
        <div id="sidebar" class="yui3-u">
200
 
            
201
 
 
202
 
            
203
 
                <div class="sidebox">
204
 
                    <div class="hd">
205
 
                        <h2 class="no-toc">Examples</h2>
206
 
                    </div>
207
 
 
208
 
                    <div class="bd">
209
 
                        <ul class="examples">
210
 
                            
211
 
                                
212
 
                                    <li data-description="This example illustrates simple DataTable use cases.">
213
 
                                        <a href="datatable-basic.html">Basic DataTable</a>
214
 
                                    </li>
215
 
                                
216
 
                            
217
 
                                
218
 
                                    <li data-description="DataTable loaded with JSON data from a remote webservice via DataSource.Get">
219
 
                                        <a href="datatable-dsget.html">DataTable + DataSource.Get + JSON Data</a>
220
 
                                    </li>
221
 
                                
222
 
                            
223
 
                                
224
 
                                    <li data-description="DataTable loaded with XML data from a remote webservice via DataSource.IO.">
225
 
                                        <a href="datatable-dsio.html">DataTable + DataSource.IO + XML Data</a>
226
 
                                    </li>
227
 
                                
228
 
                            
229
 
                                
230
 
                                    <li data-description="Custom format data for display.">
231
 
                                        <a href="datatable-formatting.html">Formatting Row Data for Display</a>
232
 
                                    </li>
233
 
                                
234
 
                            
235
 
                                
236
 
                                    <li data-description="DataTable with nested column headers.">
237
 
                                        <a href="datatable-nestedcols.html">Nested Column Headers</a>
238
 
                                    </li>
239
 
                                
240
 
                            
241
 
                                
242
 
                                    <li data-description="DataTable with column sorting.">
243
 
                                        <a href="datatable-sort.html">Column Sorting</a>
244
 
                                    </li>
245
 
                                
246
 
                            
247
 
                                
248
 
                                    <li data-description="DataTable with vertical and/or horizontal scrolling rows.">
249
 
                                        <a href="datatable-scroll.html">Scrolling DataTable</a>
250
 
                                    </li>
251
 
                                
252
 
                            
253
 
                                
254
 
                            
255
 
                        </ul>
256
 
                    </div>
257
 
                </div>
258
 
            
259
 
 
260
 
            
261
 
                <div class="sidebox">
262
 
                    <div class="hd">
263
 
                        <h2 class="no-toc">Examples That Use This Component</h2>
264
 
                    </div>
265
 
 
266
 
                    <div class="bd">
267
 
                        <ul class="examples">
268
 
                            
269
 
                                
270
 
                            
271
 
                                
272
 
                            
273
 
                                
274
 
                            
275
 
                                
276
 
                            
277
 
                                
278
 
                            
279
 
                                
280
 
                            
281
 
                                
282
 
                            
283
 
                                
284
 
                                    <li data-description="Shows how to instantiate multiple Panel instances, and use nested modality to interact with a Datatable.">
285
 
                                        <a href="../panel/panel-form.html">Creating a modal form</a>
286
 
                                    </li>
287
 
                                
288
 
                            
289
 
                        </ul>
290
 
                    </div>
291
 
                </div>
292
 
            
293
 
        </div>
294
 
    </div>
295
 
</div>
296
 
 
297
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
298
 
<script>prettyPrint();</script>
299
 
 
300
 
</body>
301
 
</html>