← 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/tabview/tabview-yql.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/tabview/tabview-yql.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Loading Tab Content</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: Loading Tab Content</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 create a plugin to load YQL data into a TabView for dynamic content.</p>
22
 
</div>
23
 
 
24
 
<div class="example yui3-skin-sam">
25
 
<style>
26
 
.example h3 {
27
 
    color: #666;
28
 
    margin: 0.5em 0;
29
 
}
30
 
</style>
31
 
<h3>Today's Browser News</h3>
32
 
<div id="demo"></div>
33
 
<script type="text/javascript">
34
 
YUI().use('tabview', 'yql', function(Y) {
35
 
    // YQL plugin for Y.Tab instances
36
 
    var TabYQL = function(config) {
37
 
        this.init(config);
38
 
    };
39
 
 
40
 
    TabYQL.NS = 'yql'; // plugin namespace (e.g. "tab.yql.load(myQuery)");
41
 
 
42
 
    TabYQL.prototype = {
43
 
        init: function(config) {
44
 
            if (config) {
45
 
                this.tab = config.host;
46
 
                this.query = config.query || this.query;
47
 
                this.errorMsg = config.errorMsg || this.errorMsg;
48
 
            }
49
 
 
50
 
            if (this.tab) {
51
 
                this.tab.after('selectedChange', Y.bind(this.afterSelectedChange, this));
52
 
            }
53
 
        },
54
 
 
55
 
        loaded: false,
56
 
        query: '',
57
 
        errorMsg: 'There was a problem loading the content',
58
 
        tab: null,
59
 
 
60
 
        afterLoad: function(response) {
61
 
            var results = (response.query) ? response.query.results.item : null,
62
 
                content = '';
63
 
 
64
 
            if (results) {
65
 
                Y.each(results, function(fields) {
66
 
                    content += '<li><a href="' + fields.link + '">' +
67
 
                        fields.title + '</a></li>';
68
 
                });
69
 
 
70
 
                this.loaded = true;
71
 
                content = '<ul>' + content + '</ul>'
72
 
            } else {
73
 
                content = this.errorMsg;
74
 
            }
75
 
 
76
 
            this.tab.set('content', content);
77
 
        },
78
 
 
79
 
        afterSelectedChange: function(e) {
80
 
            // only load if not already loaded
81
 
            if (!this.loaded) {
82
 
                this.load(this.query, this.afterLoad);
83
 
            }
84
 
        },
85
 
 
86
 
        load: function(query, afterLoad) {
87
 
            Y.YQL(query, Y.bind(afterLoad, this));
88
 
        }
89
 
    };
90
 
 
91
 
    var tabview = new Y.TabView(),
92
 
        feeds = {
93
 
            Chrome: 'chrome+browser',
94
 
            Firefox: 'firefox+browser',
95
 
            Safari: 'safari+browser',
96
 
            Explorer: 'explorer+browser',
97
 
            Opera: 'opera+browser'
98
 
        };
99
 
 
100
 
    Y.each(feeds, function(feed, label) {
101
 
        var tab = new Y.Tab({
102
 
            label: label,
103
 
            content: 'loading...'
104
 
        });
105
 
 
106
 
        tab.plug(TabYQL, {
107
 
            query: 'select title, link from rss where ' +
108
 
                'url="http://search.news.yahoo.com/rss?p=' +
109
 
                feed + '"'
110
 
        });
111
 
 
112
 
        tabview.add(tab);
113
 
    });
114
 
 
115
 
    tabview.render('#demo');
116
 
});
117
 
</script>
118
 
 
119
 
</div>
120
 
 
121
 
<h2>Creating the YQL Plugin</h2>
122
 
<h3>Plugin Constructor</h3>
123
 
<p>To create a plugin, we need to create a constructor with a static
124
 
    <code>NS</code> property. This is the namespace used by the plugin on each
125
 
    instance.</p>
126
 
 
127
 
<pre class="code prettyprint">&#x2F;&#x2F; YQL plugin for Y.Tab instances
128
 
var TabYQL = function(config) {
129
 
    this.init(config);
130
 
};
131
 
 
132
 
TabYQL.NS = &#x27;yql&#x27;; &#x2F;&#x2F; plugin namespace (e.g. &quot;tab.yql.load(myQuery)&quot;);</pre>
133
 
 
134
 
 
135
 
</h3>Plugin Prototype</h3>
136
 
<p>Next we will add the YQL functionality to the prototype. The init method
137
 
    wires the YQL functionality up using the load method.</p>
138
 
 
139
 
<pre class="code prettyprint">TabYQL.prototype = {
140
 
    init: function(config) {
141
 
        if (this.tab) {
142
 
            this.tab.after(&#x27;selectedChange&#x27;, Y.bind(this.afterSelectedChange, this));
143
 
        }
144
 
    },
145
 
 
146
 
    afterSelectedChange: function(e) {
147
 
        &#x2F;&#x2F; only load if not already loaded
148
 
        if (!this.loaded) {
149
 
            this.load(this.query, this.afterLoad);
150
 
        }
151
 
    },
152
 
 
153
 
    load: function(query, afterLoad) {
154
 
        Y.YQL(query, Y.bind(afterLoad, this));
155
 
    }</pre>
156
 
 
157
 
 
158
 
<h2>Creating the TabView</h2>
159
 
<p>Next we will create a new instance of a TabView:</p>
160
 
 
161
 
<pre class="code prettyprint">&#x2F;* Create a new TabView instance, with content generated from script *&#x2F;
162
 
var tabview = new Y.TabView();</pre>
163
 
 
164
 
 
165
 
<p>And then use the <code>add</code> method to add the <code>Tab</code> instances,
166
 
to add a tab for each of the feeds, then render the tabview into the placeholder
167
 
element.</p>
168
 
 
169
 
 
170
 
<pre class="code prettyprint">var feeds = {
171
 
    Chrome: &#x27;chrome+browser&#x27;,
172
 
    Firefox: &#x27;firefox+browser&#x27;,
173
 
    Safari: &#x27;safari+browser&#x27;,
174
 
    Explorer: &#x27;explorer+browser&#x27;,
175
 
    Opera: &#x27;opera+browser&#x27;
176
 
};
177
 
 
178
 
Y.each(feeds, function(feed, label) {
179
 
    var tab = new Y.Tab({
180
 
        label: label,
181
 
        content: &#x27;loading...&#x27;,
182
 
    });
183
 
 
184
 
    tab.plug(TabYQL, {
185
 
        query: &#x27;select title, link from rss where &#x27; +
186
 
            &#x27;url=&quot;http:&#x2F;&#x2F;search.news.yahoo.com&#x2F;rss?p=&#x27; +
187
 
            feed + &#x27;&quot;&#x27;
188
 
    });
189
 
 
190
 
    tabview.add(tab);
191
 
});
192
 
 
193
 
tabview.render(&#x27;#demo&#x27;);</pre>
194
 
 
195
 
</div>
196
 
        </div>
197
 
 
198
 
        <div id="sidebar" class="yui3-u">
199
 
            
200
 
 
201
 
            
202
 
                <div class="sidebox">
203
 
                    <div class="hd">
204
 
                        <h2 class="no-toc">Examples</h2>
205
 
                    </div>
206
 
 
207
 
                    <div class="bd">
208
 
                        <ul class="examples">
209
 
                            
210
 
                                
211
 
                                    <li data-description="This example shows how to create a TabView wigdet from existing HTML.">
212
 
                                        <a href="tabview-basic.html">TabView from Existing Markup</a>
213
 
                                    </li>
214
 
                                
215
 
                            
216
 
                                
217
 
                                    <li data-description="This example shows how to create a TabView wigdet from JavaScript.">
218
 
                                        <a href="tabview-fromjs.html">Dynamic TabView from JavaScript</a>
219
 
                                    </li>
220
 
                                
221
 
                            
222
 
                                
223
 
                                    <li data-description="This example shows how to add and remove Tabs.">
224
 
                                        <a href="tabview-add-remove.html">Adding and Removing Tabs</a>
225
 
                                    </li>
226
 
                                
227
 
                            
228
 
                                
229
 
                                    <li data-description="This example shows how to load tab content remotely using a YQL plugin.">
230
 
                                        <a href="tabview-yql.html">Loading Tab Content</a>
231
 
                                    </li>
232
 
                                
233
 
                            
234
 
                                
235
 
                            
236
 
                        </ul>
237
 
                    </div>
238
 
                </div>
239
 
            
240
 
 
241
 
            
242
 
                <div class="sidebox">
243
 
                    <div class="hd">
244
 
                        <h2 class="no-toc">Examples That Use This Component</h2>
245
 
                    </div>
246
 
 
247
 
                    <div class="bd">
248
 
                        <ul class="examples">
249
 
                            
250
 
                                
251
 
                            
252
 
                                
253
 
                            
254
 
                                
255
 
                            
256
 
                                
257
 
                            
258
 
                                
259
 
                                    <li data-description="Demonstrates how to add browser history support to a TabView widget using the History Utility.">
260
 
                                        <a href="../history/history-tabview.html">History + TabView</a>
261
 
                                    </li>
262
 
                                
263
 
                            
264
 
                        </ul>
265
 
                    </div>
266
 
                </div>
267
 
            
268
 
        </div>
269
 
    </div>
270
 
</div>
271
 
 
272
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
273
 
<script>prettyPrint();</script>
274
 
 
275
 
</body>
276
 
</html>