Improving your tabs with UWA’s TabView options
Some of you may have witnessed what we’ve been doing with Netvibes Premium Widgets (marked with the distinction 
logo): basically pushing our UWA TabView controler to its limits.
Until know the TabView documentation was basic, if even sparse: because using tabs should be done up-front when starting a new widget, we didn’t want to over-charge the doc with all the possibilities. But if you’ve been yearning to achieve the cool effects showcased by the good-old Rugby World Cup 2007 widget, keep reading!
Those who discover the RugbyWorldCup (RWC) widget only today will notice two main differences with basic tabs-using widget: each tab has its own icon, and the “Pool Standing” tab has a little drop-down menu to its left, which provides a secondary tab, “Pool Fixture”. If you you don’t want to click, have a look:
So, we’ll see how the RWC widget provides these nifty addendums…
Basic tab code
As a reminder, let’s see a basic tab usage. This is directly lifter from the TabView documentation, albeit in a shortened form.
widget.onLoad = function() {
var tabs = new UWA.Controls.TabView();
TabViewSample.tabs = tabs;
tabs.addTab("tab1", {text: "Tab One", customInfo: "custom"});
tabs.addTab("tab2", {text: "Tab Two"});
tabs.setContent("tab1", "<p>Tab one</p>");
tabs.setContent("tab2", "<p>Tab two</p>");
var activeTab = widget.getValue("activeTab");
if (activeTab) {
tabs.selectTab(activeTab);
}
tabs.observe('activeTabChange',
TabViewSample.onActiveTabChanged);
widget.setBody('');
tabs.appendTo(widget.body);
}
From here on, we can see what to add…
Tab icon
The TabView controler has an option allowing you to define a small icon (roughly favicon-sized: 12px by 12px, .png file) in order to better characterize the tab: icon. Simple add that option to the object which makes the second parameter of the addTab method, and you should be good to go. Here’s how the RWC widget does it:
RWC.tabview.addTab('calendar', {id: 'calendar',
text: calendarTabName, icon: WIDGET_PATH + 'img/cal.png'});
A reminder: the text option serves to define the widget title. It takes a string, or a JavaScript variable, as this code shows. Content is set using the sibling addContent method. As for WIDGET_PATH, the RWC widget defines it as its absolute URL.
Pulldown menu
This next option is very much use within Premium Widgets, since it lets content distributor define all of their feeds while not cluttering the interface with too many tabs: the user can choose which tabs to display himself.
See how it’s been done for the WordPress widget, for instance: every tab use the same menu, and choosing one if the items intelligently updates the other tabs content…
It is also very flexible: you can only have one menu with a unique item, and let the other tabs be on their own, just as the RWC widget does.
This option does have a name per se - rather, its how you define addTab’s second argument that matters. The documentation list that second argument as an object, residing between curly braces ( {...} ), but what it didn’t tell you is that you can use an array which can contain as many objects as there are options for this tab! Arrays reside between square brackets: [...].
Here is how the RWC widget does it.
RWC.tabview.addTab('poolstages', [
{id: 'poolstandings',
text: poolstandingsTabName,
icon: WIDGET_PATH + 'img/pencil.png'},
{id: 'poolfixtures',
text: poolfixturesTabName,
icon: WIDGET_PATH + 'img/pencil.png'}
]);
As you can see, you can easily define each option’s content, and even define a different icon for each!
There you go, two simple tips to make your UWA tabs that much more enjoyable! Looking forward to see new uses for this!
netvibes