Spark Tabs with Close Button


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.

, ,

8 Responses to Spark Tabs with Close Button

  1. daniel May 27, 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

  2. TheWiz May 27, 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

  3. daniel May 28, 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

  4. Bolt October 5, 2010 at 11:44 pm #

    Thank you for your so great controller, it really helped me a lot, :)

  5. Joao December 2, 2010 at 9:40 am #

    Thank you very much for this sample, you saved my day! :)

  6. Joao December 2, 2010 at 10:38 am #

    Hi Amos,

    I need to change a BitmapImage inside each Tab, based on drop down list values. Do you have any tip on this? I have tried several approaches, but I didn´t manage so far.

    I tried to add a custom property “leftCustomIcon” in the dataProvider NavigatorContent and assign its value based on the drop down list index. Is there way in which the Tab can grab the “leftCustomIcon” in NavigatorContent and change the image in the tab?

    Thanks in advance for any help on this.

  7. TheWiz December 2, 2010 at 11:40 am #

    Try to add your custom property to the tab class, and then set the skin part inside the property set function. Also make sure your bitmap is defined as a skin part, so the tab would be able to access it easily (follow the example with the close button).

    Once you got that, you should be able to set each tab individually from your custom TabBar class, and potentially access the data provider to retrieve the values.

  8. Ananth July 18, 2011 at 10:14 am #

    Hi friends,
    Actually i want add tab dynamically with closing option in navigator.Please help me..Thanking in advance..