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();