← Back to branch summary

~lutostag/ubuntu/utopic/maas/1.5.2

« 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-03-15 18:14:08 UTC
  • mfrom: (1.1.3)
  • Revision ID: package-import@ubuntu.com-20120315181408-zgl94hzo0x4n99an
Tags: 0.1+bzr295+dfsg-0ubuntu2
* debian/patches:
  - 01-fix-database-settings.patch: Update to set PSERV_URL.
  - 02-pserv-config.patch: Set port to 8001.
* debian/maas.postinst: Run maas-import-isos on install.
* debian/control: Depends on rabbitmq-server.

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>