Flex Spark: How to add a Cancel button on the TabBar Button?

Question

Hi All,

I'm trying to add a cancel icon to my TabBarButtons in Flex 4.0 (Spark), and I've gotten close, but now I'm stuck on getting the icon to be "clickable"

I have seen other approaches, like FlexWiz Blog (http://flexwiz.amosl.com/flex/spark-tabs-with-close-button/), but was hoping to figure out something cleaner.

Using the similar approach found in the Tour de Flex sample on Tabbed Navigation, here is what I have in my skin so far:

<s:HGroup top="5" right="5" left="5" verticalAlign="middle">        
        <s:Label id="labelDisplay"
                 textAlign="left"
                 maxDisplayedLines="1"
                 top="10"
                 width="100%">
        </s:Label>      

        <s:Graphic x="16" y="16" 
                   buttonMode="true" 
                   mouseEnabledWhereTransparent="false" 
                   useHandCursor="true"  
                   click="closeEmployeeButtonClicked()"
                   color="0x00FF00">
            <s:BitmapImage source="@Embed('assets/images/icons/close.png')"                            
                           height="16" width="16" fillMode="scale"/>
        </s:Graphic>
</s:HGroup>

The icon appears in the tab, however, I can't click it. I also tried a button and it's almost like the parent button container does not allow the child to be clickable. I did play with some parent properties (like super.mouseChildren), but couldn't get it to work.

Any thoughts!

Kind regards, =Dave

Answer 1

It's already done in flexlib library. You can find some examples here:

http://flexlib.googlecode.com/svn/trunk/examples/SuperTabNavigator_Sample.swf

and here is its project home page:

http://code.google.com/p/flexlib/