YUI Library Examples: TabView: Loading Tab Content

TabView: Loading Tab Content

Creating an IO Plugin For TabView

Setting Up The YUI Instance

For this example, we'll start from the widget-io plugin created in the widget plugin example, pull in tabview and the gallery-widget-io module which provides the base class that we'll extend to create our io plugin class for TabView. The code to set up our sandbox instance is shown below:

YUI({...}).use("tabview", "gallery-io-plugin", function(Y) {
    // We'll write our code here, after pulling in the default TabView widget
    // and the widget-io gallery module.
}

YUI({...}).use("tabview", "gallery-io-plugin", function(Y) {
    // We'll write our code here, after pulling in the default TabView widget
    // and the widget-io gallery module.
}

TabIO Class Structure

The TabIO class will extend the Plugin.WidgetIO base class. Since WidgetIO derives from Base, we follow the same pattern we use for widgets and other utilities which extend Base to setup our new class.

TabIO = function(config) {
    TabIO.superclass.constructor.apply(this, arguments); 
};
 
Y.extend(TabIO, Y.Plugin.WidgetIO, {
    initializer: function() {...}
}, {
    NAME: 'tabIO', // component name
    NS: 'io' // plugin namespace 
});
 

TabIO = function(config) {
    TabIO.superclass.constructor.apply(this, arguments); 
};
 
Y.extend(TabIO, Y.Plugin.WidgetIO, {
    initializer: function() {...}
}, {
    NAME: 'tabIO', // component name
    NS: 'io' // plugin namespace 
});
 

Lifecycle Methods: initializer, destructor

The base WidgetIO plugin implements the initializer and destructor lifecycle methods. For the purposes of this example, we will extend the TabIO plugin's initializer so that it loads or refreshes the content whenever the tab is selected.

initializer: function() {
    var tab = this.get('host');
    tab.on('selectedChange', this.afterSelectedChange);
},
 
afterSelectedChange: function(e) { // this === tab
    if (e.newVal) { // tab has been selected
        this.io.refresh();
    }
}
 

initializer: function() {
    var tab = this.get('host');
    tab.on('selectedChange', this.afterSelectedChange);
},
 
afterSelectedChange: function(e) { // this === tab
    if (e.newVal) { // tab has been selected
        this.io.refresh();
    }
}
 

Extending the Plugin

The setContent method is where we can extend the TabIO subclass to update the Tab's content.

setContent: function(content) {
    var tab = this.get('host');
    tab.set('content', content);
}

setContent: function(content) {
    var tab = this.get('host');
    tab.set('content', content);
}

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. Plugins can also be configured during instantiation of the host instance, which is how this example works.

First thing we'll do is create a new instance of a TabView:

/* Create a new TabView instance, with content generated from script */
var tabview = new Y.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.

var feeds = {
    Chrome: 'assets/news.php?query=chrome+browser',
    Firefox: 'assets/news.php?query=firefox+browser',
    Safari: 'assets/news.php?query=safari+browser',
    Explorer: 'assets/news.php?query=explorer+browser'
};
 
Y.each(feeds, function(src, label) {
    tabview.add({
        label: label,
        plugins: [{
            fn: TabIO, 
            cfg: {
                uri: src
            }
        }]
    });
});
 
tabview.render();
 

var feeds = {
    Chrome: 'assets/news.php?query=chrome+browser',
    Firefox: 'assets/news.php?query=firefox+browser',
    Safari: 'assets/news.php?query=safari+browser',
    Explorer: 'assets/news.php?query=explorer+browser'
};
 
Y.each(feeds, function(src, label) {
    tabview.add({
        label: label,
        plugins: [{
            fn: TabIO, 
            cfg: {
                uri: src
            }
        }]
    });
});
 
tabview.render();