Flex 3 - Custom tab navigator

Question

Hello Community!

I'm trying to create a custom tab navigator that has to look like .

Also, when there's a rollover, the borders of the arrow have to be in blue (like the label in the current tab).

For that purpose, I've created a custom component: a hbox containing a label and a canvas with 3 images inside (for the arrow tip that has to change depending on the currentState). Then, I thought of overlapping the components in order to get the blue highlight color (ex: arrow button 3 is over arrow button 4. The image of the arrow tip in button 3 will be transparent outside the arrow, so that we can see the black color of the following button).

I'm now trying to position the components inside the canvas ... but I cannot. After the creationComplete event, I assign the label text and I was calculating the coordonates of the component but it doesn't take into account the label width... -_-'

Any ideas?

Thanks. Regards,

BS_C3

Answer 1

Read up on the Flex Component LifeCycle. You should be positioning and sizing your child components in the updateDisplayList() method; not in a creationComplete handler.

You should assign the label text in either commitProperties or createChildren depending upon when you know what it is.

If you want to share some code, we may be able to hone in on the exact problem. If you run code like this:

myLabel.text = 'Blahblahblahblah';
trace(myLabel.width);

I would expect that the width has not changed to reflect the new text because the myLabel has not gone through it's own component lifecycle steps yet.