1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<style scoped>
#demo {
width: 50em;
}
.yui3-widget-content {
border:1px solid #000;
padding:1em;
}
.yui3-tab-loading {
background: #fff url({{componentAssets}}/img/ajax-loader.gif) no-repeat center center;
height:40px;
}
</style>
<div class="intro">
<p>This example shows how you can use Widget's plugin infrastructure to add additional features to an existing widget.</p>
<p>
We use the `"gallery-widget-io"` plugin to add io capabilities bound to a widget instance. The plugin provides an `io` interface on Widget, which can be used to update
the widget's contentBox contents.
</p>
<p>
NOTE: This example uses io-xdr to retrieve content from pipes, and requires Flash.
</p>
</div>
<div class="example">
{{>widget-plugin-source}}
</div>
<h2>Using The Gallery IO Plugin For Widget</h2>
<h3>Setting Up The YUI Instance</h3>
<p>For this example, we'll pull in `widget`; the `gallery-widget-io` plugin, and the `json-parse` and `substitute` modules to help us work with the JSON RSS data returned.
The code to set up our sandbox instance is shown below:</p>
```
YUI().use("widget", "gallery-widget-io", "json-parse", "substitute", function(Y) {
// We'll write our code here, after pulling in the default Widget module,
// the IO plugin.
});
```
<h3>The Widget IO Plugin</h3>
<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>
<p>It sets up the following attributes, which are used to control how the IO plugin's `refresh` method behaves:</p>
<dl>
<dt>uri</dt>
<dd>The uri to use for the io request</dd>
<dt>cfg</dt>
<dd>The io configuration object, to pass to io when initiating a transaction</dd>
<dt>formatter</dt>
<dd>The formatter to use to formatting response data. The default implementation simply passes back the response data passed in, unchanged.</dd>
<dt>loading</dt>
<dd>The default content to display while an io transaction is in progress</dd>
</dl>
<h3>Using the Plugin</h3>
<p>All objects derived from <a href="{{apiDocs}}/Base.html">Base</a> are <a href="{{apiDocs}}/Plugin.Host.html">Plugin Hosts</a>.
They provide <a href="{{apiDocs}}/Plugin.Host.html#method_plug">`plug`</a> and <a href="{{apiDocs}}/Plugin.Host.html#method_unplug">`unplug`</a> methods to allow users to add/remove plugins to/from existing instances.
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>
<p>In this example, we'll create a new instance of a Widget:</p>
```
/* Create a new Widget instance, with content generated from script */
var widget = new Y.Widget();
```
<p>And then use the `plug` method to add the `WidgetIO` plugin,
providing it with a configuration to use when sending out io transactions
(The <a href="../overlay/overlay-anim-plugin.html">Animation Plugin</a> example shows how
you could do the same thing during construction), render the widget, and refresh
the plugin to fetch the content.</p>
```
/*
* Add the Plugin, and configure it to use a news feed uri, and work cross-domain, using xdr
*/
uri : 'http:/' + '/pipes.yahooapis.com/pipes/pipe.run?_id=6b7b2c6a32f5a12e7259c36967052387&_render=json&url=http:/' + '/rss.news.yahoo.com/rss/us',
cfg:{
xdr: {
use:'flash'
}
},
formatter: formatRSS,
loading: '<img class="yui3-loading" width="32px" height="32px" src="{{componentAssets}}/img/ajax-loader.gif">'
});
widget.render('#demo');
/* fetch the content */
```
<p>We pass in a formatter to the io plugin, which is responsible for translating the JSON RSS from the uri to HTML:</p>
```
var formatRSS = function (val) {
var formatted = "Error parsing feed data";
try {
var json = Y.JSON.parse(val);
if (json && json.count) {
var html = ['<ul class="yui3-feed-data">'];
var linkTemplate = '<li><a href="{link}" target="_blank">{title}</a></li>';
Y.each(json.value.items, function(v, i) {
if (i < 10) {
html.push(Y.substitute(linkTemplate, v));
}
});
html.push("</ul>");
formatted = html.join("");
} else {
formatted = "No Data Available";
}
} catch(e) {
formatted = "Error parsing feed data";
}
return formatted;
};
```
<p>NOTE: Since we're using `IO`'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,
if you're not sending cross-domain requests, you don't need to use the XDR functionality and leave out the code below:</p>
```
Y.on('io:xdrReady', function() {
// Setup Widget when io xdr is available
});
// Set up io to use the flash XDR transport
id:'flash',
yid: Y.id,
src:'{{yuiLocalBuildUrl}}/io-xdr/io.swf?stamp=' + (new Date()).getTime()
});
```
<h2>Complete Example Source</h2>
```
{{>widget-plugin-source}}
```