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

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

Answers


I see that the post is pretty old, but I just came along the same issue. In order for button to be clickable, you need to enable mouseChildren at a TabBarButtonSkin. You can do it as follows:

override protected function commitProperties():void
{
    super.commitProperties();
    hostComponent.mouseChildren = true;
}

Now your button should be clickable. At least it worked for me.


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/


Here's a Flex 4 based tab control that appears to be very well done, full source included:

http://saturnboy.com/2010/08/terrifictabbar-custom-component/


Need Your Help

Jquery slider function

jquery jquery-ui jquery-effects

I'm trying to get the "Tell a friend button" on this page to return to its original position when the user clicks on "Close," but it does something different. It open slides out when you click on i...

Calling a C# method, and make it take 10 seconds to return

c# .net wcf multithreading

From a web service (WCF), I want an endpoint to take 10 seconds to finish.