Flex Accordion, Hide/Show Headers

With the Flex Accordion, if you need to hide a tab for any reason, you will try to set the property “visible” of the corresponding container to false and even the “includeInLayout”.
Here an example :

 

<mx:Accordion>

<mx:VBox></mx:VBox>

<mx:VBox visible=”false” includeInLayout=”false”><mx:VBox>

<mx:VBox><mx:VBox>

</mx:Accordion>

 

Sounds logical, but it won’t work. Why ? Because the Accordion, and the other Flex containers like TabNavigator, ViewStack… are not coded in order to permit such behavior.
Since I wanted to have the possibility to hide headers, I opened the code of the Accordion, and created a new version of it wich does the work. You will find it here :

http://code.google.com/p/flex-accordionhideheader/

Flex 4 Font embedding for MX components

You might need to embed a font in the case you want to apply some transformation on a text component (like a rotation for example).
In Flex 3, it’s was as esay as writting those lines :

– in CSS :

@font-face {
src: url(“location”) | local(“name”);
fontFamily: alias;
[fontStyle: normal | italic | oblique;]
[fontWeight: normal | bold | heavy;]
[advancedAntiAliasing: true | false;]
}

– directly in AS3 :

[Embed(source=’../assets/MyriadWebPro-Bold.ttf’,
fontWeight=’bold’,
fontName=’myBoldMyriadFont’,
mimeType=’application/x-font’,
advancedAntiAliasing=’true’
)]
private var fontEmbedded:Class;

I tried naively the same technic on FLEX 4, and this it started to be a real headache.
Even if I did embed the font, the text still don’t appear when I applied a rotation on it.
I finally found that with FLEX 4 you have to specify a different textFieldClass for the mx text based component :

– in your CSS:

mx|Button
{
textFieldClass: ClassReference(“mx.core.UIFTETextField”);
}

Same for the other components (Label, FormItem, etc…).