|
0
|
1 |
|
|
|
2 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
|
3 |
<html>
|
|
|
4 |
<head>
|
|
|
5 |
<title>YUI Library Examples: Overlay: IO Plugin</title>
|
|
|
6 |
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
|
7 |
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
|
|
|
8 |
|
|
|
9 |
<style>
|
|
|
10 |
/*Supplemental CSS for the YUI distribution*/
|
|
|
11 |
#custom-doc { width: 95%; min-width: 950px; }
|
|
|
12 |
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
|
|
|
13 |
/* #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
|
|
|
14 |
</style>
|
|
|
15 |
|
|
|
16 |
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
|
|
|
17 |
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
|
|
|
18 |
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
|
|
|
19 |
<style type="text/css">
|
|
|
20 |
.yui-overlay-content {
|
|
|
21 |
padding:5px;
|
|
|
22 |
background-color:#ccc;
|
|
|
23 |
border:1px solid #000;
|
|
|
24 |
}
|
|
|
25 |
|
|
|
26 |
.yui-overlay .yui-widget-hd,
|
|
|
27 |
.yui-overlay .yui-widget-bd,
|
|
|
28 |
.yui-overlay .yui-widget-ft {
|
|
|
29 |
background-color:#eee;
|
|
|
30 |
padding:2px;
|
|
|
31 |
border:1px solid #999;
|
|
|
32 |
text-align:left;
|
|
|
33 |
}
|
|
|
34 |
|
|
|
35 |
.yui-overlay .yui-widget-bd {
|
|
|
36 |
background-color:#fff;
|
|
|
37 |
text-align:center;
|
|
|
38 |
vertical-align:middle;
|
|
|
39 |
}
|
|
|
40 |
|
|
|
41 |
.yui-overlay .yui-widget-bd .yui-feed-data {
|
|
|
42 |
text-align:left;
|
|
|
43 |
}
|
|
|
44 |
|
|
|
45 |
.yui-overlay .yui-feed-selector .yui-prompt {
|
|
|
46 |
font-weight:bold;
|
|
|
47 |
}
|
|
|
48 |
|
|
|
49 |
</style>
|
|
|
50 |
</head>
|
|
|
51 |
<body id="yahoo-com" class=" yui-skin-sam">
|
|
|
52 |
<div id="custom-doc" class="yui-t2">
|
|
|
53 |
<div id="hd">
|
|
|
54 |
<div id="ygunav">
|
|
|
55 |
<p>
|
|
|
56 |
<em>
|
|
|
57 |
<a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>
|
|
|
58 |
</em>
|
|
|
59 |
</p>
|
|
|
60 |
<form action="http://search.yahoo.com/search" id="sitesearchform">
|
|
|
61 |
<input name="vs" type="hidden" value="developer.yahoo.com">
|
|
|
62 |
<input name="vs" type="hidden" value="yuiblog.com">
|
|
|
63 |
<div id="sitesearch">
|
|
|
64 |
<label for="searchinput">Site Search (YDN & YUIBlog): </label>
|
|
|
65 |
<input type="text" id="searchinput" name="p">
|
|
|
66 |
<input type="submit" value="Search" id="searchsubmit" class="ygbt">
|
|
|
67 |
</div>
|
|
|
68 |
</form>
|
|
|
69 |
</div>
|
|
|
70 |
<div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div>
|
|
|
71 |
<div id="pagetitle"><h1>YUI Library Examples: Overlay: IO Plugin</h1></div>
|
|
|
72 |
</div>
|
|
|
73 |
<div id="bd">
|
|
|
74 |
|
|
|
75 |
|
|
|
76 |
<div id="yui-main">
|
|
|
77 |
<div class="yui-b">
|
|
|
78 |
<div class="yui-ge">
|
|
|
79 |
<div class="yui-u first example" id="main">
|
|
|
80 |
|
|
|
81 |
<h2>Overlay: IO Plugin</h2>
|
|
|
82 |
|
|
|
83 |
<div id="example" class="promo">
|
|
|
84 |
<div class="example-intro">
|
|
|
85 |
<p>This example shows how you can use Widget's plugin infrastructure to add additional features to an existing widget.</p>
|
|
|
86 |
<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>
|
|
|
87 |
</div>
|
|
|
88 |
|
|
|
89 |
<div class="module example-container ">
|
|
|
90 |
<div class="hd exampleHd">
|
|
|
91 |
<p class="newWindowButton yui-skin-sam">
|
|
|
92 |
<a href="overlay-io-plugin_clean.html" target="_blank">View example in new window.</a>
|
|
|
93 |
</p>
|
|
|
94 |
</div> <div id="example-canvas" class="bd">
|
|
|
95 |
|
|
|
96 |
|
|
|
97 |
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
98 |
|
|
|
99 |
<button type="button" id="show">Show Overlay</button>
|
|
|
100 |
<button type="button" id="hide">Hide Overlay</button>
|
|
|
101 |
|
|
|
102 |
<script type="text/javascript">
|
|
|
103 |
YUI({base:"../../build/", timeout: 10000}).use("overlay", "substitute", "io", "json", "plugin", function(Y) {
|
|
|
104 |
|
|
|
105 |
/* Setup local variable for Y.WidgetStdMod, since we use it multiple times */
|
|
|
106 |
var StdMod = Y.WidgetStdMod;
|
|
|
107 |
|
|
|
108 |
/* Standard Module IO Plugin Constructor */
|
|
|
109 |
function StdModIOPlugin(config) {
|
|
|
110 |
StdModIOPlugin.superclass.constructor.apply(this, arguments);
|
|
|
111 |
}
|
|
|
112 |
|
|
|
113 |
/*
|
|
|
114 |
* The namespace for the plugin. This will be the property on the widget, which will
|
|
|
115 |
* reference the plugin instance, when it's plugged in
|
|
|
116 |
*/
|
|
|
117 |
StdModIOPlugin.NS = "io";
|
|
|
118 |
|
|
|
119 |
/*
|
|
|
120 |
* The NAME of the StdModIOPlugin class. Used to prefix events generated
|
|
|
121 |
* by the plugin class.
|
|
|
122 |
*/
|
|
|
123 |
StdModIOPlugin.NAME = "stdModIOPlugin";
|
|
|
124 |
|
|
|
125 |
/*
|
|
|
126 |
* The default set of attributes for the StdModIOPlugin class.
|
|
|
127 |
*/
|
|
|
128 |
StdModIOPlugin.ATTRS = {
|
|
|
129 |
|
|
|
130 |
/*
|
|
|
131 |
* The uri to use for the io request
|
|
|
132 |
*/
|
|
|
133 |
uri : {
|
|
|
134 |
value:null
|
|
|
135 |
},
|
|
|
136 |
|
|
|
137 |
/*
|
|
|
138 |
* The io configuration object, to pass to io when intiating a transaction
|
|
|
139 |
*/
|
|
|
140 |
cfg : {
|
|
|
141 |
value:null
|
|
|
142 |
},
|
|
|
143 |
|
|
|
144 |
/*
|
|
|
145 |
* The default formatter to use when formatting response data. The default
|
|
|
146 |
* implementation simply passes back the response data passed in.
|
|
|
147 |
*/
|
|
|
148 |
formatter : {
|
|
|
149 |
valueFn: function() {
|
|
|
150 |
return this._defFormatter;
|
|
|
151 |
}
|
|
|
152 |
},
|
|
|
153 |
|
|
|
154 |
/*
|
|
|
155 |
* The Standard Module section to which the io plugin instance is bound.
|
|
|
156 |
* Response data will be used to populate this section, after passing through
|
|
|
157 |
* the configured formatter.
|
|
|
158 |
*/
|
|
|
159 |
section: {
|
|
|
160 |
value:StdMod.BODY,
|
|
|
161 |
validator: function(val) {
|
|
|
162 |
return (!val || val == StdMod.BODY || val == StdMod.HEADER || val == StdMod.FOOTER);
|
|
|
163 |
}
|
|
|
164 |
},
|
|
|
165 |
|
|
|
166 |
/*
|
|
|
167 |
* The default loading indicator to use, when an io transaction is in progress.
|
|
|
168 |
*/
|
|
|
169 |
loading: {
|
|
|
170 |
value: '<img class="yui-loading" width="32px" height="32px" src="assets/img/ajax-loader.gif">'
|
|
|
171 |
}
|
|
|
172 |
};
|
|
|
173 |
|
|
|
174 |
/* Extend the base plugin class */
|
|
|
175 |
Y.extend(StdModIOPlugin, Y.Plugin.Base, {
|
|
|
176 |
|
|
|
177 |
/*
|
|
|
178 |
* Initialization code. Called when the
|
|
|
179 |
* plugin is instantiated (whenever it's
|
|
|
180 |
* plugged into the host)
|
|
|
181 |
*/
|
|
|
182 |
initializer: function(config) {
|
|
|
183 |
Y.io.transport({
|
|
|
184 |
id:'flash',
|
|
|
185 |
yid: Y.id,
|
|
|
186 |
src:'../../build/io/io.swf?stamp=' + (new Date()).getTime()
|
|
|
187 |
});
|
|
|
188 |
},
|
|
|
189 |
|
|
|
190 |
/*
|
|
|
191 |
* Destruction code. Terminates the activeIO transaction if it exists
|
|
|
192 |
*/
|
|
|
193 |
destructor : function() {
|
|
|
194 |
if (this._activeIO) {
|
|
|
195 |
Y.io.abort(this._activeIO);
|
|
|
196 |
this._activeIO = null;
|
|
|
197 |
}
|
|
|
198 |
},
|
|
|
199 |
|
|
|
200 |
/*
|
|
|
201 |
* IO Plugin specific method, use to initiate a new io request using the current
|
|
|
202 |
* io configuration settings.
|
|
|
203 |
*/
|
|
|
204 |
refresh : function() {
|
|
|
205 |
section = this.get("section");
|
|
|
206 |
|
|
|
207 |
if (section && !this._activeIO) {
|
|
|
208 |
var uri = this.get("uri");
|
|
|
209 |
|
|
|
210 |
if (uri) {
|
|
|
211 |
|
|
|
212 |
cfg = this.get("cfg") || {};
|
|
|
213 |
cfg.on = cfg.on || {};
|
|
|
214 |
|
|
|
215 |
cfg.on.start = cfg.on.start || Y.bind(this._defStartHandler, this);
|
|
|
216 |
cfg.on.complete = cfg.on.complete || Y.bind(this._defCompleteHandler, this);
|
|
|
217 |
|
|
|
218 |
cfg.on.success = cfg.on.success || Y.bind(this._defSuccessHandler, this);
|
|
|
219 |
cfg.on.failure = cfg.on.failure || Y.bind(this._defFailureHandler, this);
|
|
|
220 |
|
|
|
221 |
cfg.method = cfg.method; // io defaults to "GET" if not defined
|
|
|
222 |
|
|
|
223 |
Y.io(uri, cfg);
|
|
|
224 |
}
|
|
|
225 |
}
|
|
|
226 |
},
|
|
|
227 |
|
|
|
228 |
/*
|
|
|
229 |
* The default io transaction success handler
|
|
|
230 |
*/
|
|
|
231 |
_defSuccessHandler : function(id, o) {
|
|
|
232 |
var response = o.responseXML || o.responseText;
|
|
|
233 |
var section = this.get("section");
|
|
|
234 |
var formatter = this.get("formatter");
|
|
|
235 |
|
|
|
236 |
this.get("host").setStdModContent(section, formatter(response));
|
|
|
237 |
},
|
|
|
238 |
|
|
|
239 |
/*
|
|
|
240 |
* The default io transaction failure handler
|
|
|
241 |
*/
|
|
|
242 |
_defFailureHandler : function(id, o) {
|
|
|
243 |
this.get("host").setStdModContent(this.get("section"), "Failed to retrieve content");
|
|
|
244 |
},
|
|
|
245 |
|
|
|
246 |
/*
|
|
|
247 |
* The default io transaction start handler
|
|
|
248 |
*/
|
|
|
249 |
_defStartHandler : function(id, o) {
|
|
|
250 |
this._activeIO = o;
|
|
|
251 |
this.get("host").setStdModContent(this.get("section"), this.get("loading"));
|
|
|
252 |
},
|
|
|
253 |
|
|
|
254 |
/*
|
|
|
255 |
* The default io transaction complete handler
|
|
|
256 |
*/
|
|
|
257 |
_defCompleteHandler : function(id, o) {
|
|
|
258 |
this._activeIO = null;
|
|
|
259 |
},
|
|
|
260 |
|
|
|
261 |
/*
|
|
|
262 |
* The default response formatter
|
|
|
263 |
*/
|
|
|
264 |
_defFormatter : function(val) {
|
|
|
265 |
return val
|
|
|
266 |
}
|
|
|
267 |
});
|
|
|
268 |
|
|
|
269 |
/* The Pipes feed URIs to be used to dispatch io transactions */
|
|
|
270 |
var pipes = {
|
|
|
271 |
|
|
|
272 |
// uri data
|
|
|
273 |
baseUri : 'http:/'+'/pipes.yahooapis.com/pipes/pipe.run?_id=6b7b2c6a32f5a12e7259c36967052387&_render=json&url=http:/'+'/',
|
|
|
274 |
feeds : {
|
|
|
275 |
ynews : {
|
|
|
276 |
title: 'Yahoo! US News',
|
|
|
277 |
uri: 'rss.news.yahoo.com/rss/us'
|
|
|
278 |
},
|
|
|
279 |
yui : {
|
|
|
280 |
title: 'YUI Blog',
|
|
|
281 |
uri: 'feeds.yuiblog.com/YahooUserInterfaceBlog'
|
|
|
282 |
},
|
|
|
283 |
slashdot : {
|
|
|
284 |
title: 'Slashdot',
|
|
|
285 |
uri: 'rss.slashdot.org/Slashdot/slashdot'
|
|
|
286 |
},
|
|
|
287 |
ajaxian: {
|
|
|
288 |
title: 'Ajaxian',
|
|
|
289 |
uri: 'feeds.feedburner.com/ajaxian'
|
|
|
290 |
},
|
|
|
291 |
daringfireball: {
|
|
|
292 |
title: 'Daring Fireball',
|
|
|
293 |
uri: 'daringfireball.net/index.xml'
|
|
|
294 |
},
|
|
|
295 |
wiredtech: {
|
|
|
296 |
title: 'Wire: Tech Biz',
|
|
|
297 |
uri: 'www.wired.com/rss/techbiz.xml'
|
|
|
298 |
},
|
|
|
299 |
techcrunch: {
|
|
|
300 |
title: 'TechCrunch',
|
|
|
301 |
uri: 'feedproxy.google.com/Techcrunch'
|
|
|
302 |
}
|
|
|
303 |
},
|
|
|
304 |
|
|
|
305 |
// The default formatter, responsible for converting the JSON responses recieved,
|
|
|
306 |
// into HTML, using JSON for the parsing step, and substitute for some basic templating functionality
|
|
|
307 |
formatter : function (val) {
|
|
|
308 |
var formatted = "Error parsing feed data";
|
|
|
309 |
try {
|
|
|
310 |
var json = Y.JSON.parse(val);
|
|
|
311 |
if (json && json.count) {
|
|
|
312 |
var html = ['<ul class="yui-feed-data">'];
|
|
|
313 |
var linkTemplate = '<li><a href="{link}" target="_blank">{title}</a></li>';
|
|
|
314 |
|
|
|
315 |
Y.each(json.value.items, function(v, i) {
|
|
|
316 |
if (i < 10) {
|
|
|
317 |
html.push(Y.substitute(linkTemplate, v));
|
|
|
318 |
}
|
|
|
319 |
});
|
|
|
320 |
html.push("</ul>");
|
|
|
321 |
formatted = html.join("");
|
|
|
322 |
} else {
|
|
|
323 |
formatted = "No Data Available";
|
|
|
324 |
}
|
|
|
325 |
} catch(e) {
|
|
|
326 |
formatted = "Error parsing feed data";
|
|
|
327 |
}
|
|
|
328 |
return formatted;
|
|
|
329 |
}
|
|
|
330 |
};
|
|
|
331 |
|
|
|
332 |
/* Helper function, to generate the select dropdown markup from the pipes feed data */
|
|
|
333 |
function generateHeaderMarkup() {
|
|
|
334 |
var optTemplate = '<option value="{id}">{title}</option>',
|
|
|
335 |
html = ['<select id="feedSelector" class="yui-feed-selector"><option value="-1" class="yui-prompt">Select a Feed...</option>'];
|
|
|
336 |
|
|
|
337 |
Y.Object.each(pipes.feeds, function(v, k, o) {
|
|
|
338 |
html.push(Y.substitute(optTemplate, {id:k, title:v.title}));
|
|
|
339 |
});
|
|
|
340 |
html.push('</select>');
|
|
|
341 |
|
|
|
342 |
return html.join("");
|
|
|
343 |
}
|
|
|
344 |
|
|
|
345 |
/* Create a new Overlay instance, with content generated from script */
|
|
|
346 |
var overlay = new Y.Overlay({
|
|
|
347 |
width:"40em",
|
|
|
348 |
visible:false,
|
|
|
349 |
align: {
|
|
|
350 |
node:"#show",
|
|
|
351 |
points: [Y.WidgetPositionExt.TL, Y.WidgetPositionExt.BL]
|
|
|
352 |
},
|
|
|
353 |
zIndex:10,
|
|
|
354 |
headerContent: generateHeaderMarkup(),
|
|
|
355 |
bodyContent: "Feed data will be displayed here"
|
|
|
356 |
});
|
|
|
357 |
|
|
|
358 |
/*
|
|
|
359 |
* Add the Standard Module IO Plugin, and configure it to use flash, and a formatter specific
|
|
|
360 |
* to the pipes response we're expecting from the uri request we'll send out.
|
|
|
361 |
*/
|
|
|
362 |
overlay.plug(StdModIOPlugin, {
|
|
|
363 |
uri : pipes.baseUri + pipes.feeds["ynews"].uri,
|
|
|
364 |
cfg:{
|
|
|
365 |
xdr: {
|
|
|
366 |
use:'flash'
|
|
|
367 |
}
|
|
|
368 |
},
|
|
|
369 |
formatter: pipes.formatter
|
|
|
370 |
});
|
|
|
371 |
overlay.render();
|
|
|
372 |
|
|
|
373 |
Y.on("change", function(e) {
|
|
|
374 |
var val = this.get("value");
|
|
|
375 |
if (val != -1) {
|
|
|
376 |
overlay.io.set("uri", pipes.baseUri + pipes.feeds[val].uri);
|
|
|
377 |
overlay.io.refresh();
|
|
|
378 |
}
|
|
|
379 |
}, "#feedSelector");
|
|
|
380 |
|
|
|
381 |
Y.on("click", function(e) {
|
|
|
382 |
overlay.show();
|
|
|
383 |
}, "#show");
|
|
|
384 |
|
|
|
385 |
Y.on("click", function(e) {
|
|
|
386 |
overlay.hide();
|
|
|
387 |
}, "#hide");
|
|
|
388 |
|
|
|
389 |
});
|
|
|
390 |
</script>
|
|
|
391 |
|
|
|
392 |
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
393 |
|
|
|
394 |
|
|
|
395 |
</div>
|
|
|
396 |
</div>
|
|
|
397 |
</div>
|
|
|
398 |
|
|
|
399 |
<h3>Creating an IO Plugin For Overlay</h3>
|
|
|
400 |
|
|
|
401 |
<h4>Setting Up The YUI Instance</h4>
|
|
|
402 |
|
|
|
403 |
<p>For this example, we'll pull in <code>overlay</code>; the <code>io</code>, <code>json</code> and <code>substitute</code> utility modules and the <code>plugin</code> module. The <code>io</code> module provides the XHR support we need for the IO plugin. The <code>json</code> and <code>substitute</code> modules provide the support we need to parse/transform JSON responses into HTML. The <code>Plugin</code> base class is the class we'll extend to create our io plugin class for <code>Overlay</code>.
|
|
|
404 |
The code to set up our sandbox instance is shown below:</p>
|
|
|
405 |
|
|
|
406 |
<div id="syntax1" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">(</span><span class="br0">{</span>...<span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"overlay"</span><span class="sy0">,</span> <span class="st0">"substitute"</span><span class="sy0">,</span> <span class="st0">"io"</span><span class="sy0">,</span> <span class="st0">"json"</span><span class="sy0">,</span> <span class="st0">"plugin"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="co1">// We'll write our code here, after pulling in the default Overlay widget, </span></div></li><li class="li1"><div class="de1"> <span class="co1">// the IO utility, the Plugin base class along with the </span></div></li><li class="li1"><div class="de1"> <span class="co1">// Substitute and JSON utilities</span></div></li><li class="li2"><div class="de2"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">(</span><span class="br0">{</span>...<span class="br0">}</span><span class="br0">)</span>.<span class="kw2">use</span><span class="br0">(</span><span class="st0">"overlay"</span><span class="sy0">,</span> <span class="st0">"substitute"</span><span class="sy0">,</span> <span class="st0">"io"</span><span class="sy0">,</span> <span class="st0">"json"</span><span class="sy0">,</span> <span class="st0">"plugin"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>Y<span class="br0">)</span> <span class="br0">{</span>
|
|
|
407 |
<span class="co1">// We'll write our code here, after pulling in the default Overlay widget, </span>
|
|
|
408 |
<span class="co1">// the IO utility, the Plugin base class along with the </span>
|
|
|
409 |
<span class="co1">// Substitute and JSON utilities</span>
|
|
|
410 |
<span class="br0">}</span></pre></div><textarea id="syntax1-plain">YUI({...}).use("overlay", "substitute", "io", "json", "plugin", function(Y) {
|
|
|
411 |
// We'll write our code here, after pulling in the default Overlay widget,
|
|
|
412 |
// the IO utility, the Plugin base class along with the
|
|
|
413 |
// Substitute and JSON utilities
|
|
|
414 |
}</textarea></div>
|
|
|
415 |
<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>
|
|
|
416 |
|
|
|
417 |
<h4>StdModIOPlugin Class Structure</h4>
|
|
|
418 |
|
|
|
419 |
<p>The <code>StdModIOPlugin</code> class will extend the <code>Plugin</code> base class. Since <code>Plugin</code> derives from <code>Base</code>, we follow the same pattern we use for widgets and other utilities which extend Base to setup our new class.</p>
|
|
|
420 |
|
|
|
421 |
<p>Namely:</p>
|
|
|
422 |
|
|
|
423 |
<ul>
|
|
|
424 |
<li>Setting up the constructor to invoke the superclass constructor</li>
|
|
|
425 |
<li>Setting up a <code>NAME</code> property, to identify the class</li>
|
|
|
426 |
<li>Setting up the default attributes, using the <code>ATTRS</code> property</li>
|
|
|
427 |
<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>
|
|
|
428 |
</ul>
|
|
|
429 |
|
|
|
430 |
<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>StdModIOPlugin</code> instance on the host class (e.g. <code>overlay.io</code> will be an instance of <code>StdModIOPlugin</code>)</p>.
|
|
|
431 |
|
|
|
432 |
<div id="syntax2" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/* Standard Module IO Plugin Constructor */</span></div></li><li class="li1"><div class="de1"><span class="kw2">function</span> StdModIOPlugin<span class="br0">(</span>config<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> StdModIOPlugin.<span class="me1">superclass</span>.<span class="me1">constructor</span>.<span class="me1">apply</span><span class="br0">(</span><span class="kw1">this</span><span class="sy0">,</span> arguments<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"><span class="coMULTI">/* </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * The namespace for the plugin. This will be the property on the widget, </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * which will reference the plugin instance, when it's plugged in</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> */</span></div></li><li class="li2"><div class="de2">StdModIOPlugin.<span class="me1">NS</span> <span class="sy0">=</span> <span class="st0">"io"</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="coMULTI">/*</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * The NAME of the StdModIOPlugin class. Used to prefix events generated</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * by the plugin class.</span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1">StdModIOPlugin.<span class="kw3">NAME</span> <span class="sy0">=</span> <span class="st0">"stdModIOPlugin"</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="coMULTI">/*</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * The default set of attributes for the StdModIOPlugin class.</span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1">StdModIOPlugin.<span class="me1">ATTRS</span> <span class="sy0">=</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> uri <span class="sy0">:</span> <span class="br0">{</span>...<span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> cfg <span class="sy0">:</span> <span class="br0">{</span>...<span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> formatter <span class="sy0">:</span> <span class="br0">{</span>...<span class="br0">}</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> section<span class="sy0">:</span> <span class="br0">{</span>...<span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> loading<span class="sy0">:</span> <span class="br0">{</span>...<span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="co2">/* Extend the base plugin class */</span></div></li><li class="li2"><div class="de2">Y.<span class="me1">extend</span><span class="br0">(</span>StdModIOPlugin<span class="sy0">,</span> Y.<span class="me1">Plugin</span><span class="sy0">,</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Lifecycle methods.</span></div></li><li class="li1"><div class="de1"> initializer<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>...<span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="co1">// IO Plugin specific methods</span></div></li><li class="li1"><div class="de1"> refresh <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>...<span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Default IO transaction handlers</span></div></li><li class="li1"><div class="de1"> _defSuccessHandler <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>id<span class="sy0">,</span> o<span class="br0">)</span> <span class="br0">{</span>...<span class="br0">}</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> _defFailureHandler <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>id<span class="sy0">,</span> o<span class="br0">)</span> <span class="br0">{</span>...<span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> _defStartHandler <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>id<span class="sy0">,</span> o<span class="br0">)</span> <span class="br0">{</span>...<span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> _defCompleteHandler <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>id<span class="sy0">,</span> o<span class="br0">)</span> <span class="br0">{</span>...<span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> _defFormatter <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>val<span class="br0">)</span> <span class="br0">{</span>...<span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="coMULTI">/* Standard Module IO Plugin Constructor */</span>
|
|
|
433 |
<span class="kw2">function</span> StdModIOPlugin<span class="br0">(</span>config<span class="br0">)</span> <span class="br0">{</span>
|
|
|
434 |
StdModIOPlugin.<span class="me1">superclass</span>.<span class="me1">constructor</span>.<span class="me1">apply</span><span class="br0">(</span><span class="kw1">this</span><span class="sy0">,</span> arguments<span class="br0">)</span><span class="sy0">;</span>
|
|
|
435 |
<span class="br0">}</span>
|
|
|
436 |
|
|
|
437 |
<span class="coMULTI">/*
|
|
|
438 |
* The namespace for the plugin. This will be the property on the widget,
|
|
|
439 |
* which will reference the plugin instance, when it's plugged in
|
|
|
440 |
*/</span>
|
|
|
441 |
StdModIOPlugin.<span class="me1">NS</span> <span class="sy0">=</span> <span class="st0">"io"</span><span class="sy0">;</span>
|
|
|
442 |
|
|
|
443 |
<span class="coMULTI">/*
|
|
|
444 |
* The NAME of the StdModIOPlugin class. Used to prefix events generated
|
|
|
445 |
* by the plugin class.
|
|
|
446 |
*/</span>
|
|
|
447 |
StdModIOPlugin.<span class="kw3">NAME</span> <span class="sy0">=</span> <span class="st0">"stdModIOPlugin"</span><span class="sy0">;</span>
|
|
|
448 |
|
|
|
449 |
<span class="coMULTI">/*
|
|
|
450 |
* The default set of attributes for the StdModIOPlugin class.
|
|
|
451 |
*/</span>
|
|
|
452 |
StdModIOPlugin.<span class="me1">ATTRS</span> <span class="sy0">=</span> <span class="br0">{</span>
|
|
|
453 |
uri <span class="sy0">:</span> <span class="br0">{</span>...<span class="br0">}</span><span class="sy0">,</span>
|
|
|
454 |
cfg <span class="sy0">:</span> <span class="br0">{</span>...<span class="br0">}</span><span class="sy0">,</span>
|
|
|
455 |
formatter <span class="sy0">:</span> <span class="br0">{</span>...<span class="br0">}</span><span class="sy0">,</span>
|
|
|
456 |
section<span class="sy0">:</span> <span class="br0">{</span>...<span class="br0">}</span><span class="sy0">,</span>
|
|
|
457 |
loading<span class="sy0">:</span> <span class="br0">{</span>...<span class="br0">}</span>
|
|
|
458 |
<span class="br0">}</span><span class="sy0">;</span>
|
|
|
459 |
|
|
|
460 |
<span class="co2">/* Extend the base plugin class */</span>
|
|
|
461 |
Y.<span class="me1">extend</span><span class="br0">(</span>StdModIOPlugin<span class="sy0">,</span> Y.<span class="me1">Plugin</span><span class="sy0">,</span> <span class="br0">{</span>
|
|
|
462 |
|
|
|
463 |
<span class="co1">// Lifecycle methods.</span>
|
|
|
464 |
initializer<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>...<span class="br0">}</span><span class="sy0">,</span>
|
|
|
465 |
|
|
|
466 |
<span class="co1">// IO Plugin specific methods</span>
|
|
|
467 |
refresh <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>...<span class="br0">}</span><span class="sy0">,</span>
|
|
|
468 |
|
|
|
469 |
<span class="co1">// Default IO transaction handlers</span>
|
|
|
470 |
_defSuccessHandler <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>id<span class="sy0">,</span> o<span class="br0">)</span> <span class="br0">{</span>...<span class="br0">}</span><span class="sy0">,</span>
|
|
|
471 |
_defFailureHandler <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>id<span class="sy0">,</span> o<span class="br0">)</span> <span class="br0">{</span>...<span class="br0">}</span><span class="sy0">,</span>
|
|
|
472 |
_defStartHandler <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>id<span class="sy0">,</span> o<span class="br0">)</span> <span class="br0">{</span>...<span class="br0">}</span><span class="sy0">,</span>
|
|
|
473 |
_defCompleteHandler <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>id<span class="sy0">,</span> o<span class="br0">)</span> <span class="br0">{</span>...<span class="br0">}</span><span class="sy0">,</span>
|
|
|
474 |
_defFormatter <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>val<span class="br0">)</span> <span class="br0">{</span>...<span class="br0">}</span>
|
|
|
475 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax2-plain">/* Standard Module IO Plugin Constructor */
|
|
|
476 |
function StdModIOPlugin(config) {
|
|
|
477 |
StdModIOPlugin.superclass.constructor.apply(this, arguments);
|
|
|
478 |
}
|
|
|
479 |
|
|
|
480 |
/*
|
|
|
481 |
* The namespace for the plugin. This will be the property on the widget,
|
|
|
482 |
* which will reference the plugin instance, when it's plugged in
|
|
|
483 |
*/
|
|
|
484 |
StdModIOPlugin.NS = "io";
|
|
|
485 |
|
|
|
486 |
/*
|
|
|
487 |
* The NAME of the StdModIOPlugin class. Used to prefix events generated
|
|
|
488 |
* by the plugin class.
|
|
|
489 |
*/
|
|
|
490 |
StdModIOPlugin.NAME = "stdModIOPlugin";
|
|
|
491 |
|
|
|
492 |
/*
|
|
|
493 |
* The default set of attributes for the StdModIOPlugin class.
|
|
|
494 |
*/
|
|
|
495 |
StdModIOPlugin.ATTRS = {
|
|
|
496 |
uri : {...},
|
|
|
497 |
cfg : {...},
|
|
|
498 |
formatter : {...},
|
|
|
499 |
section: {...},
|
|
|
500 |
loading: {...}
|
|
|
501 |
};
|
|
|
502 |
|
|
|
503 |
/* Extend the base plugin class */
|
|
|
504 |
Y.extend(StdModIOPlugin, Y.Plugin, {
|
|
|
505 |
|
|
|
506 |
// Lifecycle methods.
|
|
|
507 |
initializer: function() {...},
|
|
|
508 |
|
|
|
509 |
// IO Plugin specific methods
|
|
|
510 |
refresh : function() {...},
|
|
|
511 |
|
|
|
512 |
// Default IO transaction handlers
|
|
|
513 |
_defSuccessHandler : function(id, o) {...},
|
|
|
514 |
_defFailureHandler : function(id, o) {...},
|
|
|
515 |
_defStartHandler : function(id, o) {...},
|
|
|
516 |
_defCompleteHandler : function(id, o) {...},
|
|
|
517 |
_defFormatter : function(val) {...}
|
|
|
518 |
});</textarea></div>
|
|
|
519 |
<h4>Plugin Attributes</h4>
|
|
|
520 |
|
|
|
521 |
<p>The <code>StdModIOPlugin</code> is a fairly simple plugin class. It provides incremental functionality. It does not need to modify the behavior of any methods on the host Overlay instance, or monitor any Overlay events (unlike the <a href="overlay-anim-plugin.html">AnimPlugin</a> example).</p>
|
|
|
522 |
|
|
|
523 |
<p>It sets up the following attributes, which are used to control how the IO plugin's <code>refresh</code> method behaves:</p>
|
|
|
524 |
|
|
|
525 |
<dl>
|
|
|
526 |
<dt>uri</dt>
|
|
|
527 |
<dd>The uri to use for the io request</dd>
|
|
|
528 |
<dt>cfg</dt>
|
|
|
529 |
<dd>The io configuration object, to pass to io when initiating a transaction</dd>
|
|
|
530 |
<dt>formatter</dt>
|
|
|
531 |
<dd>The formatter to use to formatting response data. The default implementation simply passes back the response data passed in, unchanged.</dd>
|
|
|
532 |
<dt>section</dt>
|
|
|
533 |
<dd>The Standard Module section to which the io plugin instance is bound. Response data will be used to populate this section, after passing through the configured formatter.</dd>
|
|
|
534 |
<dt>loading</dt>
|
|
|
535 |
<dd>The default content to display while an io transaction is in progress</dd>
|
|
|
536 |
</dl>
|
|
|
537 |
|
|
|
538 |
<p>In terms of code, the attributes for the plugin are set up using the standard <code>ATTRS</code> property:</p>
|
|
|
539 |
|
|
|
540 |
<div id="syntax3" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/* Setup local variable for Y.WidgetStdMod, since we use it </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> multiple times to reference static properties */</span></div></li><li class="li1"><div class="de1"><span class="kw2">var</span> StdMod <span class="sy0">=</span> Y.<span class="me1">WidgetStdMod</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2">...</div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="co2">/* Attribute definition */</span></div></li><li class="li1"><div class="de1">StdModIOPlugin.<span class="me1">ATTRS</span> <span class="sy0">=</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="coMULTI">/*</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * The uri to use for the io request</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1"> uri <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> value<span class="sy0">:</span><span class="kw2">null</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="coMULTI">/*</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * The io configuration object, to pass to io when initiating </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * a transaction</span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1"> cfg <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> value<span class="sy0">:</span><span class="kw2">null</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="coMULTI">/*</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * The default formatter to use when formatting response data. The default</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * implementation simply passes back the response data passed in. </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1"> formatter <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> valueFn<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">return</span> <span class="kw1">this</span>._defFormatter<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> <span class="coMULTI">/*</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * The Standard Module section to which the io plugin instance is bound.</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * Response data will be used to populate this section, after passing through</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * the configured formatter.</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> */</span></div></li><li class="li2"><div class="de2"> section<span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> value<span class="sy0">:</span>StdMod.<span class="me1">BODY</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> validator<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>val<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">return</span> <span class="br0">(</span><span class="sy0">!</span>val <span class="sy0">||</span> val <span class="sy0">==</span> StdMod.<span class="me1">BODY</span> </div></li><li class="li1"><div class="de1"> <span class="sy0">||</span> val <span class="sy0">==</span> StdMod.<span class="me1">HEADER</span> </div></li><li class="li2"><div class="de2"> <span class="sy0">||</span> val <span class="sy0">==</span> StdMod.<span class="me1">FOOTER</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="coMULTI">/*</span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> * The default loading indicator to use, when an io transaction is in progress.</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1"> loading<span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> value<span class="sy0">:</span> <span class="st0">'<img class="yui-loading" width="32px" <span class="es0">\ </span></span></div></li><li class="li1"><div class="de1"><span class="st0"> height="32px" src="assets/img/ajax-loader.gif">'</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="coMULTI">/* Setup local variable for Y.WidgetStdMod, since we use it
|
|
|
541 |
multiple times to reference static properties */</span>
|
|
|
542 |
<span class="kw2">var</span> StdMod <span class="sy0">=</span> Y.<span class="me1">WidgetStdMod</span><span class="sy0">;</span>
|
|
|
543 |
|
|
|
544 |
...
|
|
|
545 |
|
|
|
546 |
<span class="co2">/* Attribute definition */</span>
|
|
|
547 |
StdModIOPlugin.<span class="me1">ATTRS</span> <span class="sy0">=</span> <span class="br0">{</span>
|
|
|
548 |
|
|
|
549 |
<span class="coMULTI">/*
|
|
|
550 |
* The uri to use for the io request
|
|
|
551 |
*/</span>
|
|
|
552 |
uri <span class="sy0">:</span> <span class="br0">{</span>
|
|
|
553 |
value<span class="sy0">:</span><span class="kw2">null</span>
|
|
|
554 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
555 |
|
|
|
556 |
<span class="coMULTI">/*
|
|
|
557 |
* The io configuration object, to pass to io when initiating
|
|
|
558 |
* a transaction
|
|
|
559 |
*/</span>
|
|
|
560 |
cfg <span class="sy0">:</span> <span class="br0">{</span>
|
|
|
561 |
value<span class="sy0">:</span><span class="kw2">null</span>
|
|
|
562 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
563 |
|
|
|
564 |
<span class="coMULTI">/*
|
|
|
565 |
* The default formatter to use when formatting response data. The default
|
|
|
566 |
* implementation simply passes back the response data passed in.
|
|
|
567 |
*/</span>
|
|
|
568 |
formatter <span class="sy0">:</span> <span class="br0">{</span>
|
|
|
569 |
valueFn<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
570 |
<span class="kw1">return</span> <span class="kw1">this</span>._defFormatter<span class="sy0">;</span>
|
|
|
571 |
<span class="br0">}</span>
|
|
|
572 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
573 |
|
|
|
574 |
<span class="coMULTI">/*
|
|
|
575 |
* The Standard Module section to which the io plugin instance is bound.
|
|
|
576 |
* Response data will be used to populate this section, after passing through
|
|
|
577 |
* the configured formatter.
|
|
|
578 |
*/</span>
|
|
|
579 |
section<span class="sy0">:</span> <span class="br0">{</span>
|
|
|
580 |
value<span class="sy0">:</span>StdMod.<span class="me1">BODY</span><span class="sy0">,</span>
|
|
|
581 |
validator<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>val<span class="br0">)</span> <span class="br0">{</span>
|
|
|
582 |
<span class="kw1">return</span> <span class="br0">(</span><span class="sy0">!</span>val <span class="sy0">||</span> val <span class="sy0">==</span> StdMod.<span class="me1">BODY</span>
|
|
|
583 |
<span class="sy0">||</span> val <span class="sy0">==</span> StdMod.<span class="me1">HEADER</span>
|
|
|
584 |
<span class="sy0">||</span> val <span class="sy0">==</span> StdMod.<span class="me1">FOOTER</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
585 |
<span class="br0">}</span>
|
|
|
586 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
587 |
|
|
|
588 |
<span class="coMULTI">/*
|
|
|
589 |
* The default loading indicator to use, when an io transaction is in progress.
|
|
|
590 |
*/</span>
|
|
|
591 |
loading<span class="sy0">:</span> <span class="br0">{</span>
|
|
|
592 |
value<span class="sy0">:</span> <span class="st0">'<img class="yui-loading" width="32px" <span class="es0">\ </span>
|
|
|
593 |
height="32px" src="assets/img/ajax-loader.gif">'</span>
|
|
|
594 |
<span class="br0">}</span>
|
|
|
595 |
<span class="br0">}</span><span class="sy0">;</span></pre></div><textarea id="syntax3-plain">/* Setup local variable for Y.WidgetStdMod, since we use it
|
|
|
596 |
multiple times to reference static properties */
|
|
|
597 |
var StdMod = Y.WidgetStdMod;
|
|
|
598 |
|
|
|
599 |
...
|
|
|
600 |
|
|
|
601 |
/* Attribute definition */
|
|
|
602 |
StdModIOPlugin.ATTRS = {
|
|
|
603 |
|
|
|
604 |
/*
|
|
|
605 |
* The uri to use for the io request
|
|
|
606 |
*/
|
|
|
607 |
uri : {
|
|
|
608 |
value:null
|
|
|
609 |
},
|
|
|
610 |
|
|
|
611 |
/*
|
|
|
612 |
* The io configuration object, to pass to io when initiating
|
|
|
613 |
* a transaction
|
|
|
614 |
*/
|
|
|
615 |
cfg : {
|
|
|
616 |
value:null
|
|
|
617 |
},
|
|
|
618 |
|
|
|
619 |
/*
|
|
|
620 |
* The default formatter to use when formatting response data. The default
|
|
|
621 |
* implementation simply passes back the response data passed in.
|
|
|
622 |
*/
|
|
|
623 |
formatter : {
|
|
|
624 |
valueFn: function() {
|
|
|
625 |
return this._defFormatter;
|
|
|
626 |
}
|
|
|
627 |
},
|
|
|
628 |
|
|
|
629 |
/*
|
|
|
630 |
* The Standard Module section to which the io plugin instance is bound.
|
|
|
631 |
* Response data will be used to populate this section, after passing through
|
|
|
632 |
* the configured formatter.
|
|
|
633 |
*/
|
|
|
634 |
section: {
|
|
|
635 |
value:StdMod.BODY,
|
|
|
636 |
validator: function(val) {
|
|
|
637 |
return (!val || val == StdMod.BODY
|
|
|
638 |
|| val == StdMod.HEADER
|
|
|
639 |
|| val == StdMod.FOOTER);
|
|
|
640 |
}
|
|
|
641 |
},
|
|
|
642 |
|
|
|
643 |
/*
|
|
|
644 |
* The default loading indicator to use, when an io transaction is in progress.
|
|
|
645 |
*/
|
|
|
646 |
loading: {
|
|
|
647 |
value: '<img class="yui-loading" width="32px" \
|
|
|
648 |
height="32px" src="assets/img/ajax-loader.gif">'
|
|
|
649 |
}
|
|
|
650 |
};</textarea></div>
|
|
|
651 |
<p>The <code>formatter</code> attribute uses <code>valueFn</code> to define an instance based default value; pointing to the <code>_defFormatter</code> method on the <code>StdModIOPlugin</code> instance.</p>
|
|
|
652 |
|
|
|
653 |
<h4>Lifecycle Methods: initializer, destructor</h4>
|
|
|
654 |
|
|
|
655 |
<p>For the purposes of this example, the <code>initializer</code> for the plugin activates the Flash based <a href="../../io/#xdr">XDR</a> transport so that the plugin is able to dispatch both in-domain and cross-domain requests (the transport used for any particular uri is controlled through the plugin's <code>cfg</code> attribute).</p>
|
|
|
656 |
|
|
|
657 |
<p>The <code>destructor</code> terminates any existing transaction, if active when the plugin is destroyed (unplugged).</p>
|
|
|
658 |
|
|
|
659 |
<div id="syntax4" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">initializer<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">io</span>.<span class="me1">transport</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> id<span class="sy0">:</span><span class="st0">'flash'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> yid<span class="sy0">:</span> Y.<span class="me1">id</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> src<span class="sy0">:</span><span class="st0">'../../build/io/IO.swf?stamp='</span> <span class="sy0">+</span> <span class="br0">(</span><span class="kw2">new</span> Date<span class="br0">(</span><span class="br0">)</span><span class="br0">)</span>.<span class="me1">getTime</span><span class="br0">(</span><span class="br0">)</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="coMULTI">/*</span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> * Destruction code. Terminates the activeIO transaction if it exists</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1">destructor <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span><span class="kw1">this</span>._activeIO<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">io</span>.<span class="me1">abort</span><span class="br0">(</span><span class="kw1">this</span>._activeIO<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="kw1">this</span>._activeIO <span class="sy0">=</span> <span class="kw2">null</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">initializer<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
660 |
Y.<span class="me1">io</span>.<span class="me1">transport</span><span class="br0">(</span><span class="br0">{</span>
|
|
|
661 |
id<span class="sy0">:</span><span class="st0">'flash'</span><span class="sy0">,</span>
|
|
|
662 |
yid<span class="sy0">:</span> Y.<span class="me1">id</span><span class="sy0">,</span>
|
|
|
663 |
src<span class="sy0">:</span><span class="st0">'../../build/io/IO.swf?stamp='</span> <span class="sy0">+</span> <span class="br0">(</span><span class="kw2">new</span> Date<span class="br0">(</span><span class="br0">)</span><span class="br0">)</span>.<span class="me1">getTime</span><span class="br0">(</span><span class="br0">)</span>
|
|
|
664 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
665 |
<span class="br0">}</span>
|
|
|
666 |
|
|
|
667 |
<span class="coMULTI">/*
|
|
|
668 |
* Destruction code. Terminates the activeIO transaction if it exists
|
|
|
669 |
*/</span>
|
|
|
670 |
destructor <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
671 |
<span class="kw1">if</span> <span class="br0">(</span><span class="kw1">this</span>._activeIO<span class="br0">)</span> <span class="br0">{</span>
|
|
|
672 |
Y.<span class="me1">io</span>.<span class="me1">abort</span><span class="br0">(</span><span class="kw1">this</span>._activeIO<span class="br0">)</span><span class="sy0">;</span>
|
|
|
673 |
<span class="kw1">this</span>._activeIO <span class="sy0">=</span> <span class="kw2">null</span><span class="sy0">;</span>
|
|
|
674 |
<span class="br0">}</span>
|
|
|
675 |
<span class="br0">}</span><span class="sy0">,</span></pre></div><textarea id="syntax4-plain">initializer: function() {
|
|
|
676 |
Y.io.transport({
|
|
|
677 |
id:'flash',
|
|
|
678 |
yid: Y.id,
|
|
|
679 |
src:'../../build/io/IO.swf?stamp=' + (new Date()).getTime()
|
|
|
680 |
});
|
|
|
681 |
}
|
|
|
682 |
|
|
|
683 |
/*
|
|
|
684 |
* Destruction code. Terminates the activeIO transaction if it exists
|
|
|
685 |
*/
|
|
|
686 |
destructor : function() {
|
|
|
687 |
if (this._activeIO) {
|
|
|
688 |
Y.io.abort(this._activeIO);
|
|
|
689 |
this._activeIO = null;
|
|
|
690 |
}
|
|
|
691 |
},</textarea></div>
|
|
|
692 |
<h4>The refresh Method</h4>
|
|
|
693 |
|
|
|
694 |
<p>The <code>refresh</code> method is the main public method which the plugin provides. It's responsible for dispatching the IO request, using the current state of the attributes defined of the plugin. Users will end up invoking the method from the plugin instance attached to the Overlay (<code>overlay.io.refresh()</code>).</p>
|
|
|
695 |
|
|
|
696 |
<div id="syntax5" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">refresh <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> section <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"section"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>section <span class="sy0">&&</span> <span class="sy0">!</span><span class="kw1">this</span>._activeIO<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> uri <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"uri"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>uri<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> cfg <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"cfg"</span><span class="br0">)</span> <span class="sy0">||</span> <span class="br0">{</span><span class="br0">}</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> cfg.<span class="me1">on</span> <span class="sy0">=</span> cfg.<span class="me1">on</span> <span class="sy0">||</span> <span class="br0">{</span><span class="br0">}</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> cfg.<span class="me1">on</span>.<span class="me1">start</span> <span class="sy0">=</span> cfg.<span class="me1">on</span>.<span class="me1">start</span> <span class="sy0">||</span> Y.<span class="me1">bind</span><span class="br0">(</span><span class="kw1">this</span>._defStartHandler<span class="sy0">,</span> <span class="kw1">this</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> cfg.<span class="me1">on</span>.<span class="me1">complete</span> <span class="sy0">=</span> cfg.<span class="me1">on</span>.<span class="me1">complete</span> <span class="sy0">||</span> Y.<span class="me1">bind</span><span class="br0">(</span><span class="kw1">this</span>._defCompleteHandler<span class="sy0">,</span> <span class="kw1">this</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> cfg.<span class="me1">on</span>.<span class="me1">success</span> <span class="sy0">=</span> cfg.<span class="me1">on</span>.<span class="me1">success</span> <span class="sy0">||</span> Y.<span class="me1">bind</span><span class="br0">(</span><span class="kw1">this</span>._defSuccessHandler<span class="sy0">,</span> <span class="kw1">this</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> cfg.<span class="me1">on</span>.<span class="me1">failure</span> <span class="sy0">=</span> cfg.<span class="me1">on</span>.<span class="me1">failure</span> <span class="sy0">||</span> Y.<span class="me1">bind</span><span class="br0">(</span><span class="kw1">this</span>._defFailureHandler<span class="sy0">,</span> <span class="kw1">this</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> cfg.<span class="me1">method</span> <span class="sy0">=</span> cfg.<span class="me1">method</span><span class="sy0">;</span> <span class="co1">// io defaults to "GET" if not defined</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li2"><div class="de2"> Y.<span class="me1">io</span><span class="br0">(</span>uri<span class="sy0">,</span> cfg<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">refresh <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
697 |
section <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"section"</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
698 |
|
|
|
699 |
<span class="kw1">if</span> <span class="br0">(</span>section <span class="sy0">&&</span> <span class="sy0">!</span><span class="kw1">this</span>._activeIO<span class="br0">)</span> <span class="br0">{</span>
|
|
|
700 |
<span class="kw2">var</span> uri <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"uri"</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
701 |
|
|
|
702 |
<span class="kw1">if</span> <span class="br0">(</span>uri<span class="br0">)</span> <span class="br0">{</span>
|
|
|
703 |
|
|
|
704 |
cfg <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"cfg"</span><span class="br0">)</span> <span class="sy0">||</span> <span class="br0">{</span><span class="br0">}</span><span class="sy0">;</span>
|
|
|
705 |
cfg.<span class="me1">on</span> <span class="sy0">=</span> cfg.<span class="me1">on</span> <span class="sy0">||</span> <span class="br0">{</span><span class="br0">}</span><span class="sy0">;</span>
|
|
|
706 |
|
|
|
707 |
cfg.<span class="me1">on</span>.<span class="me1">start</span> <span class="sy0">=</span> cfg.<span class="me1">on</span>.<span class="me1">start</span> <span class="sy0">||</span> Y.<span class="me1">bind</span><span class="br0">(</span><span class="kw1">this</span>._defStartHandler<span class="sy0">,</span> <span class="kw1">this</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
708 |
cfg.<span class="me1">on</span>.<span class="me1">complete</span> <span class="sy0">=</span> cfg.<span class="me1">on</span>.<span class="me1">complete</span> <span class="sy0">||</span> Y.<span class="me1">bind</span><span class="br0">(</span><span class="kw1">this</span>._defCompleteHandler<span class="sy0">,</span> <span class="kw1">this</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
709 |
|
|
|
710 |
cfg.<span class="me1">on</span>.<span class="me1">success</span> <span class="sy0">=</span> cfg.<span class="me1">on</span>.<span class="me1">success</span> <span class="sy0">||</span> Y.<span class="me1">bind</span><span class="br0">(</span><span class="kw1">this</span>._defSuccessHandler<span class="sy0">,</span> <span class="kw1">this</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
711 |
cfg.<span class="me1">on</span>.<span class="me1">failure</span> <span class="sy0">=</span> cfg.<span class="me1">on</span>.<span class="me1">failure</span> <span class="sy0">||</span> Y.<span class="me1">bind</span><span class="br0">(</span><span class="kw1">this</span>._defFailureHandler<span class="sy0">,</span> <span class="kw1">this</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
712 |
|
|
|
713 |
cfg.<span class="me1">method</span> <span class="sy0">=</span> cfg.<span class="me1">method</span><span class="sy0">;</span> <span class="co1">// io defaults to "GET" if not defined</span>
|
|
|
714 |
|
|
|
715 |
Y.<span class="me1">io</span><span class="br0">(</span>uri<span class="sy0">,</span> cfg<span class="br0">)</span><span class="sy0">;</span>
|
|
|
716 |
<span class="br0">}</span>
|
|
|
717 |
<span class="br0">}</span>
|
|
|
718 |
<span class="br0">}</span></pre></div><textarea id="syntax5-plain">refresh : function() {
|
|
|
719 |
section = this.get("section");
|
|
|
720 |
|
|
|
721 |
if (section && !this._activeIO) {
|
|
|
722 |
var uri = this.get("uri");
|
|
|
723 |
|
|
|
724 |
if (uri) {
|
|
|
725 |
|
|
|
726 |
cfg = this.get("cfg") || {};
|
|
|
727 |
cfg.on = cfg.on || {};
|
|
|
728 |
|
|
|
729 |
cfg.on.start = cfg.on.start || Y.bind(this._defStartHandler, this);
|
|
|
730 |
cfg.on.complete = cfg.on.complete || Y.bind(this._defCompleteHandler, this);
|
|
|
731 |
|
|
|
732 |
cfg.on.success = cfg.on.success || Y.bind(this._defSuccessHandler, this);
|
|
|
733 |
cfg.on.failure = cfg.on.failure || Y.bind(this._defFailureHandler, this);
|
|
|
734 |
|
|
|
735 |
cfg.method = cfg.method; // io defaults to "GET" if not defined
|
|
|
736 |
|
|
|
737 |
Y.io(uri, cfg);
|
|
|
738 |
}
|
|
|
739 |
}
|
|
|
740 |
}</textarea></div>
|
|
|
741 |
<p>The <code>refresh</code> method, as implemented for the scope of this example, sets up the io configuration object for the transaction it is about to dispatch, filling in the default handlers for io's <code>start</code>, <code>complete</code>, <code>success</code> and <code>failure</code> events, if the user does not provide custom implementations.</p>
|
|
|
742 |
|
|
|
743 |
<h4>The Default IO Event Handlers</h4>
|
|
|
744 |
|
|
|
745 |
<p>The default success listener, pulls the response data from the response object, and uses it to update the content in the Overlay section defined by the <code>section</code> attribute. The response data is passed through the <code>formatter</code> configured for the plugin, converting it to the desired output format:</p>
|
|
|
746 |
|
|
|
747 |
<div id="syntax6" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">_defSuccessHandler <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>id<span class="sy0">,</span> o<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> response <span class="sy0">=</span> o.<span class="me1">responseXML</span> <span class="sy0">||</span> o.<span class="me1">responseText</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> section <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"section"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> formatter <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"formatter"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Invoke Overlay method to set content in the currently configured section</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"host"</span><span class="br0">)</span>.<span class="me1">setStdModContent</span><span class="br0">(</span>section<span class="sy0">,</span> formatter<span class="br0">(</span>response<span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">_defSuccessHandler <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>id<span class="sy0">,</span> o<span class="br0">)</span> <span class="br0">{</span>
|
|
|
748 |
<span class="kw2">var</span> response <span class="sy0">=</span> o.<span class="me1">responseXML</span> <span class="sy0">||</span> o.<span class="me1">responseText</span><span class="sy0">;</span>
|
|
|
749 |
<span class="kw2">var</span> section <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"section"</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
750 |
<span class="kw2">var</span> formatter <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"formatter"</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
751 |
|
|
|
752 |
<span class="co1">// Invoke Overlay method to set content in the currently configured section</span>
|
|
|
753 |
<span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"host"</span><span class="br0">)</span>.<span class="me1">setStdModContent</span><span class="br0">(</span>section<span class="sy0">,</span> formatter<span class="br0">(</span>response<span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
754 |
<span class="br0">}</span></pre></div><textarea id="syntax6-plain">_defSuccessHandler : function(id, o) {
|
|
|
755 |
var response = o.responseXML || o.responseText;
|
|
|
756 |
var section = this.get("section");
|
|
|
757 |
var formatter = this.get("formatter");
|
|
|
758 |
|
|
|
759 |
// Invoke Overlay method to set content in the currently configured section
|
|
|
760 |
this.get("host").setStdModContent(section, formatter(response));
|
|
|
761 |
}</textarea></div>
|
|
|
762 |
<p>The default failure listener, displays an error message in the currently configured <code>section</code>, when io communication fails:</p>
|
|
|
763 |
|
|
|
764 |
<div id="syntax7" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">_defFailureHandler <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>id<span class="sy0">,</span> o<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"host"</span><span class="br0">)</span>.<span class="me1">setStdModContent</span><span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"section"</span><span class="br0">)</span><span class="sy0">,</span> <span class="st0">"Failed to retrieve content"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">_defFailureHandler <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>id<span class="sy0">,</span> o<span class="br0">)</span> <span class="br0">{</span>
|
|
|
765 |
<span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"host"</span><span class="br0">)</span>.<span class="me1">setStdModContent</span><span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"section"</span><span class="br0">)</span><span class="sy0">,</span> <span class="st0">"Failed to retrieve content"</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
766 |
<span class="br0">}</span></pre></div><textarea id="syntax7-plain">_defFailureHandler : function(id, o) {
|
|
|
767 |
this.get("host").setStdModContent(this.get("section"), "Failed to retrieve content");
|
|
|
768 |
}</textarea></div>
|
|
|
769 |
<p>The default start event listener renders the <code>loading</code> content, which remains in place while the transaction is in process, and also stores a reference to the "inprogress" io transaction:</p>
|
|
|
770 |
|
|
|
771 |
<div id="syntax8" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">_defStartHandler <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>id<span class="sy0">,</span> o<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._activeIO <span class="sy0">=</span> o<span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"host"</span><span class="br0">)</span>.<span class="me1">setStdModContent</span><span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"section"</span><span class="br0">)</span><span class="sy0">,</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"loading"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">_defStartHandler <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>id<span class="sy0">,</span> o<span class="br0">)</span> <span class="br0">{</span>
|
|
|
772 |
<span class="kw1">this</span>._activeIO <span class="sy0">=</span> o<span class="sy0">;</span>
|
|
|
773 |
<span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"host"</span><span class="br0">)</span>.<span class="me1">setStdModContent</span><span class="br0">(</span><span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"section"</span><span class="br0">)</span><span class="sy0">,</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"loading"</span><span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
774 |
<span class="br0">}</span><span class="sy0">,</span></pre></div><textarea id="syntax8-plain">_defStartHandler : function(id, o) {
|
|
|
775 |
this._activeIO = o;
|
|
|
776 |
this.get("host").setStdModContent(this.get("section"), this.get("loading"));
|
|
|
777 |
},</textarea></div>
|
|
|
778 |
<p>The default complete event listener clears out the "inprogress" io transaction object:</p>
|
|
|
779 |
|
|
|
780 |
<div id="syntax9" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">_defCompleteHandler <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>id<span class="sy0">,</span> o<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">this</span>._activeIO <span class="sy0">=</span> <span class="kw2">null</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">_defCompleteHandler <span class="sy0">:</span> <span class="kw2">function</span><span class="br0">(</span>id<span class="sy0">,</span> o<span class="br0">)</span> <span class="br0">{</span>
|
|
|
781 |
<span class="kw1">this</span>._activeIO <span class="sy0">=</span> <span class="kw2">null</span><span class="sy0">;</span>
|
|
|
782 |
<span class="br0">}</span></pre></div><textarea id="syntax9-plain">_defCompleteHandler : function(id, o) {
|
|
|
783 |
this._activeIO = null;
|
|
|
784 |
}</textarea></div>
|
|
|
785 |
<h4>Using the Plugin</h4>
|
|
|
786 |
|
|
|
787 |
<p>All objects derived from <a href="../../api/Base.html">Base</a> are <a href="../../api/Plugin.Host.html">Plugin Hosts</a>. They provide <a href="../../api/Plugin.Host.html#method_plug"><code>plug</code></a> and <a href="../../api/Plugin.Host.html#method_unplug"><code>unplug</code></a> methods to allow users to add/remove plugins to/from existing instances.
|
|
|
788 |
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>
|
|
|
789 |
|
|
|
790 |
<p>In this example, we'll create a new instance of an Overlay:</p>
|
|
|
791 |
|
|
|
792 |
<div id="syntax10" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/* Create a new Overlay instance, with content generated from script */</span></div></li><li class="li1"><div class="de1"><span class="kw2">var</span> overlay <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Overlay</span><span class="br0">(</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> width<span class="sy0">:</span><span class="st0">"40em"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> visible<span class="sy0">:</span><span class="kw2">false</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> align<span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> node<span class="sy0">:</span><span class="st0">"#show"</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> points<span class="sy0">:</span> <span class="br0">[</span>Y.<span class="me1">WidgetPositionExt</span>.<span class="me1">TL</span><span class="sy0">,</span> Y.<span class="me1">WidgetPositionExt</span>.<span class="me1">BL</span><span class="br0">]</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> zIndex<span class="sy0">:</span><span class="nu0">10</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> headerContent<span class="sy0">:</span> generateHeaderMarkup<span class="br0">(</span><span class="br0">)</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> bodyContent<span class="sy0">:</span> <span class="st0">"Feed data will be displayed here"</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="coMULTI">/* Create a new Overlay instance, with content generated from script */</span>
|
|
|
793 |
<span class="kw2">var</span> overlay <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Overlay</span><span class="br0">(</span><span class="br0">{</span>
|
|
|
794 |
width<span class="sy0">:</span><span class="st0">"40em"</span><span class="sy0">,</span>
|
|
|
795 |
visible<span class="sy0">:</span><span class="kw2">false</span><span class="sy0">,</span>
|
|
|
796 |
align<span class="sy0">:</span> <span class="br0">{</span>
|
|
|
797 |
node<span class="sy0">:</span><span class="st0">"#show"</span><span class="sy0">,</span>
|
|
|
798 |
points<span class="sy0">:</span> <span class="br0">[</span>Y.<span class="me1">WidgetPositionExt</span>.<span class="me1">TL</span><span class="sy0">,</span> Y.<span class="me1">WidgetPositionExt</span>.<span class="me1">BL</span><span class="br0">]</span>
|
|
|
799 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
800 |
zIndex<span class="sy0">:</span><span class="nu0">10</span><span class="sy0">,</span>
|
|
|
801 |
headerContent<span class="sy0">:</span> generateHeaderMarkup<span class="br0">(</span><span class="br0">)</span><span class="sy0">,</span>
|
|
|
802 |
bodyContent<span class="sy0">:</span> <span class="st0">"Feed data will be displayed here"</span>
|
|
|
803 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax10-plain">/* Create a new Overlay instance, with content generated from script */
|
|
|
804 |
var overlay = new Y.Overlay({
|
|
|
805 |
width:"40em",
|
|
|
806 |
visible:false,
|
|
|
807 |
align: {
|
|
|
808 |
node:"#show",
|
|
|
809 |
points: [Y.WidgetPositionExt.TL, Y.WidgetPositionExt.BL]
|
|
|
810 |
},
|
|
|
811 |
zIndex:10,
|
|
|
812 |
headerContent: generateHeaderMarkup(),
|
|
|
813 |
bodyContent: "Feed data will be displayed here"
|
|
|
814 |
});</textarea></div>
|
|
|
815 |
<p>And then use the <code>plug</code> method to add the <code>StdModIOPlugin</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>
|
|
|
816 |
|
|
|
817 |
<div id="syntax11" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/*</span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * Add the Standard Module IO Plugin, and configure it to use flash, </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * and a formatter specific to the pipes response we're expecting </span></div></li><li class="li1"><div class="de1"><span class="coMULTI"> * from the uri request we'll send out.</span></div></li><li class="li2"><div class="de2"><span class="coMULTI"> */</span></div></li><li class="li1"><div class="de1">overlay.<span class="me1">plug</span><span class="br0">(</span>StdModIOPlugin<span class="sy0">,</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> uri <span class="sy0">:</span> pipes.<span class="me1">baseUri</span> <span class="sy0">+</span> pipes.<span class="me1">feeds</span><span class="br0">[</span><span class="st0">"ynews"</span><span class="br0">]</span>.<span class="me1">uri</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> cfg<span class="sy0">:</span><span class="br0">{</span></div></li><li class="li1"><div class="de1"> xdr<span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw2">use</span><span class="sy0">:</span><span class="st0">'flash'</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> formatter<span class="sy0">:</span> pipes.<span class="me1">formatter</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="coMULTI">/*
|
|
|
818 |
* Add the Standard Module IO Plugin, and configure it to use flash,
|
|
|
819 |
* and a formatter specific to the pipes response we're expecting
|
|
|
820 |
* from the uri request we'll send out.
|
|
|
821 |
*/</span>
|
|
|
822 |
overlay.<span class="me1">plug</span><span class="br0">(</span>StdModIOPlugin<span class="sy0">,</span> <span class="br0">{</span>
|
|
|
823 |
uri <span class="sy0">:</span> pipes.<span class="me1">baseUri</span> <span class="sy0">+</span> pipes.<span class="me1">feeds</span><span class="br0">[</span><span class="st0">"ynews"</span><span class="br0">]</span>.<span class="me1">uri</span><span class="sy0">,</span>
|
|
|
824 |
cfg<span class="sy0">:</span><span class="br0">{</span>
|
|
|
825 |
xdr<span class="sy0">:</span> <span class="br0">{</span>
|
|
|
826 |
<span class="kw2">use</span><span class="sy0">:</span><span class="st0">'flash'</span>
|
|
|
827 |
<span class="br0">}</span>
|
|
|
828 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
829 |
formatter<span class="sy0">:</span> pipes.<span class="me1">formatter</span>
|
|
|
830 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax11-plain">/*
|
|
|
831 |
* Add the Standard Module IO Plugin, and configure it to use flash,
|
|
|
832 |
* and a formatter specific to the pipes response we're expecting
|
|
|
833 |
* from the uri request we'll send out.
|
|
|
834 |
*/
|
|
|
835 |
overlay.plug(StdModIOPlugin, {
|
|
|
836 |
uri : pipes.baseUri + pipes.feeds["ynews"].uri,
|
|
|
837 |
cfg:{
|
|
|
838 |
xdr: {
|
|
|
839 |
use:'flash'
|
|
|
840 |
}
|
|
|
841 |
},
|
|
|
842 |
formatter: pipes.formatter
|
|
|
843 |
});</textarea></div>
|
|
|
844 |
<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>
|
|
|
845 |
|
|
|
846 |
<h4>Getting Feed Data Through Pipes</h4>
|
|
|
847 |
|
|
|
848 |
<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>
|
|
|
849 |
|
|
|
850 |
<div id="syntax12" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/* The Pipes feed URIs to be used to dispatch io transactions */</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="kw2">var</span> pipes <span class="sy0">=</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> baseUri <span class="sy0">:</span> <span class="st0">'http:/'</span><span class="sy0">+</span><span class="st0">'/pipes.yahooapis.com/pipes/pipe.run? <span class="es0">\</span></span></div></li><li class="li2"><div class="de2"><span class="st0"> _id=6b7b2c6a32f5a12e7259c36967052387& <span class="es0">\</span></span></div></li><li class="li1"><div class="de1"><span class="st0"> _render=json&url=http:/'</span><span class="sy0">+</span><span class="st0">'/'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> feeds <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> ynews <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> title<span class="sy0">:</span> <span class="st0">'Yahoo! US News'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> uri<span class="sy0">:</span> <span class="st0">'rss.news.yahoo.com/rss/us'</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> yui <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> title<span class="sy0">:</span> <span class="st0">'YUI Blog'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> uri<span class="sy0">:</span> <span class="st0">'feeds.yuiblog.com/YahooUserInterfaceBlog'</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> slashdot <span class="sy0">:</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> title<span class="sy0">:</span> <span class="st0">'Slashdot'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> uri<span class="sy0">:</span> <span class="st0">'rss.slashdot.org/Slashdot/slashdot'</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2"> ...</div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> ...</div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="coMULTI">/* The Pipes feed URIs to be used to dispatch io transactions */</span>
|
|
|
851 |
|
|
|
852 |
<span class="kw2">var</span> pipes <span class="sy0">=</span> <span class="br0">{</span>
|
|
|
853 |
baseUri <span class="sy0">:</span> <span class="st0">'http:/'</span><span class="sy0">+</span><span class="st0">'/pipes.yahooapis.com/pipes/pipe.run? <span class="es0">\</span>
|
|
|
854 |
_id=6b7b2c6a32f5a12e7259c36967052387& <span class="es0">\</span>
|
|
|
855 |
_render=json&url=http:/'</span><span class="sy0">+</span><span class="st0">'/'</span><span class="sy0">,</span>
|
|
|
856 |
feeds <span class="sy0">:</span> <span class="br0">{</span>
|
|
|
857 |
ynews <span class="sy0">:</span> <span class="br0">{</span>
|
|
|
858 |
title<span class="sy0">:</span> <span class="st0">'Yahoo! US News'</span><span class="sy0">,</span>
|
|
|
859 |
uri<span class="sy0">:</span> <span class="st0">'rss.news.yahoo.com/rss/us'</span>
|
|
|
860 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
861 |
yui <span class="sy0">:</span> <span class="br0">{</span>
|
|
|
862 |
title<span class="sy0">:</span> <span class="st0">'YUI Blog'</span><span class="sy0">,</span>
|
|
|
863 |
uri<span class="sy0">:</span> <span class="st0">'feeds.yuiblog.com/YahooUserInterfaceBlog'</span>
|
|
|
864 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
865 |
slashdot <span class="sy0">:</span> <span class="br0">{</span>
|
|
|
866 |
title<span class="sy0">:</span> <span class="st0">'Slashdot'</span><span class="sy0">,</span>
|
|
|
867 |
uri<span class="sy0">:</span> <span class="st0">'rss.slashdot.org/Slashdot/slashdot'</span>
|
|
|
868 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
869 |
...
|
|
|
870 |
<span class="br0">}</span><span class="sy0">,</span>
|
|
|
871 |
|
|
|
872 |
...</pre></div><textarea id="syntax12-plain">/* The Pipes feed URIs to be used to dispatch io transactions */
|
|
|
873 |
|
|
|
874 |
var pipes = {
|
|
|
875 |
baseUri : 'http:/'+'/pipes.yahooapis.com/pipes/pipe.run? \
|
|
|
876 |
_id=6b7b2c6a32f5a12e7259c36967052387& \
|
|
|
877 |
_render=json&url=http:/'+'/',
|
|
|
878 |
feeds : {
|
|
|
879 |
ynews : {
|
|
|
880 |
title: 'Yahoo! US News',
|
|
|
881 |
uri: 'rss.news.yahoo.com/rss/us'
|
|
|
882 |
},
|
|
|
883 |
yui : {
|
|
|
884 |
title: 'YUI Blog',
|
|
|
885 |
uri: 'feeds.yuiblog.com/YahooUserInterfaceBlog'
|
|
|
886 |
},
|
|
|
887 |
slashdot : {
|
|
|
888 |
title: 'Slashdot',
|
|
|
889 |
uri: 'rss.slashdot.org/Slashdot/slashdot'
|
|
|
890 |
},
|
|
|
891 |
...
|
|
|
892 |
},
|
|
|
893 |
|
|
|
894 |
...</textarea></div>
|
|
|
895 |
<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 Y.each, and substitute is used to generate the list markup:</p>
|
|
|
896 |
|
|
|
897 |
<div id="syntax13" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">...</div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"><span class="co1">// The default formatter, responsible for converting the JSON responses received,</span></div></li><li class="li1"><div class="de1"><span class="co1">// into HTML. JSON is used for the parsing step, and substitute for some basic </span></div></li><li class="li2"><div class="de2"><span class="co1">// templating functionality</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1">formatter <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span>val<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> formatted <span class="sy0">=</span> <span class="st0">"Error parsing feed data"</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">try</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="kw2">var</span> json <span class="sy0">=</span> Y.<span class="me1">JSON</span>.<span class="me1">parse</span><span class="br0">(</span>val<span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>json <span class="sy0">&&</span> json.<span class="me1">count</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> html <span class="sy0">=</span> <span class="br0">[</span><span class="st0">'<ul class="yui-feed-data">'</span><span class="br0">]</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> linkTemplate <span class="sy0">=</span> </div></li><li class="li1"><div class="de1"> <span class="st0">'<li><a href="{link}" target="_blank">{title}</a></li>'</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Loop around all the items returned, and feed </span></div></li><li class="li1"><div class="de1"> <span class="co1">// them into the template above, using substitute.</span></div></li><li class="li1"><div class="de1"> Y.<span class="me1">each</span><span class="br0">(</span>json.<span class="me1">value</span>.<span class="me1">items</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>v<span class="sy0">,</span> i<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>i <span class="sy0"><</span> <span class="nu0">10</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> html.<span class="me1">push</span><span class="br0">(</span>Y.<span class="me1">substitute</span><span class="br0">(</span>linkTemplate<span class="sy0">,</span> v<span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> html.<span class="me1">push</span><span class="br0">(</span><span class="st0">"</ul>"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> formatted <span class="sy0">=</span> html.<span class="me1">join</span><span class="br0">(</span><span class="st0">""</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> formatted <span class="sy0">=</span> <span class="st0">"No Data Available"</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="br0">}</span> <span class="kw1">catch</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> formatted <span class="sy0">=</span> <span class="st0">"Error parsing feed data"</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"> <span class="kw1">return</span> formatted<span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">...
|
|
|
898 |
|
|
|
899 |
<span class="co1">// The default formatter, responsible for converting the JSON responses received,</span>
|
|
|
900 |
<span class="co1">// into HTML. JSON is used for the parsing step, and substitute for some basic </span>
|
|
|
901 |
<span class="co1">// templating functionality</span>
|
|
|
902 |
|
|
|
903 |
formatter <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">(</span>val<span class="br0">)</span> <span class="br0">{</span>
|
|
|
904 |
<span class="kw2">var</span> formatted <span class="sy0">=</span> <span class="st0">"Error parsing feed data"</span><span class="sy0">;</span>
|
|
|
905 |
<span class="kw1">try</span> <span class="br0">{</span>
|
|
|
906 |
<span class="kw2">var</span> json <span class="sy0">=</span> Y.<span class="me1">JSON</span>.<span class="me1">parse</span><span class="br0">(</span>val<span class="br0">)</span><span class="sy0">;</span>
|
|
|
907 |
<span class="kw1">if</span> <span class="br0">(</span>json <span class="sy0">&&</span> json.<span class="me1">count</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
908 |
<span class="kw2">var</span> html <span class="sy0">=</span> <span class="br0">[</span><span class="st0">'<ul class="yui-feed-data">'</span><span class="br0">]</span><span class="sy0">;</span>
|
|
|
909 |
<span class="kw2">var</span> linkTemplate <span class="sy0">=</span>
|
|
|
910 |
<span class="st0">'<li><a href="{link}" target="_blank">{title}</a></li>'</span><span class="sy0">;</span>
|
|
|
911 |
|
|
|
912 |
<span class="co1">// Loop around all the items returned, and feed </span>
|
|
|
913 |
<span class="co1">// them into the template above, using substitute.</span>
|
|
|
914 |
Y.<span class="me1">each</span><span class="br0">(</span>json.<span class="me1">value</span>.<span class="me1">items</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>v<span class="sy0">,</span> i<span class="br0">)</span> <span class="br0">{</span>
|
|
|
915 |
<span class="kw1">if</span> <span class="br0">(</span>i <span class="sy0"><</span> <span class="nu0">10</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
916 |
html.<span class="me1">push</span><span class="br0">(</span>Y.<span class="me1">substitute</span><span class="br0">(</span>linkTemplate<span class="sy0">,</span> v<span class="br0">)</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
917 |
<span class="br0">}</span>
|
|
|
918 |
<span class="br0">}</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
919 |
html.<span class="me1">push</span><span class="br0">(</span><span class="st0">"</ul>"</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
920 |
formatted <span class="sy0">=</span> html.<span class="me1">join</span><span class="br0">(</span><span class="st0">""</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
921 |
<span class="br0">}</span> <span class="kw1">else</span> <span class="br0">{</span>
|
|
|
922 |
formatted <span class="sy0">=</span> <span class="st0">"No Data Available"</span><span class="sy0">;</span>
|
|
|
923 |
<span class="br0">}</span>
|
|
|
924 |
<span class="br0">}</span> <span class="kw1">catch</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span>
|
|
|
925 |
formatted <span class="sy0">=</span> <span class="st0">"Error parsing feed data"</span><span class="sy0">;</span>
|
|
|
926 |
<span class="br0">}</span>
|
|
|
927 |
<span class="kw1">return</span> formatted<span class="sy0">;</span>
|
|
|
928 |
<span class="br0">}</span></pre></div><textarea id="syntax13-plain">...
|
|
|
929 |
|
|
|
930 |
// The default formatter, responsible for converting the JSON responses received,
|
|
|
931 |
// into HTML. JSON is used for the parsing step, and substitute for some basic
|
|
|
932 |
// templating functionality
|
|
|
933 |
|
|
|
934 |
formatter : function (val) {
|
|
|
935 |
var formatted = "Error parsing feed data";
|
|
|
936 |
try {
|
|
|
937 |
var json = Y.JSON.parse(val);
|
|
|
938 |
if (json && json.count) {
|
|
|
939 |
var html = ['<ul class="yui-feed-data">'];
|
|
|
940 |
var linkTemplate =
|
|
|
941 |
'<li><a href="{link}" target="_blank">{title}</a></li>';
|
|
|
942 |
|
|
|
943 |
// Loop around all the items returned, and feed
|
|
|
944 |
// them into the template above, using substitute.
|
|
|
945 |
Y.each(json.value.items, function(v, i) {
|
|
|
946 |
if (i < 10) {
|
|
|
947 |
html.push(Y.substitute(linkTemplate, v));
|
|
|
948 |
}
|
|
|
949 |
});
|
|
|
950 |
html.push("</ul>");
|
|
|
951 |
formatted = html.join("");
|
|
|
952 |
} else {
|
|
|
953 |
formatted = "No Data Available";
|
|
|
954 |
}
|
|
|
955 |
} catch(e) {
|
|
|
956 |
formatted = "Error parsing feed data";
|
|
|
957 |
}
|
|
|
958 |
return formatted;
|
|
|
959 |
}</textarea></div>
|
|
|
960 |
<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>
|
|
|
961 |
|
|
|
962 |
<div id="syntax14" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/* Handle select change */</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"change"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span></div></li><li class="li1"><div class="de1"> <span class="kw2">var</span> val <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> <span class="kw1">if</span> <span class="br0">(</span>val <span class="sy0">!=</span> <span class="sy0">-</span><span class="nu0">1</span><span class="br0">)</span> <span class="br0">{</span></div></li><li class="li2"><div class="de2"> <span class="co1">// Set the new URI value on the io plugin</span></div></li><li class="li1"><div class="de1"> overlay.<span class="me1">io</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">"uri"</span><span class="sy0">,</span> pipes.<span class="me1">baseUri</span> <span class="sy0">+</span> pipes.<span class="me1">feeds</span><span class="br0">[</span>val<span class="br0">]</span>.<span class="me1">uri</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"> </div></li><li class="li1"><div class="de1"> <span class="co1">// Send out a request to refresh the current section's contents</span></div></li><li class="li1"><div class="de1"> overlay.<span class="me1">io</span>.<span class="me1">refresh</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"> <span class="br0">}</span></div></li><li class="li1"><div class="de1"><span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#feedSelector"</span><span class="br0">)</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="coMULTI">/* Handle select change */</span>
|
|
|
963 |
Y.<span class="me1">on</span><span class="br0">(</span><span class="st0">"change"</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">(</span>e<span class="br0">)</span> <span class="br0">{</span>
|
|
|
964 |
<span class="kw2">var</span> val <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">(</span><span class="st0">"value"</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
965 |
<span class="kw1">if</span> <span class="br0">(</span>val <span class="sy0">!=</span> <span class="sy0">-</span><span class="nu0">1</span><span class="br0">)</span> <span class="br0">{</span>
|
|
|
966 |
<span class="co1">// Set the new URI value on the io plugin</span>
|
|
|
967 |
overlay.<span class="me1">io</span>.<span class="me1">set</span><span class="br0">(</span><span class="st0">"uri"</span><span class="sy0">,</span> pipes.<span class="me1">baseUri</span> <span class="sy0">+</span> pipes.<span class="me1">feeds</span><span class="br0">[</span>val<span class="br0">]</span>.<span class="me1">uri</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
968 |
|
|
|
969 |
<span class="co1">// Send out a request to refresh the current section's contents</span>
|
|
|
970 |
overlay.<span class="me1">io</span>.<span class="me1">refresh</span><span class="br0">(</span><span class="br0">)</span><span class="sy0">;</span>
|
|
|
971 |
<span class="br0">}</span>
|
|
|
972 |
<span class="br0">}</span><span class="sy0">,</span> <span class="st0">"#feedSelector"</span><span class="br0">)</span><span class="sy0">;</span></pre></div><textarea id="syntax14-plain">/* Handle select change */
|
|
|
973 |
Y.on("change", function(e) {
|
|
|
974 |
var val = this.get("value");
|
|
|
975 |
if (val != -1) {
|
|
|
976 |
// Set the new URI value on the io plugin
|
|
|
977 |
overlay.io.set("uri", pipes.baseUri + pipes.feeds[val].uri);
|
|
|
978 |
|
|
|
979 |
// Send out a request to refresh the current section's contents
|
|
|
980 |
overlay.io.refresh();
|
|
|
981 |
}
|
|
|
982 |
}, "#feedSelector");</textarea></div> </div>
|
|
|
983 |
<div class="yui-u sidebar">
|
|
|
984 |
|
|
|
985 |
|
|
|
986 |
<div id="examples" class="mod box4">
|
|
|
987 |
<div class="hd">
|
|
|
988 |
<h4>
|
|
|
989 |
Overlay Examples:</h4>
|
|
|
990 |
</div>
|
|
|
991 |
<div class="bd">
|
|
|
992 |
<ul>
|
|
|
993 |
<li><a href='../overlay/overlay-xy.html'>Basic XY Positioning</a></li><li><a href='../overlay/overlay-align.html'>Extended XY Positioning</a></li><li><a href='../overlay/overlay-stack.html'>Stack Support</a></li><li><a href='../overlay/overlay-stdmod.html'>Standard Module Support</a></li><li class='selected'><a href='../overlay/overlay-io-plugin.html'>IO Plugin</a></li><li><a href='../overlay/overlay-anim-plugin.html'>Animation Plugin</a></li><li><a href='../node-focusmanager/node-focusmanager-3.html'>Accessible Menu Button (included with examples for Focus Manager Node Plugin)</a></li><li><a href='../stylesheet/stylesheet_theme.html'>Adjusting a page theme on the fly (included with examples for StyleSheet)</a></li> </ul>
|
|
|
994 |
</div>
|
|
|
995 |
</div>
|
|
|
996 |
|
|
|
997 |
<div class="mod box4">
|
|
|
998 |
<div class="hd">
|
|
|
999 |
<h4>More Overlay Resources:</h4>
|
|
|
1000 |
</div>
|
|
|
1001 |
<div class="bd">
|
|
|
1002 |
<ul>
|
|
|
1003 |
<!-- <li><a href="http://developer.yahoo.com/yui/overlay/">User's Guide</a> (external)</li> -->
|
|
|
1004 |
<li><a href="../../api/module_overlay.html">API Documentation</a></li></ul>
|
|
|
1005 |
</div>
|
|
|
1006 |
</div>
|
|
|
1007 |
</div>
|
|
|
1008 |
</div>
|
|
|
1009 |
|
|
|
1010 |
</div>
|
|
|
1011 |
</div>
|
|
|
1012 |
|
|
|
1013 |
|
|
|
1014 |
<div class="yui-b toc3" id="tocWrapper">
|
|
|
1015 |
<!-- TABLE OF CONTENTS -->
|
|
|
1016 |
<div id="toc">
|
|
|
1017 |
|
|
|
1018 |
<ul>
|
|
|
1019 |
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag & Drop - Functional Examples" href="../../examples/dd/index.html">Drag & Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="selected "><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
|
|
|
1020 |
</div>
|
|
|
1021 |
</div>
|
|
|
1022 |
</div><!--closes bd-->
|
|
|
1023 |
|
|
|
1024 |
<div id="ft">
|
|
|
1025 |
<p class="first">Copyright © 2009 Yahoo! Inc. All rights reserved.</p>
|
|
|
1026 |
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
|
|
|
1027 |
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
|
|
|
1028 |
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
|
|
|
1029 |
<a href="http://careers.yahoo.com/">Job Openings</a></p>
|
|
|
1030 |
</div>
|
|
|
1031 |
</div>
|
|
|
1032 |
<script language="javascript">
|
|
|
1033 |
var yuiConfig = {base:"../../build/", timeout: 10000};
|
|
|
1034 |
</script>
|
|
|
1035 |
<script src="../../assets/syntax.js"></script>
|
|
|
1036 |
<script src="../../assets/dpSyntaxHighlighter.js"></script>
|
|
|
1037 |
<script language="javascript">
|
|
|
1038 |
dp.SyntaxHighlighter.HighlightAll('code');
|
|
|
1039 |
</script>
|
|
|
1040 |
</body>
|
|
|
1041 |
</html>
|