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
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<style scoped>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai width: 50em;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai.yui3-widget-content {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai border:1px solid #000;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai padding:1em;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai.yui3-tab-loading {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai background: #fff url({{componentAssets}}/img/ajax-loader.gif) no-repeat center center;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai height:40px;
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<div class="intro">
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <p>This example shows how you can use Widget's plugin infrastructure to add additional features to an existing widget.</p>
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai 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
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai the widget's contentBox contents.
240f3dade653eb823c37c978786e67005188002fSatyen Desai NOTE: This example uses io-xdr to retrieve content from pipes, and requires Flash.
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<div class="example">
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai {{>widget-plugin-source}}
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai<h2>Using The Gallery IO Plugin For Widget</h2>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>Setting Up The YUI Instance</h3>
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai<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.
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai The code to set up our sandbox instance is shown below:</p>
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen DesaiYUI().use("widget", "gallery-widget-io", "json-parse", "substitute", function(Y) {
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai // We'll write our code here, after pulling in the default Widget module,
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai // the IO plugin.
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai<h3>The Widget IO Plugin</h3>
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai<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>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>It sets up the following attributes, which are used to control how the IO plugin's `refresh` method behaves:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <dt>uri</dt>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <dd>The uri to use for the io request</dd>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <dt>cfg</dt>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <dd>The io configuration object, to pass to io when initiating a transaction</dd>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <dt>formatter</dt>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <dd>The formatter to use to formatting response data. The default implementation simply passes back the response data passed in, unchanged.</dd>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <dt>loading</dt>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai <dd>The default content to display while an io transaction is in progress</dd>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h3>Using the Plugin</h3>
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai<p>All objects derived from <a href="{{apiDocs}}/Base.html">Base</a> are <a href="{{apiDocs}}/Plugin.Host.html">Plugin Hosts</a>.
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen DesaiThey 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.
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen DesaiThey 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>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<p>In this example, we'll create a new instance of a Widget:</p>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai/* Create a new Widget instance, with content generated from script */
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desaivar widget = new Y.Widget();
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai<p>And then use the `plug` method to add the `WidgetIO` plugin,
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desaiproviding it with a configuration to use when sending out io transactions
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai(The <a href="../overlay/overlay-anim-plugin.html">Animation Plugin</a> example shows how
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desaiyou could do the same thing during construction), render the widget, and refresh
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desaithe plugin to fetch the content.</p>
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai * Add the Plugin, and configure it to use a news feed uri, and work cross-domain, using xdr
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai uri : 'http:/' + '/pipes.yahooapis.com/pipes/pipe.run?_id=6b7b2c6a32f5a12e7259c36967052387&_render=json&url=http:/' + '/rss.news.yahoo.com/rss/us',
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai formatter: formatRSS,
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai loading: '<img class="yui3-loading" width="32px" height="32px" src="{{componentAssets}}/img/ajax-loader.gif">'
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai/* fetch the content */
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai<p>We pass in a formatter to the io plugin, which is responsible for translating the JSON RSS from the uri to HTML:</p>
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desaivar formatRSS = function (val) {
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai var formatted = "Error parsing feed data";
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai var json = Y.JSON.parse(val);
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai if (json && json.count) {
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai var html = ['<ul class="yui3-feed-data">'];
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai var linkTemplate = '<li><a href="{link}" target="_blank">{title}</a></li>';
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai if (i < 10) {
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai formatted = html.join("");
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai formatted = "No Data Available";
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai } catch(e) {
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai formatted = "Error parsing feed data";
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai return formatted;
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai<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,
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desaiif you're not sending cross-domain requests, you don't need to use the XDR functionality and leave out the code below:</p>
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen DesaiY.on('io:xdrReady', function() {
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai // Setup Widget when io xdr is available
eb89aaa27b05cbd8003656a9967097a5f113c0c0Satyen Desai// Set up io to use the flash XDR transport
3ca6e590e198b195c87a9a7bddef1e7ca60a970bSatyen Desai src:'{{yuiLocalBuildUrl}}/io-xdr/io.swf?stamp=' + (new Date()).getTime()
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai<h2>Complete Example Source</h2>
e808b8824ca1091c8efb5669db9129e68e5e1c14Satyen Desai{{>widget-plugin-source}}