TabView: Loading Tab Content
IO functionality into TabView so
that data can be loaded remotely.
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();

