|
525
|
1 |
<!DOCTYPE html> |
|
|
2 |
<html lang="en"> |
|
|
3 |
<head> |
|
|
4 |
<meta charset="utf-8"> |
|
|
5 |
<title>Example: IO Plugin</title> |
|
|
6 |
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic"> |
|
|
7 |
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css"> |
|
|
8 |
<link rel="stylesheet" href="../assets/css/main.css"> |
|
|
9 |
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css"> |
|
|
10 |
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png"> |
|
|
11 |
<script src="../../build/yui/yui-min.js"></script> |
|
|
12 |
|
|
|
13 |
</head> |
|
|
14 |
<body> |
|
|
15 |
<!-- |
|
|
16 |
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> |
|
|
17 |
--> |
|
|
18 |
<div id="doc"> |
|
|
19 |
<div id="hd"> |
|
|
20 |
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1> |
|
|
21 |
</div> |
|
|
22 |
|
|
|
23 |
|
|
|
24 |
<h1>Example: IO Plugin</h1> |
|
|
25 |
<div class="yui3-g"> |
|
|
26 |
<div class="yui3-u-3-4"> |
|
|
27 |
<div id="main"> |
|
|
28 |
<div class="content"><style type="text/css" scoped> |
|
|
29 |
/* Overlay Look/Feel */ |
|
|
30 |
.yui3-overlay-content { |
|
|
31 |
background-color: #ECEFFB; |
|
|
32 |
border: 1px solid #9EA8C6; |
|
|
33 |
border-radius: 3px; |
|
|
34 |
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25); |
|
|
35 |
} |
|
|
36 |
|
|
|
37 |
.yui3-overlay-content .yui3-widget-hd { |
|
|
38 |
background-color: #B6BFDA; |
|
|
39 |
color: #30418C; |
|
|
40 |
font-size: 120%; |
|
|
41 |
font-weight: bold; |
|
|
42 |
padding: 0.2em 0.5em 0.3em; |
|
|
43 |
border-radius: 2px 2px 0 0; |
|
|
44 |
} |
|
|
45 |
|
|
|
46 |
.yui3-overlay-content .yui3-widget-bd { |
|
|
47 |
padding: 0.4em 0.6em 0.5em; |
|
|
48 |
} |
|
|
49 |
|
|
|
50 |
.yui3-overlay-content .yui3-widget-ft { |
|
|
51 |
background-color:#DFE3F5; |
|
|
52 |
padding: 0.4em 0.6em 0.5em; |
|
|
53 |
border-radius: 0 0 2px 2px; |
|
|
54 |
} |
|
|
55 |
|
|
|
56 |
|
|
|
57 |
.yui3-overlay .yui3-widget-bd .yui3-feed-data { |
|
|
58 |
text-align:left; |
|
|
59 |
} |
|
|
60 |
|
|
|
61 |
.yui3-overlay .yui3-feed-selector .yui3-prompt { |
|
|
62 |
font-weight:bold; |
|
|
63 |
} |
|
|
64 |
|
|
|
65 |
.yui3-widget-loading .yui3-widget-bd { |
|
|
66 |
background: #fff url(../assets/overlay/img/ajax-loader.gif) no-repeat center center; |
|
|
67 |
height:40px; |
|
|
68 |
} |
|
|
69 |
|
|
|
70 |
</style> |
|
|
71 |
|
|
|
72 |
<div class="intro"> |
|
|
73 |
<p>This example shows how you can use Widget's plugin infrastructure to add additional features to an existing widget.</p> |
|
|
74 |
<p>We create an IO plugin class for <code>Overlay</code> called <code>StdModIOPlugin</code>. The plugin adds IO capabilities to the Overlay, bound to one of its standard module sections <em>(header, body or footer)</em>.</p> |
|
|
75 |
</div> |
|
|
76 |
|
|
|
77 |
<div class="example"> |
|
|
78 |
<button type="button" id="show">Show Overlay</button> |
|
|
79 |
<button type="button" id="hide">Hide Overlay</button> |
|
|
80 |
|
|
|
81 |
<script type="text/javascript"> |
|
|
82 |
YUI().use("overlay", "json", "gallery-widget-io", "escape", function(Y) { |
|
|
83 |
|
|
|
84 |
/* Setup local variable for Y.WidgetStdMod, since we use it multiple times */ |
|
|
85 |
var StdMod = Y.WidgetStdMod, |
|
|
86 |
transportAvailable = false; |
|
|
87 |
|
|
|
88 |
StdModIO = function(config) { |
|
|
89 |
StdModIO.superclass.constructor.apply(this, arguments); |
|
|
90 |
}; |
|
|
91 |
|
|
|
92 |
Y.extend(StdModIO, Y.Plugin.WidgetIO, { |
|
|
93 |
initializer: function() { |
|
|
94 |
Y.on('io:xdrReady', function() { |
|
|
95 |
transportAvailable = true; |
|
|
96 |
}); |
|
|
97 |
|
|
|
98 |
Y.io.transport({ |
|
|
99 |
id:'flash', |
|
|
100 |
yid: Y.id, |
|
|
101 |
src:'../../build/io-xdr/io.swf?stamp=' + (new Date()).getTime() |
|
|
102 |
}); |
|
|
103 |
}, |
|
|
104 |
|
|
|
105 |
setHTML: function(content) { |
|
|
106 |
var overlay = this.get('host'); |
|
|
107 |
overlay.setStdModContent(this.get('section'), content); |
|
|
108 |
} |
|
|
109 |
|
|
|
110 |
}, { |
|
|
111 |
NAME: 'stdModIO', |
|
|
112 |
NS: 'io', |
|
|
113 |
ATTRS: { |
|
|
114 |
section: { |
|
|
115 |
value:StdMod.BODY, |
|
|
116 |
validator: function(val) { |
|
|
117 |
return (!val || val == StdMod.BODY || val == StdMod.HEADER || val == StdMod.FOOTER); |
|
|
118 |
} |
|
|
119 |
} |
|
|
120 |
} |
|
|
121 |
}); |
|
|
122 |
|
|
|
123 |
/* The Pipes feed URIs to be used to dispatch io transactions */ |
|
|
124 |
var pipes = { |
|
|
125 |
|
|
|
126 |
// uri data |
|
|
127 |
baseUri : 'http:/'+'/pipes.yahooapis.com/pipes/pipe.run?_id=6b7b2c6a32f5a12e7259c36967052387&_render=json&url=http:/'+'/', |
|
|
128 |
feeds : { |
|
|
129 |
ynews : { |
|
|
130 |
title: 'Yahoo! US News', |
|
|
131 |
uri: 'rss.news.yahoo.com/rss/us' |
|
|
132 |
}, |
|
|
133 |
yui : { |
|
|
134 |
title: 'YUI Blog', |
|
|
135 |
uri: 'feeds.yuiblog.com/YahooUserInterfaceBlog' |
|
|
136 |
}, |
|
|
137 |
slashdot : { |
|
|
138 |
title: 'Slashdot', |
|
|
139 |
uri: 'rss.slashdot.org/Slashdot/slashdot' |
|
|
140 |
}, |
|
|
141 |
ajaxian: { |
|
|
142 |
title: 'Ajaxian', |
|
|
143 |
uri: 'feeds.feedburner.com/ajaxian' |
|
|
144 |
}, |
|
|
145 |
daringfireball: { |
|
|
146 |
title: 'Daring Fireball', |
|
|
147 |
uri: 'daringfireball.net/index.xml' |
|
|
148 |
}, |
|
|
149 |
wiredtech: { |
|
|
150 |
title: 'Wire: Tech Biz', |
|
|
151 |
uri: 'www.wired.com/rss/techbiz.xml' |
|
|
152 |
}, |
|
|
153 |
techcrunch: { |
|
|
154 |
title: 'TechCrunch', |
|
|
155 |
uri: 'feedproxy.google.com/Techcrunch' |
|
|
156 |
} |
|
|
157 |
}, |
|
|
158 |
|
|
|
159 |
// The default formatter, responsible for converting the JSON responses recieved, |
|
|
160 |
// into HTML, using JSON for the parsing step, and substitute for some basic templating functionality |
|
|
161 |
formatter : function (val) { |
|
|
162 |
var formatted = "Error parsing feed data"; |
|
|
163 |
try { |
|
|
164 |
var json = Y.JSON.parse(val); |
|
|
165 |
if (json && json.count) { |
|
|
166 |
var html = ['<ul class="yui3-feed-data">']; |
|
|
167 |
var linkTemplate = '<li><a href="{link}" target="_blank">{title}</a></li>'; |
|
|
168 |
|
|
|
169 |
Y.each(json.value.items, function(v, i) { |
|
|
170 |
if (i < 10) { |
|
|
171 |
v.title = Y.Escape.html(v.title); |
|
|
172 |
v.link = Y.Escape.html(v.link); |
|
|
173 |
html.push(Y.Lang.sub(linkTemplate, v)); |
|
|
174 |
} |
|
|
175 |
}); |
|
|
176 |
html.push("</ul>"); |
|
|
177 |
formatted = html.join(""); |
|
|
178 |
} else { |
|
|
179 |
formatted = "No Data Available"; |
|
|
180 |
} |
|
|
181 |
} catch(e) { |
|
|
182 |
formatted = "Error parsing feed data"; |
|
|
183 |
} |
|
|
184 |
return formatted; |
|
|
185 |
} |
|
|
186 |
}; |
|
|
187 |
|
|
|
188 |
/* Helper function, to generate the select dropdown markup from the pipes feed data */ |
|
|
189 |
function generateHeaderMarkup() { |
|
|
190 |
var optTemplate = '<option value="{id}">{title}</option>', |
|
|
191 |
html = ['<select id="feedSelector" class="yui3-feed-selector"><option value="-1" class="yui3-prompt">Select a Feed...</option>']; |
|
|
192 |
|
|
|
193 |
Y.Object.each(pipes.feeds, function(v, k, o) { |
|
|
194 |
html.push(Y.Lang.sub(optTemplate, {id:k, title:v.title})); |
|
|
195 |
}); |
|
|
196 |
html.push('</select>'); |
|
|
197 |
|
|
|
198 |
return html.join(""); |
|
|
199 |
} |
|
|
200 |
|
|
|
201 |
/* Create a new Overlay instance, with content generated from script */ |
|
|
202 |
var overlay = new Y.Overlay({ |
|
|
203 |
width:"40em", |
|
|
204 |
visible:false, |
|
|
205 |
align: { |
|
|
206 |
node:"#show", |
|
|
207 |
points: [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.BL] |
|
|
208 |
}, |
|
|
209 |
zIndex:10, |
|
|
210 |
headerContent: generateHeaderMarkup(), |
|
|
211 |
bodyContent: "Feed data will be displayed here" |
|
|
212 |
}); |
|
|
213 |
|
|
|
214 |
overlay.render(); |
|
|
215 |
/* |
|
|
216 |
* Add the Standard Module IO Plugin, and configure it to use flash, and a formatter specific |
|
|
217 |
* to the pipes response we're expecting from the uri request we'll send out. |
|
|
218 |
*/ |
|
|
219 |
overlay.plug(StdModIO, { |
|
|
220 |
uri : pipes.baseUri + pipes.feeds["ynews"].uri, |
|
|
221 |
cfg:{ |
|
|
222 |
xdr: { |
|
|
223 |
use:'flash' |
|
|
224 |
} |
|
|
225 |
}, |
|
|
226 |
formatter: pipes.formatter, |
|
|
227 |
loading: '<img class="yui3-loading" width="32px" height="32px" src="../assets/overlay/img/ajax-loader.gif">' |
|
|
228 |
}); |
|
|
229 |
|
|
|
230 |
Y.on("change", function(e) { |
|
|
231 |
var val = this.get("value"); |
|
|
232 |
if (transportAvailable) { |
|
|
233 |
if (val != -1) { |
|
|
234 |
overlay.io.set("uri", pipes.baseUri + pipes.feeds[val].uri); |
|
|
235 |
overlay.io.refresh(); |
|
|
236 |
} |
|
|
237 |
} else { |
|
|
238 |
overlay.io.setHTML("Flash doesn't appear to be available. Cross-domain requests to pipes cannot be made without it."); |
|
|
239 |
} |
|
|
240 |
}, "#feedSelector"); |
|
|
241 |
|
|
|
242 |
Y.on("click", function(e) { |
|
|
243 |
overlay.show(); |
|
|
244 |
}, "#show"); |
|
|
245 |
|
|
|
246 |
Y.on("click", function(e) { |
|
|
247 |
overlay.hide(); |
|
|
248 |
}, "#hide"); |
|
|
249 |
|
|
|
250 |
}); |
|
|
251 |
</script> |
|
|
252 |
|
|
|
253 |
</div> |
|
|
254 |
|
|
|
255 |
<h2>Creating an IO Plugin For Overlay</h2> |
|
|
256 |
|
|
|
257 |
<h3>Setting Up The YUI Instance</h3> |
|
|
258 |
|
|
|
259 |
<p>For this example, we'll start from the Widget IO plugin (gallery-io-plugin) created in the <a href="../widget/widget-plugin.html">widget plugin example</a>, pull in <code>overlay</code>, <code>json</code> utility module, |
|
|
260 |
and the <code>plugin</code> module. The Widget IO plugin will pull in the dependencies it needs, the main one being <code>io</code> to provide the XHR support. |
|
|
261 |
|
|
|
262 |
The <code>json</code> and modules provide the support we need to parse/transform JSON responses into HTML.The code to set up our sandbox instance is shown below:</p> |
|
|
263 |
|
|
|
264 |
<pre class="code prettyprint">YUI({...}).use("overlay", "json", "gallery-io-plugin", "escape", function(Y) { |
|
|
265 |
// We'll write our code here, after pulling in the default Overlay widget, |
|
|
266 |
// the IO utility, the Plugin.WidgetIO base class along with the |
|
|
267 |
// Substitute and JSON utilities |
|
|
268 |
});</pre> |
|
|
269 |
|
|
|
270 |
|
|
|
271 |
<p>Using the <code>overlay</code> module will also pull down the default CSS required for overlay, on top of which we only need to add our required look/feel CSS for the example.</p> |
|
|
272 |
|
|
|
273 |
<p> |
|
|
274 |
<strong>Note:</strong> be sure to add the <code>yui3-skin-sam</code> classname to the |
|
|
275 |
page's <code><body></code> element or to a parent element of the widget in order to apply |
|
|
276 |
the default CSS skin. See <a href="http://yuilibrary.com/yui/docs/tutorials/skins/">Understanding Skinning</a>. |
|
|
277 |
</p> |
|
|
278 |
<pre class="code prettyprint"><body class="yui3-skin-sam"> <!-- You need this skin class --></pre> |
|
|
279 |
|
|
|
280 |
|
|
|
281 |
<h3>StdModIO Class Structure</h3> |
|
|
282 |
|
|
|
283 |
<p>The <code>StdModIO</code> class will extend the <code>Plugin.WidgetIO</code> base class. |
|
|
284 |
Since <code>WidgetIO</code> derives from <code>Pluing.Base</code> and hence <code>Base</code>, we follow the same |
|
|
285 |
pattern we use for widgets and other utilities which extend Base to setup our new class.</p> |
|
|
286 |
|
|
|
287 |
<p>Namely:</p> |
|
|
288 |
|
|
|
289 |
<ul> |
|
|
290 |
<li>Setting up the default attributes, using the <code>ATTRS</code> property</li> |
|
|
291 |
<li>Calling the superclass constructor</li> |
|
|
292 |
<li>Setting up the the <code>NAME</code> property</li> |
|
|
293 |
<li>Providing prototype implementations for anything we want executed during initialization and destruction using the <code>initializer</code> and <code>destructor</code> lifecycle methods</li> |
|
|
294 |
</ul> |
|
|
295 |
|
|
|
296 |
<p>Additionally, since this is a plugin, we provide a <code>NS</code> property for the class, which defines the property which will refer to the <code>StdModIO</code> instance on the host class (e.g. <code>overlay.io</code> will be an instance of <code>StdModIO</code>)</p>. |
|
|
297 |
|
|
|
298 |
<pre class="code prettyprint">StdModIO = function(config) { |
|
|
299 |
StdModIO.superclass.constructor.apply(this, arguments); |
|
|
300 |
}; |
|
|
301 |
|
|
|
302 |
Y.extend(StdModIO, Y.Plugin.WidgetIO, { |
|
|
303 |
initializer: function() {...} |
|
|
304 |
}, { |
|
|
305 |
NAME: 'stdModIO', |
|
|
306 |
NS: 'io', |
|
|
307 |
ATTRS: { |
|
|
308 |
section: {...} |
|
|
309 |
} |
|
|
310 |
});</pre> |
|
|
311 |
|
|
|
312 |
<h3>Plugin Attributes</h3> |
|
|
313 |
|
|
|
314 |
<p>The <code>StdModIO</code> is a fairly simple plugin class. It provides |
|
|
315 |
incremental functionality. It does not need to modify the behavior of any |
|
|
316 |
methods on the host Overlay instance, or monitor any Overlay events |
|
|
317 |
(unlike the <a href="overlay-anim-plugin.html">AnimPlugin</a> example).</p> |
|
|
318 |
|
|
|
319 |
<p>In terms of code, the attributes for the plugin are set up using the standard |
|
|
320 |
<code>ATTRS</code> property. For this example, we will add an attribute called |
|
|
321 |
<code>section</code> that represents which part of the module (e.g. "header", |
|
|
322 |
"body", or "footer") will be updated with the returned content.</p> |
|
|
323 |
|
|
|
324 |
<pre class="code prettyprint">/* |
|
|
325 |
* The Standard Module section to which the io plugin instance is bound. |
|
|
326 |
* Response data will be used to populate this section, after passing through |
|
|
327 |
* the configured formatter. |
|
|
328 |
*/ |
|
|
329 |
ATTRS: { |
|
|
330 |
section: { |
|
|
331 |
value:StdMod.BODY, |
|
|
332 |
validator: function(val) { |
|
|
333 |
return (!val || val == StdMod.BODY |
|
|
334 |
|| val == StdMod.HEADER |
|
|
335 |
|| val == StdMod.FOOTER); |
|
|
336 |
} |
|
|
337 |
} |
|
|
338 |
} |
|
|
339 |
};</pre> |
|
|
340 |
|
|
|
341 |
|
|
|
342 |
<h3>Lifecycle Methods: initializer, destructor</h3> |
|
|
343 |
|
|
|
344 |
<p>The base <code>WidgetIO</code> plugin implements the <code>initializer</code> |
|
|
345 |
and <code>destructor</code> lifecycle methods. For the purposes of this example, |
|
|
346 |
we will extend the <code>StdModIO</code> plugin's <code>initializer</code> so that it |
|
|
347 |
activates the Flash based <a href="../io/index.html#cross-domain-transactions">XDR</a> transport so that the |
|
|
348 |
plugin is able to dispatch both in-domain and cross-domain requests |
|
|
349 |
(the transport used for any particular uri is controlled through the plugin's |
|
|
350 |
<code>cfg</code> attribute).</p> |
|
|
351 |
|
|
|
352 |
<pre class="code prettyprint">initializer: function() { |
|
|
353 |
// We setup a flag, so that we know if |
|
|
354 |
// flash is available to make the |
|
|
355 |
// XDR request. |
|
|
356 |
Y.on('io:xdrReady', function() { |
|
|
357 |
transportAvailable = true; |
|
|
358 |
}); |
|
|
359 |
|
|
|
360 |
Y.io.transport({ |
|
|
361 |
id:'flash', |
|
|
362 |
yid: Y.id, |
|
|
363 |
src:'../../build/io-xdr/io.swf?stamp=' + (new Date()).getTime() |
|
|
364 |
}); |
|
|
365 |
}</pre> |
|
|
366 |
|
|
|
367 |
|
|
|
368 |
<h3>Using the Plugin</h3> |
|
|
369 |
|
|
|
370 |
<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>. 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. |
|
|
371 |
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> |
|
|
372 |
|
|
|
373 |
<p>In this example, we'll create a new instance of an Overlay:</p> |
|
|
374 |
|
|
|
375 |
<pre class="code prettyprint">/* Create a new Overlay instance, with content generated from script */ |
|
|
376 |
var overlay = new Y.Overlay({ |
|
|
377 |
width:"40em", |
|
|
378 |
visible:false, |
|
|
379 |
align: { |
|
|
380 |
node:"#show", |
|
|
381 |
points: [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.BL] |
|
|
382 |
}, |
|
|
383 |
zIndex:10, |
|
|
384 |
headerContent: generateHeaderMarkup(), |
|
|
385 |
bodyContent: "Feed data will be displayed here" |
|
|
386 |
});</pre> |
|
|
387 |
|
|
|
388 |
|
|
|
389 |
<p>And then use the <code>plug</code> method to add the <code>StdModIO</code>, providing it with a configuration to use when sending out io transactions (The <a href="overlay-anim-plugin.html">Animation Plugin</a> example shows how you could do the same thing during construction):</p> |
|
|
390 |
|
|
|
391 |
<pre class="code prettyprint">/* |
|
|
392 |
* Add the Standard Module IO Plugin, and configure it to use flash, |
|
|
393 |
* and a formatter specific to the pipes response we're expecting |
|
|
394 |
* from the uri request we'll send out. |
|
|
395 |
*/ |
|
|
396 |
overlay.plug(StdModIO, { |
|
|
397 |
uri : pipes.baseUri + pipes.feeds["ynews"].uri, |
|
|
398 |
cfg:{ |
|
|
399 |
xdr: { |
|
|
400 |
use:'flash' |
|
|
401 |
} |
|
|
402 |
}, |
|
|
403 |
formatter: pipes.formatter, |
|
|
404 |
loading: '<img class="yui3-loading" width="32px" height="32px" src="../assets/overlay/img/ajax-loader.gif">' |
|
|
405 |
});</pre> |
|
|
406 |
|
|
|
407 |
|
|
|
408 |
<p>For this example, the io plugin is configured to use the <code>flash</code> cross-domain transport, to send out requests to the pipes API for the feed the user selects from the dropdown.</p> |
|
|
409 |
|
|
|
410 |
<h3>Getting Feed Data Through Pipes</h3> |
|
|
411 |
|
|
|
412 |
<p>We setup an object (<code>pipes</code>) to hold the feed URIs, which can be looked up and passed to the plugin to dispatch requests for new data:</p> |
|
|
413 |
|
|
|
414 |
<pre class="code prettyprint">/* The Pipes feed URIs to be used to dispatch io transactions */ |
|
|
415 |
|
|
|
416 |
var pipes = { |
|
|
417 |
baseUri : 'http:/'+'/pipes.yahooapis.com/pipes/pipe.run? \ |
|
|
418 |
_id=6b7b2c6a32f5a12e7259c36967052387& \ |
|
|
419 |
_render=json&url=http:/'+'/', |
|
|
420 |
feeds : { |
|
|
421 |
ynews : { |
|
|
422 |
title: 'Yahoo! US News', |
|
|
423 |
uri: 'rss.news.yahoo.com/rss/us' |
|
|
424 |
}, |
|
|
425 |
yui : { |
|
|
426 |
title: 'YUI Blog', |
|
|
427 |
uri: 'feeds.yuiblog.com/YahooUserInterfaceBlog' |
|
|
428 |
}, |
|
|
429 |
slashdot : { |
|
|
430 |
title: 'Slashdot', |
|
|
431 |
uri: 'rss.slashdot.org/Slashdot/slashdot' |
|
|
432 |
}, |
|
|
433 |
... |
|
|
434 |
}, |
|
|
435 |
|
|
|
436 |
...</pre> |
|
|
437 |
|
|
|
438 |
|
|
|
439 |
<p>The data structure also holds the default formatter (<code>pipes.formatter</code>) required to convert the JSON responses from the above URIs to HTML. The JSON utility is first used to parse the json response string. The resulting object is iterated around, using <code>Y.each()</code>, and <code>Y.Lang.sub()</code> is used to generate the list markup:</p> |
|
|
440 |
|
|
|
441 |
<pre class="code prettyprint">... |
|
|
442 |
|
|
|
443 |
// The default formatter, responsible for converting the JSON responses received, |
|
|
444 |
// into HTML. JSON is used for the parsing step, and substitute for some basic |
|
|
445 |
// templating functionality |
|
|
446 |
|
|
|
447 |
formatter : function (val) { |
|
|
448 |
var formatted = "Error parsing feed data"; |
|
|
449 |
try { |
|
|
450 |
var json = Y.JSON.parse(val); |
|
|
451 |
if (json && json.count) { |
|
|
452 |
var html = ['<ul class="yui3-feed-data">']; |
|
|
453 |
var linkTemplate = |
|
|
454 |
'<li><a href="{link}" target="_blank">{title}</a></li>'; |
|
|
455 |
|
|
|
456 |
// Loop around all the items returned, and feed |
|
|
457 |
// them into the template above, using substitution. |
|
|
458 |
Y.each(json.value.items, function(v, i) { |
|
|
459 |
if (i < 10) { |
|
|
460 |
html.push(Y.Lang.sub(linkTemplate, v)); |
|
|
461 |
} |
|
|
462 |
}); |
|
|
463 |
html.push("</ul>"); |
|
|
464 |
formatted = html.join(""); |
|
|
465 |
} else { |
|
|
466 |
formatted = "No Data Available"; |
|
|
467 |
} |
|
|
468 |
} catch(e) { |
|
|
469 |
formatted = "Error parsing feed data"; |
|
|
470 |
} |
|
|
471 |
return formatted; |
|
|
472 |
}</pre> |
|
|
473 |
|
|
|
474 |
|
|
|
475 |
<p>The <code>change</code> handler for the select dropdown binds everything together, taking the currently selected feed, constructing the URI for the feed, setting it on the plugin, and sending out the request:</p> |
|
|
476 |
|
|
|
477 |
<pre class="code prettyprint">/* Handle select change */ |
|
|
478 |
Y.on("change", function(e) { |
|
|
479 |
var val = this.get("value"); |
|
|
480 |
if (transportAvailable) { |
|
|
481 |
if (val != -1) { |
|
|
482 |
overlay.io.set("uri", pipes.baseUri + pipes.feeds[val].uri); |
|
|
483 |
overlay.io.refresh(); |
|
|
484 |
} |
|
|
485 |
} else { |
|
|
486 |
overlay.io.setHTML("Flash doesn't appear to be available. Cross-domain requests to pipes cannot be made without it."); |
|
|
487 |
} |
|
|
488 |
}, "#feedSelector");</pre> |
|
|
489 |
|
|
|
490 |
|
|
|
491 |
<h2>Complete Example Source</h2> |
|
|
492 |
<pre class="code prettyprint"><button type="button" id="show">Show Overlay</button> |
|
|
493 |
<button type="button" id="hide">Hide Overlay</button> |
|
|
494 |
|
|
|
495 |
<script type="text/javascript"> |
|
|
496 |
YUI().use("overlay", "json", "gallery-widget-io", "escape", function(Y) { |
|
|
497 |
|
|
|
498 |
/* Setup local variable for Y.WidgetStdMod, since we use it multiple times */ |
|
|
499 |
var StdMod = Y.WidgetStdMod, |
|
|
500 |
transportAvailable = false; |
|
|
501 |
|
|
|
502 |
StdModIO = function(config) { |
|
|
503 |
StdModIO.superclass.constructor.apply(this, arguments); |
|
|
504 |
}; |
|
|
505 |
|
|
|
506 |
Y.extend(StdModIO, Y.Plugin.WidgetIO, { |
|
|
507 |
initializer: function() { |
|
|
508 |
Y.on('io:xdrReady', function() { |
|
|
509 |
transportAvailable = true; |
|
|
510 |
}); |
|
|
511 |
|
|
|
512 |
Y.io.transport({ |
|
|
513 |
id:'flash', |
|
|
514 |
yid: Y.id, |
|
|
515 |
src:'../../build/io-xdr/io.swf?stamp=' + (new Date()).getTime() |
|
|
516 |
}); |
|
|
517 |
}, |
|
|
518 |
|
|
|
519 |
setHTML: function(content) { |
|
|
520 |
var overlay = this.get('host'); |
|
|
521 |
overlay.setStdModContent(this.get('section'), content); |
|
|
522 |
} |
|
|
523 |
|
|
|
524 |
}, { |
|
|
525 |
NAME: 'stdModIO', |
|
|
526 |
NS: 'io', |
|
|
527 |
ATTRS: { |
|
|
528 |
section: { |
|
|
529 |
value:StdMod.BODY, |
|
|
530 |
validator: function(val) { |
|
|
531 |
return (!val || val == StdMod.BODY || val == StdMod.HEADER || val == StdMod.FOOTER); |
|
|
532 |
} |
|
|
533 |
} |
|
|
534 |
} |
|
|
535 |
}); |
|
|
536 |
|
|
|
537 |
/* The Pipes feed URIs to be used to dispatch io transactions */ |
|
|
538 |
var pipes = { |
|
|
539 |
|
|
|
540 |
// uri data |
|
|
541 |
baseUri : 'http:/'+'/pipes.yahooapis.com/pipes/pipe.run?_id=6b7b2c6a32f5a12e7259c36967052387&_render=json&url=http:/'+'/', |
|
|
542 |
feeds : { |
|
|
543 |
ynews : { |
|
|
544 |
title: 'Yahoo! US News', |
|
|
545 |
uri: 'rss.news.yahoo.com/rss/us' |
|
|
546 |
}, |
|
|
547 |
yui : { |
|
|
548 |
title: 'YUI Blog', |
|
|
549 |
uri: 'feeds.yuiblog.com/YahooUserInterfaceBlog' |
|
|
550 |
}, |
|
|
551 |
slashdot : { |
|
|
552 |
title: 'Slashdot', |
|
|
553 |
uri: 'rss.slashdot.org/Slashdot/slashdot' |
|
|
554 |
}, |
|
|
555 |
ajaxian: { |
|
|
556 |
title: 'Ajaxian', |
|
|
557 |
uri: 'feeds.feedburner.com/ajaxian' |
|
|
558 |
}, |
|
|
559 |
daringfireball: { |
|
|
560 |
title: 'Daring Fireball', |
|
|
561 |
uri: 'daringfireball.net/index.xml' |
|
|
562 |
}, |
|
|
563 |
wiredtech: { |
|
|
564 |
title: 'Wire: Tech Biz', |
|
|
565 |
uri: 'www.wired.com/rss/techbiz.xml' |
|
|
566 |
}, |
|
|
567 |
techcrunch: { |
|
|
568 |
title: 'TechCrunch', |
|
|
569 |
uri: 'feedproxy.google.com/Techcrunch' |
|
|
570 |
} |
|
|
571 |
}, |
|
|
572 |
|
|
|
573 |
// The default formatter, responsible for converting the JSON responses recieved, |
|
|
574 |
// into HTML, using JSON for the parsing step, and substitute for some basic templating functionality |
|
|
575 |
formatter : function (val) { |
|
|
576 |
var formatted = "Error parsing feed data"; |
|
|
577 |
try { |
|
|
578 |
var json = Y.JSON.parse(val); |
|
|
579 |
if (json && json.count) { |
|
|
580 |
var html = ['<ul class="yui3-feed-data">']; |
|
|
581 |
var linkTemplate = '<li><a href="{link}" target="_blank">{title}</a></li>'; |
|
|
582 |
|
|
|
583 |
Y.each(json.value.items, function(v, i) { |
|
|
584 |
if (i < 10) { |
|
|
585 |
v.title = Y.Escape.html(v.title); |
|
|
586 |
v.link = Y.Escape.html(v.link); |
|
|
587 |
html.push(Y.Lang.sub(linkTemplate, v)); |
|
|
588 |
} |
|
|
589 |
}); |
|
|
590 |
html.push("</ul>"); |
|
|
591 |
formatted = html.join(""); |
|
|
592 |
} else { |
|
|
593 |
formatted = "No Data Available"; |
|
|
594 |
} |
|
|
595 |
} catch(e) { |
|
|
596 |
formatted = "Error parsing feed data"; |
|
|
597 |
} |
|
|
598 |
return formatted; |
|
|
599 |
} |
|
|
600 |
}; |
|
|
601 |
|
|
|
602 |
/* Helper function, to generate the select dropdown markup from the pipes feed data */ |
|
|
603 |
function generateHeaderMarkup() { |
|
|
604 |
var optTemplate = '<option value="{id}">{title}</option>', |
|
|
605 |
html = ['<select id="feedSelector" class="yui3-feed-selector"><option value="-1" class="yui3-prompt">Select a Feed...</option>']; |
|
|
606 |
|
|
|
607 |
Y.Object.each(pipes.feeds, function(v, k, o) { |
|
|
608 |
html.push(Y.Lang.sub(optTemplate, {id:k, title:v.title})); |
|
|
609 |
}); |
|
|
610 |
html.push('</select>'); |
|
|
611 |
|
|
|
612 |
return html.join(""); |
|
|
613 |
} |
|
|
614 |
|
|
|
615 |
/* Create a new Overlay instance, with content generated from script */ |
|
|
616 |
var overlay = new Y.Overlay({ |
|
|
617 |
width:"40em", |
|
|
618 |
visible:false, |
|
|
619 |
align: { |
|
|
620 |
node:"#show", |
|
|
621 |
points: [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.BL] |
|
|
622 |
}, |
|
|
623 |
zIndex:10, |
|
|
624 |
headerContent: generateHeaderMarkup(), |
|
|
625 |
bodyContent: "Feed data will be displayed here" |
|
|
626 |
}); |
|
|
627 |
|
|
|
628 |
overlay.render(); |
|
|
629 |
/* |
|
|
630 |
* Add the Standard Module IO Plugin, and configure it to use flash, and a formatter specific |
|
|
631 |
* to the pipes response we're expecting from the uri request we'll send out. |
|
|
632 |
*/ |
|
|
633 |
overlay.plug(StdModIO, { |
|
|
634 |
uri : pipes.baseUri + pipes.feeds["ynews"].uri, |
|
|
635 |
cfg:{ |
|
|
636 |
xdr: { |
|
|
637 |
use:'flash' |
|
|
638 |
} |
|
|
639 |
}, |
|
|
640 |
formatter: pipes.formatter, |
|
|
641 |
loading: '<img class="yui3-loading" width="32px" height="32px" src="../assets/overlay/img/ajax-loader.gif">' |
|
|
642 |
}); |
|
|
643 |
|
|
|
644 |
Y.on("change", function(e) { |
|
|
645 |
var val = this.get("value"); |
|
|
646 |
if (transportAvailable) { |
|
|
647 |
if (val != -1) { |
|
|
648 |
overlay.io.set("uri", pipes.baseUri + pipes.feeds[val].uri); |
|
|
649 |
overlay.io.refresh(); |
|
|
650 |
} |
|
|
651 |
} else { |
|
|
652 |
overlay.io.setHTML("Flash doesn't appear to be available. Cross-domain requests to pipes cannot be made without it."); |
|
|
653 |
} |
|
|
654 |
}, "#feedSelector"); |
|
|
655 |
|
|
|
656 |
Y.on("click", function(e) { |
|
|
657 |
overlay.show(); |
|
|
658 |
}, "#show"); |
|
|
659 |
|
|
|
660 |
Y.on("click", function(e) { |
|
|
661 |
overlay.hide(); |
|
|
662 |
}, "#hide"); |
|
|
663 |
|
|
|
664 |
}); |
|
|
665 |
</script></pre> |
|
|
666 |
|
|
|
667 |
</div> |
|
|
668 |
</div> |
|
|
669 |
</div> |
|
|
670 |
|
|
|
671 |
<div class="yui3-u-1-4"> |
|
|
672 |
<div class="sidebar"> |
|
|
673 |
|
|
|
674 |
|
|
|
675 |
|
|
|
676 |
<div class="sidebox"> |
|
|
677 |
<div class="hd"> |
|
|
678 |
<h2 class="no-toc">Examples</h2> |
|
|
679 |
</div> |
|
|
680 |
|
|
|
681 |
<div class="bd"> |
|
|
682 |
<ul class="examples"> |
|
|
683 |
|
|
|
684 |
|
|
|
685 |
<li data-description="Shows how to instantiate a basic Overlay instance, and use the Overlay's basic XY positioning support."> |
|
|
686 |
<a href="overlay-xy.html">Basic XY Positioning</a> |
|
|
687 |
</li> |
|
|
688 |
|
|
|
689 |
|
|
|
690 |
|
|
|
691 |
<li data-description="Shows how to create a simple tooltip incorporating the overlay shim feature."> |
|
|
692 |
<a href="overlay-tooltip.html">Simple Tooltip</a> |
|
|
693 |
</li> |
|
|
694 |
|
|
|
695 |
|
|
|
696 |
|
|
|
697 |
<li data-description="Shows how to use the Overlay's XY alignment support, to align the Overlay relative to another element, or to the viewport."> |
|
|
698 |
<a href="overlay-align.html">Alignment Support</a> |
|
|
699 |
</li> |
|
|
700 |
|
|
|
701 |
|
|
|
702 |
|
|
|
703 |
<li data-description="Shows how to use the Overlay's zindex and shim support when positioning Overlays above other elements on the page."> |
|
|
704 |
<a href="overlay-stack.html">Stack Support</a> |
|
|
705 |
</li> |
|
|
706 |
|
|
|
707 |
|
|
|
708 |
|
|
|
709 |
<li data-description="Shows how to modify content in the Overlay's header, body and footer sections."> |
|
|
710 |
<a href="overlay-stdmod.html">Standard Module Support</a> |
|
|
711 |
</li> |
|
|
712 |
|
|
|
713 |
|
|
|
714 |
|
|
|
715 |
<li data-description="Shows how to use Overlay's constrainment support, to limit the XY value which can be set for an Overlay."> |
|
|
716 |
<a href="overlay-constrain.html">Constrain Support</a> |
|
|
717 |
</li> |
|
|
718 |
|
|
|
719 |
|
|
|
720 |
|
|
|
721 |
<li data-description="Shows how to create a simple plugin to retrieve content for the Overlay using the io utility."> |
|
|
722 |
<a href="overlay-io-plugin.html">IO Plugin</a> |
|
|
723 |
</li> |
|
|
724 |
|
|
|
725 |
|
|
|
726 |
|
|
|
727 |
<li data-description="Shows how to create a simple plugin to animate the Overlay's movement and visibility."> |
|
|
728 |
<a href="overlay-anim-plugin.html">Animation Plugin</a> |
|
|
729 |
</li> |
|
|
730 |
|
|
|
731 |
|
|
|
732 |
|
|
|
733 |
|
|
|
734 |
|
|
|
735 |
|
|
|
736 |
</ul> |
|
|
737 |
</div> |
|
|
738 |
</div> |
|
|
739 |
|
|
|
740 |
|
|
|
741 |
|
|
|
742 |
<div class="sidebox"> |
|
|
743 |
<div class="hd"> |
|
|
744 |
<h2 class="no-toc">Examples That Use This Component</h2> |
|
|
745 |
</div> |
|
|
746 |
|
|
|
747 |
<div class="bd"> |
|
|
748 |
<ul class="examples"> |
|
|
749 |
|
|
|
750 |
|
|
|
751 |
|
|
|
752 |
|
|
|
753 |
|
|
|
754 |
|
|
|
755 |
|
|
|
756 |
|
|
|
757 |
|
|
|
758 |
|
|
|
759 |
|
|
|
760 |
|
|
|
761 |
|
|
|
762 |
|
|
|
763 |
|
|
|
764 |
|
|
|
765 |
|
|
|
766 |
|
|
|
767 |
<li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event's delegation support and mouseenter event, along with the Overlay widget and Node's support for the WAI-ARIA Roles and States."> |
|
|
768 |
<a href="../node-focusmanager/node-focusmanager-button.html">Accessible Menu Button</a> |
|
|
769 |
</li> |
|
|
770 |
|
|
|
771 |
|
|
|
772 |
|
|
|
773 |
<li data-description="Use StyleSheet to adjust the CSS rules applying a page theme from user input"> |
|
|
774 |
<a href="../stylesheet/stylesheet-theme.html">Adjusting a Page Theme on the Fly</a> |
|
|
775 |
</li> |
|
|
776 |
|
|
|
777 |
|
|
|
778 |
</ul> |
|
|
779 |
</div> |
|
|
780 |
</div> |
|
|
781 |
|
|
|
782 |
</div> |
|
|
783 |
</div> |
|
|
784 |
</div> |
|
|
785 |
</div> |
|
|
786 |
|
|
|
787 |
<script src="../assets/vendor/prettify/prettify-min.js"></script> |
|
|
788 |
<script>prettyPrint();</script> |
|
|
789 |
|
|
|
790 |
<script> |
|
|
791 |
YUI.Env.Tests = { |
|
|
792 |
examples: [], |
|
|
793 |
project: '../assets', |
|
|
794 |
assets: '../assets/overlay', |
|
|
795 |
name: 'overlay-io-plugin', |
|
|
796 |
title: 'IO Plugin', |
|
|
797 |
newWindow: '', |
|
|
798 |
auto: false |
|
|
799 |
}; |
|
|
800 |
YUI.Env.Tests.examples.push('overlay-xy'); |
|
|
801 |
YUI.Env.Tests.examples.push('overlay-tooltip'); |
|
|
802 |
YUI.Env.Tests.examples.push('overlay-align'); |
|
|
803 |
YUI.Env.Tests.examples.push('overlay-stack'); |
|
|
804 |
YUI.Env.Tests.examples.push('overlay-stdmod'); |
|
|
805 |
YUI.Env.Tests.examples.push('overlay-constrain'); |
|
|
806 |
YUI.Env.Tests.examples.push('overlay-io-plugin'); |
|
|
807 |
YUI.Env.Tests.examples.push('overlay-anim-plugin'); |
|
|
808 |
YUI.Env.Tests.examples.push('node-focusmanager-button'); |
|
|
809 |
YUI.Env.Tests.examples.push('stylesheet-theme'); |
|
|
810 |
|
|
|
811 |
</script> |
|
|
812 |
<script src="../assets/yui/test-runner.js"></script> |
|
|
813 |
|
|
|
814 |
|
|
|
815 |
|
|
|
816 |
</body> |
|
|
817 |
</html> |