Understanding the TabView control
The TabView control, which allows you to put a standardized set of tabs within your widget, had been documented since day one, back in 2007. But that documentation was somewhat inprecise and lacking details, to say the least.
While its documentation has been severly improved since then (let us know if you consider it could still be better!), there remains a feeling that implementing tabs in a widget is a complex task, best left to wizard developers.
It’s not! And this article will drive the more sceptic among you through code samples that should make everything clear. Here goes.
Sample 1: three different tabs
The first sample code presents how to combine 3 widgets into one widget with 3 tabs, each one displaying the same content as the original widget. The three panels will display, in our example,
- some regular text;
- the latest Astronomy Picture of the Day, as per the APOD sample widget;
- the latest posts from this very blog, as per the RSSReader sample widget.
The resulting widget is available here.
We can only advise you to dive into its code, and compare to the original widgets’ code. We’ve provided as much comments as possible, so as to help you understand how we implemented some parts.
Sample 2: three different tabs, paging in feeds
You’d notice in the previous example that we did not use the Pager component, in order to simplify the code to the maximum. Therefore, if the user were to change the preference to only display the 5 of the 10 items in the feeds, he wouldn’t get the expected “prev/next” buttons at the bottom of the widget. This is what this sample code implements.
The resulting widget is available here.
The difference with the previous sample code mostly resides in the block of code that starts with this line:
var pager = new UWA.Controls.Pager(
Here, the pager object is instantiated, and the rest of the code show you how to properly have it displayed.
Sample 3: three tabs with a different feed each
As you may know, the most popular use of tabs is to have one widget for many feeds, thus reducing the needed space. To that end, you’d need to re-use the previous sample widget, and duplicate the third tab into the two first ones.
The resulting widget is available here.
Since we remove the code that displays the first two tabs (the text one, and the image one), the code gets shorter, but you should actually pay more attention to the code, because it presents how to have the logic work for us, and not crash the widget every time we change tab.
For instance, in the previous sample code, the pager was placed in a given, non-changing DIV tag:
var pagerDiv = widget.createElement('div', {'class':'paging'});
It is important to understand that each of the three tabs require its one pager, and therefore to have the code properly implement the pager so that tab-changing would not break it:
var pagerDiv = widget.createElement('div', {'class':'paging_'+tabName});
There are more advanced uses of the TabView control, which will have a look at in another post…
Your turn!
Go ahead, dive into each sample widget’s code, and you should come out of it with more understanding of tabs and their inner working.
Netvibes, a 