Flex : Foldable VBox

Here the code and a demo of a foldable VBox.

Flex : TextArea/Text/TextTield -> never change default font !

For a while I changed the default font of a TextArea and a Text component in my application. I set it to Arial instead of Verdana.
Then I work on quite a fews functionalities before to bump into some layout bugs. My text component are used to display the content of a book. So I applied a scale factor on the (scaleX & scaleY) to make the book view fit in the browser. And if the user resizes the browser, the content of the book is resized also. Usually it used to resized perfectly using scaling properties (scaleX, scaleY).

But when I changed the default faut of my text component,everything went wrong. The text would be displayed in the same way if the window size changes. It tooke me quite a while before to figure out the problem was coming from the default font. Those components are made to work perfectly with the default font set to Verdana (and then the content can include text with any font).

So never change the default font of your text component in Flex !

Flex, get a screenshot and create an image with a byteArray in PHP

If need to get a screenshot of a part of my application and send it to my server.

So first in ActionScript :

var encoder:PNGEncoder = new PNGEncoder();
var snapshot:ImageSnapshot = ImageSnapshot.captureImage(this,20, encoder, false);
var data:ByteArray = snapshot.data;
data.compress();


So now I have the content of my image file ready.

I send it to PHP with a remote object for example :

var ro:RemoteObject = new RemoteObject("amfphp");
...
ro.sendImage.send(data);


On the PHP side, I receive the raw data compressed of my screenshot.
I can create an image file from it with this code :

funtcion sendImage($imagedata)
{
$data = $imagedata;
$data = $data->data;
$data = @gzuncompress($data);
@file_put_contents("image.png",$data);
}

TextArea, Embeded Font problem

For that I used a TextArea on the pages to display formatted text. The text can be displayed in different fonts. To be sure it is displayed in the given font in any client computer, I embeded each font proposed in the application.

There is two ways to embed a font, either with ActionScript like that :

[Embed(source="assets/fonts/TREBUCBI.TTF", fontWeight="bold", fontStyle="italic", fontFamily="Trebuchet MS", mimeType="application/x-font", embedAsCFF="false")]
private static const TrebuchetMSBIClass:Class;

Either with css like that :

@font-face {
src: url("assets/fonts/TREBUCBI.TTF");
fontFamily: "Trebuchet MS";
embedAsCFF: false;
fontWeight:bold;
fontStyle:italic;
}

It’s is very easy right. And once that done, you font is embeded and any Flex graphical component will be able to display any text using the embeded font. BUT, yes there is a BUT. The TextArea behaves in very weird way.

If you embed a font as we saw previously, and try to display a text in a TextArea using that font, it won’t work. You will have you text displayed in the default font. But in all the other graphical components it will work. Weird right ?

To solve that problem, you need to embed the default Flex font, the verdana font. You have to be sure that the default font is Verdana or set it explicitly your TextArea ( myTextArea.setStyle=”fontFamily”,”Verdana”) ).

Thanks Flex !