This example shows how to create a plugin to load YQL data into a TabView for dynamic content.

{{>need-skin-note}} ``` {{>need-skin-comment}} ```

Creating the YQL Plugin

Plugin Constructor

To create a plugin, we need to create a constructor with a static NS property. This is the namespace used by the plugin on each instance.

``` // YQL plugin for Y.Tab instances var TabYQL = function(config) { this.init(config); }; TabYQL.NS = 'yql'; // plugin namespace (e.g. "tab.yql.load(myQuery)"); ``` Plugin Prototype

Next we will add the YQL functionality to the prototype. The init method wires the YQL functionality up using the load method.

``` TabYQL.prototype = { init: function(config) { if (this.tab) { this.tab.after('selectedChange', Y.bind(this.afterSelectedChange, this)); } }, afterSelectedChange: function(e) { // only load if not already loaded if (!this.loaded) { this.load(this.query, this.afterLoad); } }, load: function(query, afterLoad) { Y.YQL(query, Y.bind(afterLoad, this)); } ```

Creating the TabView

Next we will create a new instance of a TabView:

``` /* Create a new TabView instance, with content generated from script */ var tabview = new Y.TabView(); ```

And then use the add method to add the Tab instances, to add a tab for each of the feeds, then render the tabview into the placeholder element.

``` var feeds = { Chrome: 'chrome+browser', Firefox: 'firefox+browser', Safari: 'safari+browser', Explorer: 'explorer+browser', Opera: 'opera+browser' }; Y.each(feeds, function(feed, label) { var tab = new Y.Tab({ label: label, content: 'loading...', }); tab.plug(TabYQL, { query: 'select title, link from rss where ' + 'url="http://search.news.yahoo.com/rss?p=' + feed + '"' }); tabview.add(tab); }); tabview.render('#demo'); ```