Spark Tabs with Close Button

Apr 18

In a recent post here, I shared my rants regarding usability of several spark components. Well, its better to act than to complain, so I decided to try and roll my own tab control.

Easy tab navigation

For anyone who used SuperTabBar from flexlib, the functionality is more-or-less the same. However, while the SuperTab is based on mx components, mine is derived from spark TabBar. To make it light and compact, I did not implement dragging of tabs, and focused on easy to use ‘tab close’ functionality.

Features:

Adjustable gap through ‘gap’ style
Easy access to Tab skin from the TabBar via the ‘tabSkin’ style
Global and individual close policy
Default skins are supplied, used if no other skin is set

Usage:

	<plus:TabBarPlus id="bar" gap="2" cornerRadius="4" 
			styleName="barStyle"  closePolicy="always"
			dataProvider="{mainStack}"/>

Let me know about any problems or bugs.

Flex, Skinning, Spark, Tabs

Comments

daniel

May 27th, 2010 at 1:10 PM

hi amos,
thanx for the source. it’s been quite painfull to work with buttonBar class and this helped a lot.
still wondering though how to make a newly added tab selected…

var nc:NavigatorContent=new NavigatorContent();
nc.label=”new tab”;
mainStack.addItemAt(nc,0);

tried different methods but i just can figure it out.
any help would be (again) welcome.
daniel
TheWiz

May 27th, 2010 at 9:51 PM

Do you mean something like this:

var nc:NavigatorContent=new NavigatorContent();
nc.label=”new tab”;
mainStack.addItemAt(nc,0);

mainStack.selectedIndex= 0; // make the new tab selected
daniel

May 28th, 2010 at 5:08 AM

hello,
thanx for your reply.
in fact i found a turn around:

// deselect all tabs
bar.dataProvider=null;
bar.dataProvider=mainStack;

// add new tab
var nc:NavigatorContent=new NavigatorContent();
nc.label=”new tab”;
mainStack.addItemAt(nc,0);

// add new tab’s content
nc.addElement(“some component”);
// hide tabs contents if needed (otherwise old & new contents overlap)
for(i=0;i<mainStack.numElements;i++){
if(mainStack.getElementAt(i).visible == true){
mainStack.getElementAt(i).visible=false;
}
}

// & finaly select new tab
mainStack.selectedIndex=0;

hope it'll help someone
daniel