← 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/widget/widget-plugin.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/widget/widget-plugin.html
1
 
<!DOCTYPE html>
2
 
<html lang="en">
3
 
<head>
4
 
    <meta charset="utf-8">
5
 
    <title>Example: Creating a Widget Plugin</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: Creating a Widget Plugin</h1>
15
 
 
16
 
    
17
 
 
18
 
    <div class="yui3-g">
19
 
        <div id="main" class="yui3-u">
20
 
            <div class="content"><style scoped>
21
 
#demo {
22
 
    width: 50em;
23
 
}
24
 
.yui3-widget-content {
25
 
    border:1px solid #000;
26
 
    padding:1em;
27
 
}
28
 
.yui3-tab-loading {
29
 
    background: #fff url(../assets/widget/img/ajax-loader.gif) no-repeat center center;
30
 
    height:40px;
31
 
}
32
 
</style>
33
 
 
34
 
<div class="intro">
35
 
    <p>This example shows how you can use Widget's plugin infrastructure to add additional features to an existing widget.</p>
36
 
    <p>
37
 
        We use the <code>&quot;gallery-widget-io&quot;</code> plugin to add io capabilities bound to a widget instance. The plugin provides an <code>io</code> interface on Widget, which can be used to update 
38
 
        the widget's contentBox contents.
39
 
    </p>
40
 
    <p>
41
 
      NOTE: This example uses io-xdr to retrieve content from pipes, and requires Flash.
42
 
    </p>
43
 
</div>
44
 
 
45
 
<div class="example">
46
 
    <div id="demo"></div>
47
 
<script type="text/javascript">
48
 
YUI().use("widget", "gallery-widget-io", "json-parse", "substitute", "escape", function(Y) {
49
 
 
50
 
    var formatRSS = function (val) {
51
 
        var formatted = "Error parsing feed data";
52
 
        try {
53
 
            var json = Y.JSON.parse(val);
54
 
 
55
 
            if (json && json.count) {
56
 
                var html = ['<ul class="yui3-feed-data">'];
57
 
                var linkTemplate = '<li><a href="{link}" target="_blank">{title}</a></li>';
58
 
 
59
 
                Y.each(json.value.items, function(v, i) {
60
 
                    if (i < 10) {
61
 
                        v.title = Y.Escape.html(v.title);
62
 
                        v.link = Y.Escape.html(v.link);
63
 
                        html.push(Y.substitute(linkTemplate, v));
64
 
                    }
65
 
                });
66
 
                html.push("</ul>");
67
 
                formatted = html.join("");
68
 
            } else {
69
 
                formatted = "No Data Available";
70
 
            }
71
 
        } catch(e) {
72
 
            formatted = "Error parsing feed data";
73
 
        }
74
 
        return formatted;
75
 
    };
76
 
 
77
 
    Y.on('io:xdrReady', function() {
78
 
 
79
 
        var widget = new Y.Widget();
80
 
 
81
 
        widget.plug(Y.Plugin.WidgetIO, {
82
 
            uri : 'http:/' + '/pipes.yahooapis.com/pipes/pipe.run?_id=6b7b2c6a32f5a12e7259c36967052387&_render=json&url=http:/' + '/rss.news.yahoo.com/rss/us',
83
 
            cfg:{
84
 
                xdr: {
85
 
                    use:'flash'
86
 
                }
87
 
            },
88
 
            formatter: formatRSS,
89
 
            loading: '<img class="yui3-loading" width="32px" height="32px" src="../assets/widget/img/ajax-loader.gif">'
90
 
        });
91
 
        widget.render('#demo');
92
 
        
93
 
        widget.io.refresh();
94
 
    });
95
 
 
96
 
    Y.io.transport({
97
 
        id:'flash',
98
 
        yid: Y.id,
99
 
        src:'../../build/io-xdr/io.swf?stamp=' + (new Date()).getTime()
100
 
    });
101
 
    
102
 
});
103
 
</script>
104
 
 
105
 
</div>
106
 
 
107
 
<h2>Using The Gallery IO Plugin For Widget</h2>
108
 
 
109
 
<h3>Setting Up The YUI Instance</h3>
110
 
 
111
 
<p>For this example, we'll pull in <code>widget</code>; the <code>gallery-widget-io</code> plugin, and the <code>json-parse</code> and <code>substitute</code> modules to help us work with the JSON RSS data returned.
112
 
 The code to set up our sandbox instance is shown below:</p>
113
 
 
114
 
<pre class="code prettyprint">YUI().use(&quot;widget&quot;, &quot;gallery-widget-io&quot;, &quot;json-parse&quot;, &quot;substitute&quot;, function(Y) {
115
 
    &#x2F;&#x2F; We&#x27;ll write our code here, after pulling in the default Widget module, 
116
 
    &#x2F;&#x2F; the IO plugin.
117
 
});</pre>
118
 
 
119
 
 
120
 
<h3>The Widget IO Plugin</h3>
121
 
 
122
 
<p>The Widget IO plugin is a fairly simple plugin. It provides incremental functionality. It does not need to modify the behavior of any methods on the host Widget instance, or monitor any Widget events (unlike the <a href="../overlay/overlay-anim-plugin.html">AnimPlugin</a> example).</p>
123
 
 
124
 
<p>It sets up the following attributes, which are used to control how the IO plugin's <code>refresh</code> method behaves:</p>
125
 
 
126
 
<dl>
127
 
    <dt>uri</dt>
128
 
    <dd>The uri to use for the io request</dd>
129
 
    <dt>cfg</dt>
130
 
    <dd>The io configuration object, to pass to io when initiating a transaction</dd>
131
 
    <dt>formatter</dt>
132
 
    <dd>The formatter to use to formatting response data. The default implementation simply passes back the response data passed in, unchanged.</dd>
133
 
    <dt>loading</dt>
134
 
    <dd>The default content to display while an io transaction is in progress</dd>
135
 
</dl>
136
 
 
137
 
<h3>Using the Plugin</h3>
138
 
 
139
 
<p>All objects derived from <a href="http://yuilibrary.com/yui/docs/api/Base.html">Base</a> are <a href="http://yuilibrary.com/yui/docs/api/Plugin.Host.html">Plugin Hosts</a>. 
140
 
They provide <a href="http://yuilibrary.com/yui/docs/api/Plugin.Host.html#method_plug"><code>plug</code></a> and <a href="http://yuilibrary.com/yui/docs/api/Plugin.Host.html#method_unplug"><code>unplug</code></a> methods to allow users to add/remove plugins to/from existing instances. 
141
 
They also allow the user to specify the set of plugins to be applied to a new instance, along with their configurations, as part of the constructor arguments.</p>
142
 
 
143
 
<p>In this example, we'll create a new instance of a Widget:</p>
144
 
 
145
 
<pre class="code prettyprint">&#x2F;* Create a new Widget instance, with content generated from script *&#x2F;
146
 
var widget = new Y.Widget();</pre>
147
 
 
148
 
 
149
 
<p>And then use the <code>plug</code> method to add the <code>WidgetIO</code> plugin,
150
 
providing it with a configuration to use when sending out io transactions
151
 
(The <a href="../overlay/overlay-anim-plugin.html">Animation Plugin</a> example shows how
152
 
you could do the same thing during construction), render the widget, and refresh
153
 
the plugin to fetch the content.</p>
154
 
 
155
 
<pre class="code prettyprint">&#x2F;*
156
 
 * Add the Plugin, and configure it to use a news feed uri, and work cross-domain, using xdr 
157
 
 *&#x2F;
158
 
widget.plug(Y.Plugin.WidgetIO, {
159
 
    uri : &#x27;http:&#x2F;&#x27; + &#x27;&#x2F;pipes.yahooapis.com&#x2F;pipes&#x2F;pipe.run?_id=6b7b2c6a32f5a12e7259c36967052387&amp;_render=json&amp;url=http:&#x2F;&#x27; + &#x27;&#x2F;rss.news.yahoo.com&#x2F;rss&#x2F;us&#x27;,
160
 
    cfg:{
161
 
        xdr: {
162
 
            use:&#x27;flash&#x27;
163
 
        }
164
 
    },
165
 
    formatter: formatRSS,        
166
 
    loading: &#x27;&lt;img class=&quot;yui3-loading&quot; width=&quot;32px&quot; height=&quot;32px&quot; src=&quot;..&#x2F;assets&#x2F;widget&#x2F;img&#x2F;ajax-loader.gif&quot;&gt;&#x27;
167
 
});
168
 
 
169
 
widget.render(&#x27;#demo&#x27;);
170
 
 
171
 
&#x2F;* fetch the content *&#x2F;
172
 
widget.io.refresh();</pre>
173
 
 
174
 
 
175
 
<p>We pass in a formatter to the io plugin, which is responsible for translating the JSON RSS from the uri to HTML:</p>
176
 
 
177
 
<pre class="code prettyprint">var formatRSS = function (val) {
178
 
    var formatted = &quot;Error parsing feed data&quot;;
179
 
    try {
180
 
        var json = Y.JSON.parse(val);
181
 
 
182
 
        if (json &amp;&amp; json.count) {
183
 
            var html = [&#x27;&lt;ul class=&quot;yui3-feed-data&quot;&gt;&#x27;];
184
 
            var linkTemplate = &#x27;&lt;li&gt;&lt;a href=&quot;{link}&quot; target=&quot;_blank&quot;&gt;{title}&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;&#x27;;
185
 
 
186
 
            Y.each(json.value.items, function(v, i) {
187
 
                if (i &lt; 10) {
188
 
                    v.title = Y.Escape.html(v.title);
189
 
                    v.link = Y.Escape.html(v.link);
190
 
                    html.push(Y.substitute(linkTemplate, v));
191
 
                }
192
 
            });
193
 
            html.push(&quot;&lt;&#x2F;ul&gt;&quot;);
194
 
            formatted = html.join(&quot;&quot;);
195
 
        } else {
196
 
            formatted = &quot;No Data Available&quot;;
197
 
        }
198
 
    } catch(e) {
199
 
        formatted = &quot;Error parsing feed data&quot;;
200
 
    }
201
 
    return formatted;
202
 
};</pre>
203
 
 
204
 
 
205
 
<p>NOTE: Since we're using <code>IO</code>'s XDR functionality for this example, we wrap the widget construction in a callback which notifies us when the flash XDR module is ready to service requests. In your local implementations,
206
 
if you're not sending cross-domain requests, you don't need to use the XDR functionality and leave out the code below:</p>
207
 
 
208
 
<pre class="code prettyprint">Y.on(&#x27;io:xdrReady&#x27;, function() {
209
 
    &#x2F;&#x2F; Setup Widget when io xdr is available
210
 
});
211
 
 
212
 
&#x2F;&#x2F; Set up io to use the flash XDR transport
213
 
Y.io.transport({
214
 
    id:&#x27;flash&#x27;,
215
 
    yid: Y.id,
216
 
    src:&#x27;..&#x2F;..&#x2F;build&#x2F;io-xdr&#x2F;io.swf?stamp=&#x27; + (new Date()).getTime()
217
 
});</pre>
218
 
 
219
 
 
220
 
<h2>Complete Example Source</h2>
221
 
<pre class="code prettyprint">&lt;div id=&quot;demo&quot;&gt;&lt;&#x2F;div&gt;
222
 
&lt;script type=&quot;text&#x2F;javascript&quot;&gt;
223
 
YUI().use(&quot;widget&quot;, &quot;gallery-widget-io&quot;, &quot;json-parse&quot;, &quot;substitute&quot;, &quot;escape&quot;, function(Y) {
224
 
 
225
 
    var formatRSS = function (val) {
226
 
        var formatted = &quot;Error parsing feed data&quot;;
227
 
        try {
228
 
            var json = Y.JSON.parse(val);
229
 
 
230
 
            if (json &amp;&amp; json.count) {
231
 
                var html = [&#x27;&lt;ul class=&quot;yui3-feed-data&quot;&gt;&#x27;];
232
 
                var linkTemplate = &#x27;&lt;li&gt;&lt;a href=&quot;{link}&quot; target=&quot;_blank&quot;&gt;{title}&lt;&#x2F;a&gt;&lt;&#x2F;li&gt;&#x27;;
233
 
 
234
 
                Y.each(json.value.items, function(v, i) {
235
 
                    if (i &lt; 10) {
236
 
                        v.title = Y.Escape.html(v.title);
237
 
                        v.link = Y.Escape.html(v.link);
238
 
                        html.push(Y.substitute(linkTemplate, v));
239
 
                    }
240
 
                });
241
 
                html.push(&quot;&lt;&#x2F;ul&gt;&quot;);
242
 
                formatted = html.join(&quot;&quot;);
243
 
            } else {
244
 
                formatted = &quot;No Data Available&quot;;
245
 
            }
246
 
        } catch(e) {
247
 
            formatted = &quot;Error parsing feed data&quot;;
248
 
        }
249
 
        return formatted;
250
 
    };
251
 
 
252
 
    Y.on(&#x27;io:xdrReady&#x27;, function() {
253
 
 
254
 
        var widget = new Y.Widget();
255
 
 
256
 
        widget.plug(Y.Plugin.WidgetIO, {
257
 
            uri : &#x27;http:&#x2F;&#x27; + &#x27;&#x2F;pipes.yahooapis.com&#x2F;pipes&#x2F;pipe.run?_id=6b7b2c6a32f5a12e7259c36967052387&amp;_render=json&amp;url=http:&#x2F;&#x27; + &#x27;&#x2F;rss.news.yahoo.com&#x2F;rss&#x2F;us&#x27;,
258
 
            cfg:{
259
 
                xdr: {
260
 
                    use:&#x27;flash&#x27;
261
 
                }
262
 
            },
263
 
            formatter: formatRSS,
264
 
            loading: &#x27;&lt;img class=&quot;yui3-loading&quot; width=&quot;32px&quot; height=&quot;32px&quot; src=&quot;..&#x2F;assets&#x2F;widget&#x2F;img&#x2F;ajax-loader.gif&quot;&gt;&#x27;
265
 
        });
266
 
        widget.render(&#x27;#demo&#x27;);
267
 
        
268
 
        widget.io.refresh();
269
 
    });
270
 
 
271
 
    Y.io.transport({
272
 
        id:&#x27;flash&#x27;,
273
 
        yid: Y.id,
274
 
        src:&#x27;..&#x2F;..&#x2F;build&#x2F;io-xdr&#x2F;io.swf?stamp=&#x27; + (new Date()).getTime()
275
 
    });
276
 
    
277
 
});
278
 
&lt;&#x2F;script&gt;</pre>
279
 
 
280
 
</div>
281
 
        </div>
282
 
 
283
 
        <div id="sidebar" class="yui3-u">
284
 
            
285
 
 
286
 
            
287
 
                <div class="sidebox">
288
 
                    <div class="hd">
289
 
                        <h2 class="no-toc">Examples</h2>
290
 
                    </div>
291
 
 
292
 
                    <div class="bd">
293
 
                        <ul class="examples">
294
 
                            
295
 
                                
296
 
                                    <li data-description="Shows how to extend the base widget class, to create your own Widgets.">
297
 
                                        <a href="widget-extend.html">Extending the Base Widget Class</a>
298
 
                                    </li>
299
 
                                
300
 
                            
301
 
                                
302
 
                                    <li data-description="Shows how to use Base.create and mix/match extensions to create custom Widget classes.">
303
 
                                        <a href="widget-build.html">Creating Custom Widget Classes With Extensions</a>
304
 
                                    </li>
305
 
                                
306
 
                            
307
 
                                
308
 
                                    <li data-description="Shows how to create an IO plugin for Widget.">
309
 
                                        <a href="widget-plugin.html">Creating a Widget Plugin</a>
310
 
                                    </li>
311
 
                                
312
 
                            
313
 
                                
314
 
                                    <li data-description="Shows how to extend the Widget class, and add WidgetPosition and WidgetStack to create a Tooltip widget class.">
315
 
                                        <a href="widget-tooltip.html">Creating a Simple Tooltip Widget With Extensions</a>
316
 
                                    </li>
317
 
                                
318
 
                            
319
 
                                
320
 
                                    <li data-description="Shows how to extend the Widget class, and add WidgetParent and WidgetChild to create a simple ListBox widget.">
321
 
                                        <a href="widget-parentchild-listbox.html">Creating a Hierarchical ListBox Widget</a>
322
 
                                    </li>
323
 
                                
324
 
                            
325
 
                        </ul>
326
 
                    </div>
327
 
                </div>
328
 
            
329
 
 
330
 
            
331
 
        </div>
332
 
    </div>
333
 
</div>
334
 
 
335
 
<script src="../assets/vendor/prettify/prettify-min.js"></script>
336
 
<script>prettyPrint();</script>
337
 
 
338
 
</body>
339
 
</html>