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