Example: Creating a Widget Plugin

This example shows how you can use Widget's plugin infrastructure to add additional features to an existing widget.

We use the "gallery-widget-io" plugin to add io capabilities bound to a widget instance. The plugin provides an io interface on Widget, which can be used to update
the widget's contentBox contents.

NOTES:

For Security reasons, YUI has made the decision to remove all Flash files from the repository. As a result, this example will not function as it relies on Flash for the cross-domain transport. The code for this example will work if you compile and host the io.swf file. Necessary source files for compilation are available in the yui3-swfs repository.

This example will not function on iOS devices due to the usage of Flash as the cross-domain transport. This example may not work on older Android devices, as well.

Using The Gallery IO Plugin For Widget

Setting Up The YUI Instance

For this example, we'll pull in widget; the gallery-widget-io plugin, and the json-parse modules to help us work with the JSON RSS data returned.
The code to set up our sandbox instance is shown below:

The Widget IO Plugin

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 AnimPlugin example).

It sets up the following attributes, which are used to control how the IO plugin's refresh method behaves:

uri

The uri to use for the io request

cfg

The io configuration object, to pass to io when initiating a transaction

formatter

The formatter to use to formatting response data. The default implementation simply passes back the response data passed in, unchanged.

loading

The default content to display while an io transaction is in progress

Using the Plugin

All objects derived from Base are Plugin Hosts.
They provide plug and unplug methods to allow users to add/remove plugins to/from existing instances.
They also allow the user to specify the set of plugins to be applied to a new instance, along with their configurations, as part of the constructor arguments.

And then use the plug method to add the WidgetIO plugin,
providing it with a configuration to use when sending out io transactions
(The Animation Plugin example shows how
you could do the same thing during construction), render the widget, and refresh
the plugin to fetch the content.

NOTE: Since we're using IO's XDR functionality for this example, we wrap the widget construction in a callback which notifies us when the flash XDR module is ready to service requests. In your local implementations,
if you're not sending cross-domain requests, you don't need to use the XDR functionality and leave out the code below:

Y.on('io:xdrReady', function() {
// Setup Widget when io xdr is available
});
// Set up io to use the flash XDR transport
Y.io.transport({
id:'flash',
yid: Y.id,
src:'io.swf?stamp=' + (new Date()).getTime() //Relative path to the .swf file from the current page.
});