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. (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);

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

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.

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:ToggleButtonBar id="myBar" dataProvider="{dp}"/>