Friday, March 20, 2009

Tuesday, March 10, 2009

Flex TabNavigator - tab click event?

So there doesn't seem to be any item click or tab click event on the tab navigator in Flex. I find this sort of annoying, I mean surely this would be useful and should be included? When searching all I could find was people saying to either use the change event on the tab navigator, (which didn't help me because I wanted my method to run even if you clicked on the currently selected tab) or to use a tab bar instead (which also didn't help me because I am using the SuperTabNavigator from flexlib).

What I am doing is basically maximizing the tab when it is clicked, and minimizing it if it is clicked again.

I found a solution.
http://www.actionscript.org/forums/showthread.php3?t=135539 (post by stburns).

You basically get the tab's button. It sounds weird, here's the code to how it works.


private function creationComplete():void
{
for (var i:int=0; i<myTabNav.getChildren().length; i++)
{
var tab:Button = myTabNav.getTabAt(i);
tab.addEventListener(FlexEvent.BUTTON_DOWN,tabClickHandler);
}
}

private function tabClickHandler(event):void
{
if (myTabNav.height <= 25)
{
maxTabNav();
} else {
restoreTabNav();
}
}



I really need to start serving these little examples somewhere, it would be way easier for people to understand if they could see it working. I will, I promise. I have just finished the NS SPCA website redesign, so I should have some time.

Also, if you have any worthy causes that need help with their website let me know! I like to keep one charity project on the go.

**EDIT**
Here we go... my first sample with view source!
See sample (right click to view source)

Wednesday, March 4, 2009

Flex ToggleButtonBar with icons

I had a toggle button bar but I wanted to have the buttons have labels AND icons. Knowing and working with Flex for a few years I thought "oh God, how hard is this going to be". It was actually very simple!


<mx:Array id="dp">
<mx:Object label="One" icon="@Embed(source='assets/iconOne.png')"/>
<mx:Object label="Two" icon="@Embed(source='assets/iconTwo.png')"/>
<mx:Object label="Three" icon="@Embed(source='assets/iconThree.png')"/>
</mx:Array>

<mx:ToggleButtonBar id="myBar" dataProvider="{dp}"/>