CODEWITHSUNDEEP
apache-flexbuttonflex4tabs
Dave Meurer
Dave Meurer

Reputation: 33

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

Upvotes: 0

Views: 1946

Answers (3)

Grady G
Grady G

Reputation: 1

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/

Upvotes: 0

Ivan Zamylin
Ivan Zamylin

Reputation: 1748

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.

Upvotes: 1

2DH
2DH

Reputation: 1638

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/

Upvotes: 0

Related Questions